Deviopath › Next.js

error.tsx with Retry

Medium · Error Handling

An error.tsx file wraps its route segment in a React error boundary. When something in the segment throws, Next.js shows the component exported from error.tsx instead of crashing the whole app. It must be a Client Component ("use client") and receives:

- error: the error. Errors from **Client Components** keep their message. Errors from **Server Components** reach the browser with a generic message in production (to avoid leaking secrets) plus error.digest, an id you can look up in the server logs.

- retry() (stable since Next.js 16.3): re-fetches and re-renders the segment. If it works this time, the normal content replaces the error UI. (There is also reset(), which only clears the error state without re-fetching. Older Next.js versions only had reset.)

The harness below is already written: two segments that fail on the first try and succeed after a retry. Implement ErrorView({ error, retry }):

- An <h2> with Something went wrong!.

- A <p> with the message: error.message for normal errors, but when error.digest is set show Server error (ref: <digest>) and **not** the generic message.

- A <button> **Try again** that calls retry().

- A <Link href="/"> **Go home**.

In a real error.tsx, also log the error in an effect (useEffect(() => console.error(error), [error])) and export the component as the default.

Next: Form with useActionState