error.tsx per segmenterror.tsx per segment

Where does the error land?

Toggle boundaries, then press Throw on any file.

app/
├── layout.tsx          // errors here → global-error.tsx
├── global-error.tsx
├── error.tsx           // catches everything below app/, root nav survives
└── blog/
    ├── layout.tsx      // errors here → app/error.tsx (the parent's boundary)
    ├── error.tsx       // catches /blog/*, sidebar survives
    └── [slug]/
        ├── layout.tsx
        ├── error.tsx   // catches /blog/[slug], post header survives
        └── page.tsx

Recover the segment only

Type a search, press Load post, then recover each pane.

// app/blog/[slug]/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div role="alert">
      <h2>This post failed to load.</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

The root needs global-error

Throw, then untick the shell checkbox.

// app/global-error.tsx
'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html lang="en">
      <body>
        <h2>Something went wrong.</h2>
        {error.digest && <p>Reference: {error.digest}</p>}
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

Why it matters, pros and cons