How does global-error.tsx work in Next.js?

Next.jsMiddle~1 min read

What `global-error.tsx` is

In Next.js, the app/global-error.tsx file:

catches rendering, data fetching, and server component errors
works at the level of the whole application
overrides any layout
is used when everything is broken

Error hierarchy (very important)

Next.js looks for an error boundary bottom to top:

segment/error.tsx        ← priority #1
segment/layout.tsx
...
app/global-error.tsx     ← last fallback

If no matching error.tsx exists, global-error.tsx is used.

Where it lives

txt

app/
 ├─ layout.tsx
 ├─ global-error.tsx   ← only here
 └─ page.tsx

Only at the root of app/ global-error.tsx does not work inside segments.

Minimal example

tsx

"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <h1>Something went seriously wrong</h1>
        <p>{error.message}</p>
        <button onClick={() => reset()}>
          Try again
        </button>
      </body>
    </html>
  );
}