`global-error.js`

Top-level error boundary that catches errors in the root layout.

Since Next 13.1 (App Router) Spec ↗

Syntax

'use client'; export default function GlobalError({ error, reset }) { ... }

Parameters

Name	Type	Required	Description
`error`	`Error & { digest?: string }`	Yes	The caught error.
`reset`	`() => void`	Yes	Attempts to re-render the root.

Returns

ReactNode — Full-page error UI replacing the root layout.

Examples

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Application error</h2>
        <button onClick={reset}>Try again</button>
      </body>
    </html>
  )
}

Notes

Must be a Client Component and MUST render its own `<html>` and `<body>` because it replaces the root layout entirely. It only catches errors thrown in the root `layout.js`/`template.js`; segment errors are handled by nearer `error.js`. Active only in production.