error.js: Graceful Error Boundaries in Next.js
The error.js file acts as a UI safety net, catching runtime errors in a Next.js route segment to prevent a full app crash. Use it to display a custom error message and a "try again" button.
Why it exists
In complex applications, errors are inevitable. A single component failing to render shouldn't crash the entire application. The error.js convention provides a built-in mechanism to isolate failures to specific parts of the UI, preserving the rest of the application's state and navigation.
The mental model
Think of error.js as an automatic try-catch block for a specific part of your route tree. When an error occurs inside its boundary, instead of a broken page, Next.js renders your predefined error component, giving you control over the user's experience during failure.
How it works
You create a file named error.js inside a route directory (e.g., app/dashboard/error.js). This file must export a React component that is automatically treated as a Client Component. It receives two props: error, an object containing details about the error, and reset, a function that, when called, attempts to re-render the content within the boundary. This allows you to implement a "Try Again" button.
When to use it
Use error.js to handle runtime errors that might occur in Server or Client Components within a specific route segment. It's ideal for showing user-friendly messages for things like failed data fetches, rendering exceptions, or other unexpected issues, improving application resilience.
When not to use it
An error.js boundary does not catch errors originating from a layout.js or template.js file in the same segment; those errors will bubble up to the nearest error boundary in a parent route. It also won't catch errors from asynchronous callbacks outside the render lifecycle, like a setTimeout.
One canonical example
A user visits /products/123. The page component tries to fetch product data, but the API is down. Instead of a generic browser error, the app/products/[id]/error.js component renders. It shows a message "Sorry, we couldn't load this product" and a button that calls the reset prop to try fetching the data again. The site's main navigation and header, defined in a parent layout, remain fully functional.
Interview question
Which error scenario would NOT be directly caught by an error.js boundary placed within the same Next.js route segment?
- a.An error thrown during data fetching within a Server Component.
- b.A runtime error occurring in a client-side component's render method.
- c.A rendering exception within a nested Server Component.
- d.An error originating from a layout.js file in the same segment.Correct
Why? this is the answer
The card explicitly states that an error.js boundary does not catch errors originating from a layout.js or template.js file in the same segment; these errors will bubble up to a parent error boundary. It is designed to catch errors within page components or nested components, but not the layout of its own segment.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles