Error handling with error.tsx in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic error boundary component in Next.js using error.tsx.

NextJS

export default function Error({ error }: { error: Error }) {
  return <div>[1]</div>;
}

Drag options to blanks, or click blank then click option'

AAn error occurred

Bconsole.log(error)

Cthrow error

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to log the error inside the JSX return.

Throwing the error again inside the component.

Returning null which shows nothing.

The error component should return a user-friendly message. Returning An error occurred inside a div shows this message.

2fill in blank

medium

Complete the code to display the error message inside the error component.

NextJS

export default function Error({ error }: { error: Error }) {
  return <div>Error: [1]</div>;
}

Drag options to blanks, or click blank then click option'

Aerror.message()

Berror

Cerror.toString()

Derror.message

Attempts:

3 left

💡 Hint

Common Mistakes

Calling error.message as a function.

Trying to render the whole error object directly.

Using error.toString() which works but is less common here.

The message property of the error object holds the error text. Use error.message to show it.

3fill in blank

hard

Fix the error in the code to properly type the error prop in error.tsx.

NextJS

export default function Error({ error }: [1]) {
  return <div>{error.message}</div>;
}

Drag options to blanks, or click blank then click option'

A{ error: string }

B{ error: unknown }

C{ error: Error }

D{ error: any }

Attempts:

3 left

💡 Hint

Common Mistakes

Typing error as string which lacks message property.

Using unknown without type checking.

Using any which disables type safety.

The error prop should be typed as Error to access message safely.

4fill in blank

hard

Fill both blanks to create a custom error component that logs the error and shows a message.

NextJS

export default function Error({ error }: { error: Error }) {
  [1](error);
  return <div>[2]</div>;
}

Drag options to blanks, or click blank then click option'

Aconsole.error

Bconsole.log

CAn unexpected error happened

DError occurred

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of console.error for errors.

Returning a vague or no message to the user.

Use console.error to log errors clearly. Show a friendly message like An unexpected error happened to users.

5fill in blank

hard

Fill all three blanks to create an error component that shows the error name, message, and a retry button.

NextJS

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <main>
      <h1>[1]</h1>
      <p>[2]</p>
      <button onClick=[3] aria-label="Retry loading page">Try again</button>
    </main>
  );
}

Drag options to blanks, or click blank then click option'

Aerror.name

Berror.message

Creset

Dconsole.error

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.error instead of reset for the button.

Showing only the message or only the name.

Not adding an accessible label to the button.

Show the error's name in the heading, the message in a paragraph, and use the reset function for the retry button's click handler.

Practice

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

easy

A. To catch and display errors that happen in that route

B. To define the page layout and styles

C. To fetch data from an API

D. To handle user authentication

Solution

1. Step 1: Understand the role of error.tsx

   This file is designed to catch errors that occur in its route and show a friendly message to users.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated tasks like layout, data fetching, or authentication, which are not the purpose of error.tsx.

3. Final Answer:

   To catch and display errors that happen in that route -> Option A

4. Quick Check:

   Error handling = To catch and display errors that happen in that route [OK]

Hint: Remember: error.tsx shows errors in its route [OK]

Common Mistakes:

• Confusing error.tsx with layout.tsx
• Thinking error.tsx fetches data
• Assuming error.tsx manages authentication

2. Which of the following is the correct way to export an error component in error.tsx for Next.js?

easy

A. const Error = () => { Error occurred }; export default Error;

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

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

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

Solution

1. Step 1: Check correct export syntax

   Next.js expects a default export for the error component in error.tsx. export default function Error() { return

   Error occurred

   ; } uses export default function, which is correct.

2. Step 2: Identify syntax errors in other options

   function Error() { return

   Error occurred

   ; } lacks export, so it won't be recognized. export function Error() { return

   Error occurred

   ; } exports a named function, not default. const Error = () => {

   Error occurred

   }; export default Error; misses a return statement inside the arrow function, causing no output.

3. Final Answer:

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

4. Quick Check:

   Default export function = export default function Error() { return

   Error occurred

   ; } [OK]

Hint: Use default export function for error component [OK]

Common Mistakes:

• Forgetting to export default
• Using named exports instead of default
• Missing return statement in arrow function

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

export default function Error() {
  return (
    <section role="alert">
      <h1>Oops! Something went wrong.</h1>
      <button onClick={() => window.location.reload()}>Try again</button>
    </section>
  );
}

medium

A. An error message but no button

B. A blank page with no content

C. A console error but no UI change

D. A section with a heading and a button that reloads the page

Solution

1. Step 1: Analyze the JSX structure

   The component returns a <section> with role="alert", containing a heading and a button with an onClick that reloads the page.

2. Step 2: Understand the rendered output

   When an error happens, this UI shows a message and a clickable button that refreshes the page, matching A section with a heading and a button that reloads the page.

3. Final Answer:

   A section with a heading and a button that reloads the page -> Option D

4. Quick Check:

   JSX returns alert section with reload button = A section with a heading and a button that reloads the page [OK]

Hint: Look for JSX elements and event handlers to predict output [OK]

Common Mistakes:

• Ignoring the button's onClick behavior
• Assuming no UI renders on error
• Confusing role attribute with content

4. You wrote this error.tsx but it does not show the error UI when an error happens:

function Error() {
  return <p>Error!</p>;
}
export default Error;

What is the likely problem?

medium

A. The component name must be lowercase

B. The file must be named error.tsx and placed in the route folder

C. The component is not exported as default

D. The component must return a div, not a p

Solution

1. Step 1: Check export and component name

   The component is exported as default and named with uppercase, which is correct.

2. Step 2: Verify file placement and naming

   Next.js requires the error.tsx file to be in the route folder to catch errors there. If misplaced or misnamed, it won't work.

3. Final Answer:

   The file must be named <code>error.tsx</code> and placed in the route folder -> Option B

4. Quick Check:

   Correct file name and location = The file must be named error.tsx and placed in the route folder [OK]

Hint: Check file name and folder location for error.tsx [OK]

Common Mistakes:

• Using lowercase component name
• Returning wrong HTML tags
• Not placing error.tsx in the route folder

5. You want to improve accessibility in your error.tsx component. Which change best helps screen reader users?

hard

A. Add role="alert" to the container element

B. Use only <div> elements without roles

C. Remove all buttons to avoid confusion

D. Use inline styles to highlight the error text

Solution

1. Step 1: Understand accessibility roles

   Adding role="alert" tells screen readers to announce the error immediately, improving accessibility.

2. Step 2: Evaluate other options

   Use only <div> elements without roles lacks roles, reducing accessibility. Remove all buttons to avoid confusion removes helpful retry buttons. Use inline styles to highlight the error text styles visually but doesn't help screen readers.

3. Final Answer:

   Add <code>role="alert"</code> to the container element -> Option A

4. Quick Check:

   Use ARIA roles for accessibility = Add role="alert" to the container element [OK]

Hint: Use ARIA roles like role="alert" for error messages [OK]

Common Mistakes:

• Ignoring ARIA roles for screen readers
• Removing interactive elements unnecessarily
• Relying only on visual styles for errors