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.