Error.tsx for route errors in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the necessary React function for the error component.

NextJS

import React, { [1] } from 'react';

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

AuseRouteError

BuseEffect

CuseError

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks unrelated to error handling like useState or useEffect.

Trying to import a hook named useError which does not exist.

The useRouteError hook is used in Next.js error components to get the error details for route errors.

2fill in blank

medium

Complete the code to get the error object inside the Error component.

NextJS

export default function Error() {
  const error = [1]();
  return <div>An error occurred.</div>;
}

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

AuseRouteError

BuseError

CgetError

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks that do not return error objects like useEffect.

Trying to call a non-existent function getError.

The useRouteError hook returns the error object for the current route error.

3fill in blank

hard

Fix the error in the JSX to display the error message safely.

NextJS

return <div>Error: [1]</div>;

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

Aerror.message()

Berror.toString()

Cerror.message

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call error.message as a function.

Rendering the whole error object directly.

The error.message property contains the error message string. Using error directly or calling message() causes errors.

4fill in blank

hard

Fill both blanks to create a semantic error message with a heading and paragraph.

NextJS

return (
  <section aria-labelledby=[1]>
    <h1 id=[2]>Error Occurred</h1>
    <p>{error.message}</p>
  </section>
);

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

A"error-heading"

B"errorMessage"

D"main-heading"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different strings for aria-labelledby and id.

Not using quotes around the string values.

The aria-labelledby attribute should match the id of the heading it labels. Using "error-heading" for both ensures accessibility.

5fill in blank

hard

Fill all three blanks to add a button that reloads the page on click.

NextJS

return (
  <div>
    <p>{error.message}</p>
    <button onClick=[1] aria-label=[2]>[3]</button>
  </div>
);

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

A() => window.location.reload()

B"Reload the page"

C"Reload"

D() => console.log('Reload')

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of reloading the page.

Missing aria-label or using incorrect text.

The button's onClick should reload the page using window.location.reload(). The aria-label describes the button for screen readers, and the button text is "Reload".