app/components/error-page.tsx

Functions

Imports

It imports app/components/not-found-help.tsx, app/components/shell-footer.tsx, app/components/site-header.tsx. Imported by app/root.tsx, app/routes/legacy-public.tsx.

Source

1import { isRouteErrorResponse } from "react-router";
2
3import { NotFoundHelp } from "~/components/not-found-help";
4import { ShellFooter } from "~/components/shell-footer";
5import { SiteHeader } from "~/components/site-header";
6
7/** The error page root.tsx and the public layout each render as their ErrorBoundary. */
8export function ErrorPage({ error }: { error: unknown }) {
9  let message = "Something broke.";
10  let details = "The page failed to render.";
11  let stack: string | undefined;
12  const notFound = isRouteErrorResponse(error) && error.status === 404;
13
14  if (isRouteErrorResponse(error)) {
15    message = notFound ? "404" : "Error";
16    details = notFound ? "This page is not here." : error.statusText || details;
17  } else if (import.meta.env.DEV && error && error instanceof Error) {
18    details = error.message;
19    stack = error.stack;
20  }
21
22  // SiteHeader is safe here: it reads no loader data, so nothing is missing on the error path.
23  return (
24    <>
25      <SiteHeader />
26      <main className="page" id="main" tabIndex={-1}>
27        <div className="page-inner">
28          <h1>{message}</h1>
29          <p className="muted">{details}</p>
30          {notFound ? <NotFoundHelp /> : null}
31          {stack && (
32            <pre className="error-stack">
33              <code>{stack}</code>
34            </pre>
35          )}
36        </div>
37      </main>
38      <ShellFooter />
39    </>
40  );
41}