Data and rendering

Handle errors and missing data

Treat validation failures and missing resources as expected outcomes while containing unexpected exceptions with route boundaries.

8 minute lesson

~~~

A missing note is not the same as a crashed database client. Expected outcomes should be represented deliberately instead of thrown as generic exceptions.

Call notFound() for an absent resource and provide not-found.tsx. Return structured validation results from actions. Add error.tsx as a Client Component for uncaught exceptions within a route segment; it receives a reset function for retrying. Log the underlying server error without exposing private details to the visitor.

An error boundary handles failures in the segment below it, not failures thrown by the layout at that same level. Move the boundary up when shared layout work can fail, or move risky work into a child segment. A global error boundary is the last resort for failures at the root.

Calling reset() asks React to render the segment again. It can recover from a temporary failure, but it cannot repair invalid configuration or a deterministic bug. Give the visitor another route out and preserve a server-side error identifier so operators can connect a friendly message to the real failure. In production, Server Component error details are intentionally sanitized.

Make one dynamic slug call notFound(). Add a route error boundary, trigger a separate temporary exception and a permanent one, and observe what reset can and cannot fix. Check that the production response reveals no stack, query, or secret.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →