0
0
NextJSframework~20 mins

Global-error.tsx for root errors in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Next.js Global Error Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What does this Global-error.tsx component render when an error occurs?

Consider this Next.js Global-error.tsx component used for root error handling. What will it display when an error is caught?

NextJS
import React from 'react';

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <html lang="en">
      <head>
        <title>Error</title>
      </head>
      <body>
        <main role="alert" aria-live="assertive" style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}>
          <h1>Something went wrong!</h1>
          <p>{error.message}</p>
          <button onClick={reset} aria-label="Try again">Try again</button>
        </main>
      </body>
    </html>
  );
}
AA page that reloads automatically without showing any message.
BA blank page with no content because the error is not handled properly.
CA page that shows only the error stack trace without any heading or button.
DA page with a heading 'Something went wrong!', the error message, and a 'Try again' button that calls reset.
Attempts:
2 left
💡 Hint

Look for the JSX elements inside the return statement and what props are used.

📝 Syntax
intermediate
2:00remaining
Which option correctly types the props for GlobalError in TypeScript?

Given the GlobalError component, which option correctly types the props error and reset in TypeScript?

NextJS
export default function GlobalError(props) {
  const { error, reset } = props;
  // component body
}
A(props: { error: string; reset: () => void })
B({ error: string; reset: Function })
C({ error, reset }: { error: Error; reset: () => void })
D(error: Error, reset: () => void)
Attempts:
2 left
💡 Hint

Remember the correct way to type destructured props in a function parameter.

❓ state_output
advanced
2:00remaining
What happens when the 'Try again' button is clicked in Global-error.tsx?

In the GlobalError component, what is the effect of clicking the 'Try again' button?

NextJS
export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <button onClick={reset} aria-label="Try again">Try again</button>
  );
}
AIt calls the reset function to retry rendering the root component and clear the error state.
BIt reloads the entire page in the browser.
CIt logs the error to the console but does not change the UI.
DIt closes the error message without retrying.
Attempts:
2 left
💡 Hint

Think about what the reset callback is meant to do in error boundaries.

🔧 Debug
advanced
2:00remaining
Why does this Global-error.tsx cause a hydration mismatch in Next.js?

Examine this code snippet. Why might it cause a hydration mismatch error in Next.js?

NextJS
export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  if (!error) {
    return <p>No error found</p>;
  }
  return (
    <html lang="en">
      <head><title>Error</title></head>
      <body>
        <h1>Error occurred</h1>
        <button onClick={reset}>Try again</button>
      </body>
    </html>
  );
}
ABecause the component conditionally returns different root HTML elements causing mismatch between server and client.
BBecause the <html> element is missing the lang attribute.
CBecause the error prop is not typed correctly causing runtime errors.
DBecause the reset function is not called properly on button click.
Attempts:
2 left
💡 Hint

Consider how Next.js expects consistent root elements for hydration.

🧠 Conceptual
expert
2:00remaining
What is the role of Global-error.tsx in Next.js App Router error handling?

In Next.js App Router, what is the primary purpose of the Global-error.tsx file placed at the root of the app directory?

AIt defines global CSS styles for error pages only.
BIt acts as the root error boundary to catch and display errors that happen anywhere in the app tree.
CIt automatically logs errors to an external monitoring service.
DIt replaces the default 404 page with a custom error message.
Attempts:
2 left
💡 Hint

Think about how Next.js handles errors in the new App Router structure.