Error.tsx for route errors in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Error.tsx component render when a 404 error occurs?

Consider this Next.js Error.tsx component used for route errors. What will it display if the error status code is 404?

NextJS

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Error({ error }: { error: { statusCode: number } }) {
  const router = useRouter();

  useEffect(() => {
    if (error.statusCode === 404) {
      console.log('Page not found');
    }
  }, [error.statusCode]);

  return (
    <main role="alert" aria-live="assertive" style={{ padding: '2rem', textAlign: 'center' }}>
      {error.statusCode === 404 ? (
        <h1>Sorry, this page does not exist.</h1>
      ) : (
        <h1>Oops! Something went wrong.</h1>
      )}
    </main>
  );
}

A <h1>Sorry, this page does not exist.</h1>

B <h1>Oops! Something went wrong.</h1>

C <h1>Loading...</h1>

D <h1>Page is under construction.</h1>

💡 Hint

Look at the condition that checks error.statusCode inside the return statement.

The component checks if error.statusCode is 404. If yes, it renders the message "Sorry, this page does not exist." Otherwise, it shows a generic error message.

❓ lifecycle

intermediate

What is the purpose of the useEffect hook in this Error.tsx component?

Review the following snippet from an Error.tsx component. What does the useEffect hook do here?

NextJS

import { useEffect } from 'react';

export default function Error({ error }: { error: { statusCode: number } }) {
  useEffect(() => {
    if (error.statusCode === 404) {
      console.log('Page not found');
    }
  }, [error.statusCode]);

  return <div>Error occurred</div>;
}

A It fetches new data when the error status code changes.

B It logs 'Page not found' to the console only when the error status code is 404.

C It redirects the user to the homepage when a 404 error occurs.

D It prevents the component from rendering if the error is 404.

💡 Hint

Check what the console.log inside useEffect does and when it runs.

The useEffect runs after the component mounts or when error.statusCode changes. It logs a message only if the status code is 404.

📝 Syntax

advanced

Which option will cause a syntax error in this Error.tsx component?

Identify which option contains a syntax error that would prevent this Next.js error component from compiling.

NextJS

export default function Error({ error }: { error: { statusCode: number } }) {
  return (
    <main>
      {error.statusCode === 404 ? (
        <h1>Page not found</h1>
      ) : (
        <h1>Unexpected error</h1>
      )}
    </main>
  );
}

A Replace <main> with <div> and close it properly.

B Add a semicolon after the return statement.

C Use a fragment <> without closing it properly.

D Remove the parentheses around the JSX returned by the function.

💡 Hint

Look for missing closing tags in JSX syntax.

Using an opening fragment tag <> without a closing </> causes a syntax error in JSX.

❓ state_output

advanced

What will be the rendered output if error.statusCode is 500?

Given this Error.tsx component, what will it display when the error status code is 500?

NextJS

export default function Error({ error }: { error: { statusCode: number } }) {
  return (
    <main role="alert" aria-live="assertive">
      {error.statusCode === 404 ? (
        <h1>Page not found</h1>
      ) : error.statusCode === 401 ? (
        <h1>Unauthorized access</h1>
      ) : (
        <h1>Unexpected error occurred</h1>
      )}
    </main>
  );
}

A <h1>Error code 500</h1>

B <h1>Unauthorized access</h1>

C <h1>Page not found</h1>

D <h1>Unexpected error occurred</h1>

💡 Hint

Check the conditional rendering for status codes other than 404 and 401.

The component renders "Unexpected error occurred" for any status code not 404 or 401, including 500.

🔧 Debug

expert

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

Examine this Error.tsx component. It should show the error status code but instead shows nothing. What is the cause?

NextJS

export default function Error({ error }: { error: { statusCode: number } }) {
  return (
    <main>
      <h1>Error code: {error.statusCode}</h1>
    </main>
  );
}

// Usage example:
// <Error error={404} />

A The error prop is passed as a number, but the component expects an object with statusCode property.

B The JSX syntax for embedding variables is incorrect.

C The component is missing a return statement.

D The component should use useState to store the error code.

💡 Hint

Check how the error prop is passed versus how it is used inside the component.

The component expects error to be an object with a statusCode property, but the usage passes a number directly, causing error.statusCode to be undefined.

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