Use error.tsx for route-level error boundaries | BeforeMerge Rules | BeforeMerge

Use error.tsx for route-level error boundaries | BeforeMerge Rules | BeforeMerge

Why This Matters

A bug in /settings shouldn't crash /dashboard. Each route group needs its own error boundary.

Good

// app/(dashboard)/error.tsx
"use client"
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

Note: error.tsx must be a client component ("use client").