error

The error.tsx convention provides route-scoped fallback UI for unexpected runtime failures. It must be a Client Component because the fallback can use client-side behavior such as effects and retry actions; the boundary receives the thrown error and a reset callback.

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { /* fallback UI */ }

Fallback React UI rendered when an unexpected runtime error occurs within the protected route segment or its nested children.

// app/dashboard/invoices/error.tsx
'use client'

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <main>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </main>
  )
}

Place a client component named error.tsx in a route segment. Next.js uses it as an automatically inserted error boundary for that segment and its descendants; when rendering fails, it receives the error and a reset function so the UI can report the problem and retry.