Error.tsx for route errors in NextJS - Step-by-Step Execution

Concept Flow - Error.tsx for route errors

Route Error Occurs

↓

Next.js Detects Error

↓

Render Error.tsx Component

↓

Display Error Message to User

↓

User Sees Friendly Error Page

When a route error happens, Next.js shows the Error.tsx component to display a friendly error page.

Execution Sample

NextJS

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main role="alert" aria-live="assertive">
      <h1>Oops! Something went wrong.</h1>
      <p>{error?.message || 'Unknown error occurred.'}</p>
      <button onClick={() => reset()}>Try Again</button>
    </main>
  );
}

This Error.tsx component shows an error message and a retry button when a route error happens.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Route error detected	No error shown	Next.js renders Error.tsx with error prop	error object present	Error component	Error message and button appear
2	Component mounts	error object present	useEffect logs error to console	error logged	No re-render	No DOM change
3	User clicks 'Try Again'	Error shown	reset() called to retry route	error cleared or retried	App rerenders route	Error page removed, route content shown
4	No new error	Route content shown	Normal route rendering	No error	Route component	Route page visible
5	No further errors	Normal state	No action	Stable	No re-render	No DOM change

💡 Execution stops when the route successfully loads without errors or user navigates away.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
error	undefined	{message: 'Failed to load'}	{message: 'Failed to load'}	undefined or null	undefined or null
reset	function	function	called	function	function

Key Moments - 3 Insights

Why does the error message stay visible until I click 'Try Again'?

Because the error prop remains set in Error.tsx (see execution_table step 1 and 3). The component only clears the error when reset() is called.

What does the useEffect hook do in this Error.tsx?

It logs the error to the console once when the component mounts with the error (see execution_table step 2). It does not cause re-render or DOM changes.

How does the reset function help recover from the error?

Calling reset() triggers Next.js to retry loading the route, clearing the error and re-rendering the normal page (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the state of 'error' at step 2?

A Undefined

B An error object with a message

C Null

D A string error message

💡 Hint

Check the 'State After' column for step 1 and 'State Before' for step 2 in execution_table.

At which step does the user interaction to retry happen?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look for the step mentioning 'User clicks Try Again' in the execution_table.

If the reset function was not called, what would happen to the error display?

A Error message disappears automatically

B Page reloads automatically

C Error message stays visible

D Error message changes to a success message

💡 Hint

Refer to the key_moments about error visibility and reset function.

Concept Snapshot

Error.tsx in Next.js handles route errors by rendering a friendly error page.
It receives an error object and a reset function as props.
The component shows the error message and a retry button.
useEffect logs the error once on mount.
Clicking retry calls reset() to reload the route.
This pattern improves user experience on route failures.

Full Transcript

When a route error happens in Next.js, the framework renders the Error.tsx component. This component receives the error details and a reset function. It shows a clear error message and a button labeled 'Try Again'. When the component mounts, it logs the error to the browser console for debugging. The error message stays visible until the user clicks the retry button, which calls the reset function. This triggers Next.js to attempt loading the route again, clearing the error and showing the normal page if successful. This flow helps users understand and recover from route errors smoothly.

Practice

1. What is the main purpose of the Error.tsx file in a Next.js route?

easy

A. To define the main layout of the application

B. To display a friendly message when a route fails or an error occurs

C. To handle user authentication and login

D. To fetch data from an API for the route

Solution

1. Step 1: Understand the role of Error.tsx in Next.js

   Error.tsx is designed to catch errors in routes and show a user-friendly message instead of a broken page.

2. Step 2: Compare with other options

   Layouts, authentication, and data fetching are handled elsewhere, not in Error.tsx.

3. Final Answer:

   To display a friendly message when a route fails or an error occurs -> Option B

4. Quick Check:

   Error.tsx shows friendly error messages [OK]

Hint: Error.tsx shows errors, not layouts or data [OK]

Common Mistakes:

• Confusing Error.tsx with layout or data files
• Thinking Error.tsx handles authentication
• Assuming Error.tsx fetches API data

2. Which of the following is the correct way to export a default Error component in Error.tsx for Next.js?

easy

A. export function Error() { return Error occurred; }

B. function Error() { return Error occurred; }

C. export default function Error() { return Error occurred; }

D. default export function Error() { return Error occurred; }

Solution

1. Step 1: Recall correct default export syntax in React/Next.js

   The correct syntax is to declare the function and export it as default in one statement.

2. Step 2: Identify syntax errors in other options

   function Error() { return
   Error occurred; } misses export, C exports a named function, D has invalid syntax.

3. Final Answer:

   export default function Error() { return <div>Error occurred</div>; } -> Option C

4. Quick Check:

   Default export uses 'export default function' [OK]

Hint: Default export needs 'export default function' [OK]

Common Mistakes:

• Forgetting to export the component
• Using named export instead of default
• Incorrect export syntax like 'default export'

3. Given this Error.tsx component, what will be rendered when an error occurs?

export default function Error() {
  return (
    <main role="alert" aria-live="assertive">
      <h1>Oops! Something went wrong.</h1>
      <button onClick={() => window.location.reload()}>Try Again</button>
    </main>
  );
}

medium

A. A heading with an error message and a button to reload the page

B. A blank page with no content

C. Only a button that does nothing

D. An error stack trace displayed to the user

Solution

1. Step 1: Analyze the JSX returned by the Error component

   The component returns a main element with a heading and a button that reloads the page on click.

2. Step 2: Understand the button behavior

   The button triggers window.location.reload(), so it reloads the current page when clicked.

3. Final Answer:

   A heading with an error message and a button to reload the page -> Option A

4. Quick Check:

   Error component shows message + reload button [OK]

Hint: Look for JSX elements and button onClick behavior [OK]

Common Mistakes:

• Assuming no content renders
• Thinking button does nothing
• Expecting error stack trace to show

4. What is wrong with this Error.tsx component code?

export default function Error() {
  return (
    <div>
      <h1>Error!</h1>
      <button onClick={reloadPage}>Reload</button>
    </div>
  );
}

function reloadPage() {
  location.reload;
}

medium

A. The reloadPage function does not call location.reload() correctly

B. The button should not have an onClick handler

C. The component must use a <main> tag instead of <div>

D. The function reloadPage should be inside the component

Solution

1. Step 1: Check the reloadPage function implementation

   location.reload is a function and must be called with parentheses: location.reload()

2. Step 2: Verify other parts

   The button can have onClick, using div is allowed, and reloadPage can be outside the component.

3. Final Answer:

   The reloadPage function does not call location.reload() correctly -> Option A

4. Quick Check:

   Call functions with parentheses to execute [OK]

Hint: Check if functions are called with () [OK]

Common Mistakes:

• Forgetting parentheses on function calls
• Thinking onClick is invalid on button
• Believing HTML tags must be <main>

5. You want to improve accessibility in your Error.tsx component by adding ARIA roles and live regions. Which of these changes is best practice?

hard

A. Use a <div> with aria-hidden="true" around the error message

B. Remove all ARIA attributes to keep it simple

C. Add tabindex="-1" to the button only

D. Wrap the error message in a <main> with role="alert" and aria-live="assertive"

Solution

1. Step 1: Understand ARIA roles for error messages

   Using role="alert" and aria-live="assertive" notifies screen readers immediately about errors.

2. Step 2: Evaluate other options

   aria-hidden="true" hides content from screen readers, tabindex="-1" on button is unrelated, removing ARIA reduces accessibility.

3. Final Answer:

   Wrap the error message in a <main> with role="alert" and aria-live="assertive" -> Option D

4. Quick Check:

   Use role="alert" and aria-live for error accessibility [OK]

Hint: Use role="alert" and aria-live="assertive" for errors [OK]

Common Mistakes:

• Hiding error messages from screen readers
• Misusing tabindex on unrelated elements
• Removing ARIA attributes thinking they are optional