Headline: In the Next.js App Router, error.tsx is a React error boundary for a route segment: it catches errors thrown while rendering that segment and everything nested below it, hands you an error object and a reset() function, and must be a Client Component. It does not catch errors in its own layout, in event handlers, or in async code that runs outside render.
I lost an afternoon to a single unhandled throw that blanked an entire dashboard. One failing data call in a nested component took down the whole page instead of the one panel that broke. The App Router already had the tools to contain it — I just had the wrong mental model of where each error file sits and what it actually catches.
Key takeaways
An error.tsx file in a route segment creates a React error boundary that catches errors thrown during rendering of that segment's page and any nested layouts, pages, and components below it.
error.tsx must start with 'use client' because React error boundaries rely on class-component lifecycle methods that only run in the browser; the file receives two props, error and reset.
