angelo.fyi
A Tanstack Start (Solid flavour) template for my projects
1import type { ErrorRouteComponent } from "@tanstack/solid-router";
2import { createSignal, Show } from "solid-js";
3
4// Modified from https://github.com/TanStack/router/blob/61d767049e57420a1eb5dcb77994d970aa8f64fa/packages/solid-router/src/CatchBoundary.tsx#L36-L78
5export const DefaultErrorComponent: ErrorRouteComponent = ({ error, reset, info }) => {
6 const [showError, setShowError] = createSignal(process.env.NODE_ENV !== "production");
7
8 return (
9 <div style={{ padding: ".5rem", "max-width": "100%" }}>
10 <div style={{ display: "flex", "align-items": "center", gap: ".5rem" }}>
11 <strong style={{ "font-size": "1rem" }}>Oh no, something went wrong :(</strong>
12 <button
13 onClick={() => setShowError((d) => !d)}
14 style={{
15 appearance: "none",
16 "font-size": ".6em",
17 border: "1px solid currentColor",
18 padding: ".1rem .2rem",
19 "font-weight": "bold",
20 "border-radius": ".25rem",
21 }}
22 type="button"
23 >
24 {showError() ? "Hide Error" : "Show Error"}
25 </button>
26 <button
27 onClick={reset}
28 style={{
29 appearance: "none",
30 "font-size": ".6em",
31 border: "1px solid currentColor",
32 padding: ".1rem .2rem",
33 "font-weight": "bold",
34 "border-radius": ".25rem",
35 }}
36 type="button"
37 >
38 Try again?
39 </button>
40 </div>
41
42 <div style={{ height: ".25rem" }} />
43
44 <Show when={showError()}>
45 <div>
46 <pre
47 style={{
48 "font-size": ".7em",
49 border: "1px solid red",
50 "border-radius": ".25rem",
51 padding: ".3rem",
52 color: "red",
53 overflow: "auto",
54 }}
55 >
56 <code style={{ "text-wrap": "wrap" }}>
57 {error.message}
58 {error.cause ? ` caused by ${error.cause}` : ""}
59 {"\n"}
60 {error.stack}
61 </code>
62
63 {info?.componentStack}
64 </pre>
65 </div>
66 </Show>
67 </div>
68 );
69};