Atproto AMA app
1import { Show, type JSX } from "solid-js";
2
3import { RouteError } from "~/lib/errors";
4
5import styles from "~/routes/[handle].module.css";
6
7interface ErrorBoundaryProps {
8 error: unknown;
9 reset: () => void;
10}
11
12export default function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element {
13 const err = (): Error =>
14 props.error instanceof Error ? props.error : new Error(String(props.error));
15
16 const routeError = (): RouteError | null =>
17 props.error instanceof RouteError ? props.error : null;
18
19 return (
20 <div class={styles.page}>
21 <div class={styles.errorContainer}>
22 <h1 class={styles.errorTitle}>
23 {routeError()?.title ?? "Something went wrong"}
24 </h1>
25 <p class={styles.errorMessage}>
26 {routeError()?.message ??
27 "An unexpected error occurred. Please try again."}
28 </p>
29 <Show when={!routeError()}>
30 <details class={styles.errorDetails}>
31 <summary>Error details</summary>
32 <pre class={styles.errorStack}>{err().stack}</pre>
33 </details>
34 </Show>
35 <div class={styles.errorActions}>
36 <button
37 classList={{ [styles.button]: true, [styles.buttonSecondary]: true }}
38 onClick={() => window.history.back()}
39 >
40 Go Back
41 </button>
42 <button class={styles.button} onClick={props.reset}>
43 Try Again
44 </button>
45 </div>
46 </div>
47 </div>
48 );
49}