Something went wrong. Try again.
A Tanstack Start (Solid flavour) template for my projects
Something went wrong. Try again.
2.2 kB · 69 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970import type { ErrorRouteComponent } from "@tanstack/solid-router";import { createSignal, Show } from "solid-js";
// Modified from https://github.com/TanStack/router/blob/61d767049e57420a1eb5dcb77994d970aa8f64fa/packages/solid-router/src/CatchBoundary.tsx#L36-L78export const DefaultErrorComponent: ErrorRouteComponent = ({ error, reset, info }) => { const [showError, setShowError] = createSignal(process.env.NODE_ENV !== "production");
return ( <div style={{ padding: ".5rem", "max-width": "100%" }}> <div style={{ display: "flex", "align-items": "center", gap: ".5rem" }}> <strong style={{ "font-size": "1rem" }}>Oh no, something went wrong :(</strong> <button onClick={() => setShowError((d) => !d)} style={{ appearance: "none", "font-size": ".6em", border: "1px solid currentColor", padding: ".1rem .2rem", "font-weight": "bold", "border-radius": ".25rem", }} type="button" > {showError() ? "Hide Error" : "Show Error"} </button> <button onClick={reset} style={{ appearance: "none", "font-size": ".6em", border: "1px solid currentColor", padding: ".1rem .2rem", "font-weight": "bold", "border-radius": ".25rem", }} type="button" > Try again? </button> </div>
<div style={{ height: ".25rem" }} />
<Show when={showError()}> <div> <pre style={{ "font-size": ".7em", border: "1px solid red", "border-radius": ".25rem", padding: ".3rem", color: "red", overflow: "auto", }} > <code style={{ "text-wrap": "wrap" }}> {error.message} {error.cause ? ` caused by ${error.cause}` : ""} {"\n"} {error.stack} </code>
{info?.componentStack} </pre> </div> </Show> </div> );};