Error Boundaries
Errors can happen during data fetching, rendering, or client interaction. A route-level error.tsx component can provide a recovery UI for errors within a route segment.
A good error experience should communicate what happened without exposing internal implementation details. It should also provide a recovery action where possible.
Not every error should be treated as a fatal application-wide failure.
Route Error Boundary
'use client';
export default function Error({
reset
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<section>
<h2>Something went wrong.</h2>
<button onClick={() => reset()}>Try again</button>
</section>
);
}💡 The route can provide a recovery UI without exposing sensitive server details.
Key Takeaways
- Handle errors close to the UI boundary where recovery is possible.
- Do not expose stack traces or secrets to users.
- Provide recovery actions when retrying can succeed.