Error handling with error.tsx in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will the error.tsx component render when an error occurs?

Consider a Next.js app with an error.tsx file exporting a default error component. What will the user see if a runtime error happens in a page?

NextJS

export default function Error() {
  return <h1>Something went wrong!</h1>;
}

A The page shows the default Next.js error overlay with stack trace

B The page shows a blank screen with no content

C The page reloads automatically without showing any message

D The page shows a heading: 'Something went wrong!'

💡 Hint

The error.tsx component is used to display UI when an error happens in the app.

The error.tsx file exports a React component that Next.js renders when an error occurs. It replaces the default error overlay with the custom UI you provide.

📝 Syntax

intermediate

Which option correctly defines an error.tsx component that accepts an error prop?

You want to show the error message inside your error.tsx component. Which code is correct?

A

export default function Error({ error }: { error: Error }) {
  return <p>{error.message}</p>;
}

B

export default function Error(error) {
  return <p>{error.message}</p>;
}

C

export default function Error(props: Error) {
  return <p>{props.message}</p>;
}

D

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

💡 Hint

Remember to type the props object correctly in TypeScript.

Option A correctly destructures the error prop and types it as an Error object. This allows accessing error.message safely.

❓ state_output

advanced

What happens if you throw an error inside a server component in Next.js 14 with error.tsx present?

Given a server component that throws an error during rendering, and an error.tsx file exists, what will the user see?

NextJS

export default function ServerComponent() {
  throw new Error('Failed to load data');
}

A The error is logged but the page renders normally without error UI

B The error.tsx component UI is rendered showing the error message

C The app crashes and shows a blank page with no UI

D Next.js shows a full error overlay with stack trace in production

💡 Hint

Next.js uses error.tsx to catch errors in server components and show fallback UI.

When a server component throws an error, Next.js renders the error.tsx component to show a user-friendly error UI instead of crashing.

🔧 Debug

advanced

Why does this error.tsx component fail to display the error message?

Look at this error.tsx code. Why does it not show the error message when an error occurs?

NextJS

export default function Error() {
  return <p>{error.message}</p>;
}

A The error object is not passed as a prop or defined, so error is undefined

B The component must be a class component to access error

C The error.message is not a valid property and causes a runtime error

D The component should return a fragment <> instead of a <p> tag

💡 Hint

Check if the error variable is defined or passed in the component.

The component tries to access error.message but error is not defined or passed as a prop, causing a ReferenceError.

🧠 Conceptual

expert

How does Next.js decide when to render error.tsx versus not showing it?

In Next.js 14, under what conditions will the error.tsx component be rendered automatically?

A Only when the developer manually imports and renders error.tsx

B Only when a client component throws an error during user interaction

C When a rendering error occurs in a server or client component inside the app directory

D When a page is not found (404 error) but not for runtime errors

💡 Hint

Think about automatic error boundaries in Next.js app router.

Next.js automatically renders error.tsx when any rendering error happens in the app directory components, both server and client side.