`error.js`

Client error boundary that catches runtime errors in a route segment.

Since Next 13 (App Router) Spec ↗

Syntax

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

Parameters

Name	Type	Required	Description
`error`	`Error & { digest?: string }`	Yes	The caught error; `digest` correlates server logs.
`reset`	`() => void`	Yes	Re-renders the segment to attempt recovery.

Returns

ReactNode — Fallback UI when the segment throws.

Examples

'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>
  )
}

'use client'
import { useEffect } from 'react'

export default function Error({ error }: { error: Error }) {
  useEffect(() => {
    reportError(error)
  }, [error])
  return <p>Failed to load.</p>
}

Notes

Must be a Client Component (`'use client'`). It catches errors in the segment's page and children but NOT in the same-level `layout.js` (use a parent `error.js` or `global-error.js` for that). Production error messages are sanitized; use `digest` to match server logs.