An error file allows you to handle unexpected runtime errors and display fallback UI.
It is defined at a route level
Loading UI components do not accept any parameters.
It receives error object, and reset as props
Runtime Errors in Client Components: Errors that occur within the browser after the page has loaded.
Runtime Errors in Server Components: If a Server Component throws an error during rendering on the server, Next.js will forward that error to the nearest error.js file.
Errors in page.js: Since error.js wraps the page.js file of the same route segment, it effectively catches any blowups within that page.
Data Fetching Errors: If an async Server Component fails to fetch data (e.g., fetch throws an error), the UI will swap to the error boundary.
Errors in the same-level layout.js: This is the most common point of confusion. Because layout.js sits above error.js in the component tree, the error boundary cannot see errors happening in its sibling layout. To catch those, you need an error.js in the parent directory.?
Errors in global-error.js territory: Specifically, errors in the root app/layout.js are not caught by a standard app/error.js. You must use a global-error.js file in the root to handle those.
404 Not Found Errors: These are handled by not-found.js, not error.js.
Syntax Errors: Errors that prevent the code from compiling or building (found during npm run build) will stop the process entirely before the error boundary ever has a chance to run.
Server Actions / API Route Errors: While you can use try/catch inside a Server Action to trigger an error state, error.js doesn't automatically intercept a failed POST request unless that failure causes the component rendering to throw.