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.