error.tsx · Source

error.tsxapps/web/src/app/error.tsxraw ← app2,594 B← Back to the app
1"use client";
2 
3/**
4 * Route-level error boundary (QA issue #5/#6: "many unreeled errors" and
5 * "navigating … became fail / leads to error page").
6 *
7 * Before this existed, ANY uncaught error while a route segment was
8 * rendering (a position-string math throw, an unguarded `.map` on a
9 * `null` blocks list, …) crashed the segment with no recoverable UI —
10 * Next.js's error overlay in dev, a blank shell in prod. This boundary
11 * catches it at the route level, shows a recoverable card, and keeps the
12 * rest of the app usable. `reset()` re-renders the segment; combined with
13 * the fixes that removed the throwing call sites, a transient failure is
14 * now a visible, retryable state instead of a dead page.
15 *
16 * MUST be a client component and must NOT import app-wide stores or
17 * providers (it renders outside them by design).
18 */
19export default function RouteError({
20  error,
21  reset
22}: {
23  error: Error & { digest?: string };
24  reset: () => void;
25}) {
26  return (
27    <div className="flex min-h-[50vh] items-center justify-center p-6">
28      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 text-center shadow-sm">
29        <div className="mx-auto mb-3 flex size-10 items-center justify-center rounded-full bg-destructive/10">
30          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-destructive" aria-hidden>
31            <path d="M12 9v4M12 17h.01" />
32            <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
33          </svg>
34        </div>
35        <h2 className="text-base font-semibold">Something went wrong on this page</h2>
36        <p className="mt-1 text-sm text-muted-foreground">
37          The page failed to load or render. Your content is safe — try again, or go back to
38          the workspace.
39        </p>
40        {error?.digest ? (
41          <p className="mt-2 truncate text-xs text-muted-foreground/70" title={error.digest}>
42            Ref: {error.digest}
43          </p>
44        ) : null}
45        <div className="mt-4 flex items-center justify-center gap-2">
46          <button
47            type="button"
48            onClick={reset}
49            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
50          >
51            Try again
52          </button>
53          <a
54            href="/"
55            className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent"
56          >
57            Go home
58          </a>
59        </div>
60      </div>
61    </div>
62  );
63}
64