Global-error.tsx for root errors in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a Global-error.tsx file in a Next.js app?

It handles root-level errors by showing a friendly error message when something goes wrong anywhere in the app, preventing the app from crashing silently.

intermediate

Which React hook is commonly used inside Global-error.tsx to reset error state?

The useEffect hook is often used to reset or clear error state when the component mounts or when certain conditions change.

intermediate

What props does the Global-error.tsx component receive in Next.js 13+ app router?

It receives an error object and a reset function as props. error contains the error details, and reset lets you clear the error to try rendering again.

beginner

Why should Global-error.tsx include a button to reset the error?

Because it lets users try to reload or recover from the error without refreshing the whole page, improving user experience.

intermediate

Show a simple example of a Global-error.tsx component in Next.js that displays the error message and a reset button.

'use client';
import React from 'react';

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div role="alert" style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>Something went wrong!</h2>
      <pre>{error.message}</pre>
      <button onClick={() => reset()} aria-label="Try again">Try again</button>
    </div>
  );
}

What does the reset function do in Global-error.tsx?

A Reloads the entire browser window

B Navigates to the home page

C Logs the error to the console

D Clears the error state to retry rendering

The reset function clears the error state so the app can try rendering again without a full page reload.

Where should you place Global-error.tsx in a Next.js 13 app router project?

A In the <code>components</code> folder

B Inside the <code>app</code> folder at the root level

C Inside the <code>pages</code> folder

D In the <code>public</code> folder

In Next.js 13 app router, Global-error.tsx should be placed inside the app folder at the root to catch all errors.

Which of these is a good accessibility practice for the error message in Global-error.tsx?

A Use <code>role="alert"</code> on the error container

B Use only images to show errors

C Hide the error message from screen readers

D Use blinking text for errors

Using role="alert" helps screen readers announce the error message immediately.

What React directive is required at the top of Global-error.tsx to use client-side hooks?

A "use client"

B "use server"

C "use strict"

D "use error"

The directive "use client" enables client-side React features like hooks inside the component.

What is the main benefit of having a global error component in Next.js?

A It speeds up page loading

B It improves SEO rankings

C It prevents the app from crashing silently and shows a user-friendly message

D It automatically fixes bugs

A global error component catches errors and shows a friendly message instead of a blank or broken page.

Explain how Global-error.tsx works in Next.js app router and why it is important.

Think about how the app handles unexpected problems and lets users try again.

Describe the accessibility features you should include in a global error component.

Consider how screen readers and keyboard users will interact with the error message.