Global-error.tsx for root errors in NextJS - Mini Project: Build & Apply

Create a Global-error.tsx for Root Errors in Next.js

📖 Scenario: You are building a Next.js app that needs a friendly error page to show when something goes wrong at the root level. This helps users understand there was a problem without seeing confusing technical details.

🎯 Goal: Build a Global-error.tsx component that catches root errors and displays a simple message with a button to reload the page.

📋 What You'll Learn

Create a React functional component named GlobalError in Global-error.tsx.

Use the error and reset props to show error details and reset the error state.

Display a heading with the text Something went wrong!.

Show the error message inside a <pre> tag for readability.

Add a button labeled Try again that calls the reset function when clicked.

Use semantic HTML and accessible attributes like aria-label.

Style the component with simple inline styles for clarity.

💡 Why This Matters

🌍 Real World

Global error components help apps show friendly messages when something unexpected happens, improving user trust and experience.

💼 Career

Understanding error boundaries and global error handling is important for building robust React and Next.js applications in professional development.

1

Create the GlobalError component skeleton

Create a React functional component named GlobalError in Global-error.tsx that accepts error and reset as props. Return a <div> with a heading <h1>Something went wrong!</h1> inside.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  // Your code here
}

Hint

Start by defining the function with the correct props and return a div with the heading inside.

2

Display the error message inside a <pre> tag

Inside the GlobalError component, below the heading, add a <pre> tag that displays the error message using {error.message}.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {/* Add error message here */}
    
  )
}

Hint

Use a <pre> tag to show the error message exactly as it is.

3

Add a button to reset the error state

Below the error message, add a <button> with the text Try again. Set its onClick attribute to call the reset function. Add aria-label="Try again button" for accessibility.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {error.message}
      {/* Add reset button here */}
    
  )
}

Hint

Add a button that calls reset when clicked and includes an aria-label for screen readers.

4

Add simple inline styles for clarity

Add inline styles to the <div> to center the content with textAlign: 'center' and add padding padding: '2rem'. Also add style={{ marginTop: '1rem' }} to the <button> for spacing.

NextJS

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Something went wrong!
      {error.message}
      
        Try again
      
    
  )
}

Hint

Use inline style objects to add simple spacing and center alignment.

Practice

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

easy

A. To catch errors anywhere in the app and show a friendly error message

B. To define global CSS styles for the app

C. To handle user authentication and sessions

D. To configure API routes for the backend

Solution

1. Step 1: Understand the role of Global-error.tsx

   This file is designed to catch errors that happen anywhere in the Next.js app, acting as a global error boundary.

2. Step 2: Identify its main function

   It shows a user-friendly error message and allows users to retry or reset the error state.

3. Final Answer:

   To catch errors anywhere in the app and show a friendly error message -> Option A

4. Quick Check:

   Global-error.tsx handles app-wide errors = A [OK]

Hint: Global-error.tsx handles errors globally, not styles or auth [OK]

Common Mistakes:

• Confusing error handling with styling or routing
• Thinking it manages authentication
• Assuming it only catches errors in one component

2. Which of the following is the correct way to define the GlobalError component in Global-error.tsx using React functional components in Next.js?

easy

A. export default function GlobalError({ error, reset }) { return {error.message}; }

B. class GlobalError extends React.Component { render() { return Error; } } export default GlobalError;

C. const GlobalError = () => { return Error; }; export default GlobalError;

D. function GlobalError() { return Error; }

Solution

1. Step 1: Identify React functional component with props

   Next.js uses React functional components with props like { error, reset } for Global-error.tsx.

2. Step 2: Check correct export and props usage

   export default function GlobalError({ error, reset }) { return
   {error.message}; } correctly defines a function with props and exports it as default.

3. Final Answer:

   export default function GlobalError({ error, reset }) { return
   {error.message}
   ; } -> Option A

4. Quick Check:

   Functional component with props and default export = A [OK]

Hint: Use functional component with props and default export [OK]

Common Mistakes:

• Using class components instead of functional
• Missing props in function parameters
• Not exporting the component as default

3. Given this Global-error.tsx snippet, what will be rendered when an error with message "Network failure" occurs?

export default function GlobalError({ error, reset }) {
  return (
    

      
Oops!
      
{error.message}
      Try again
    
  );
}

medium

A. Oops!Network failure

B. Oops!Network failureTry again

C. Oops!Error occurredRetry

D. ErrorNetwork failure

Solution

1. Step 1: Analyze the JSX structure

   The component returns a <main role="alert"> with a heading, paragraph showing error.message, and a button with text "Try again".

2. Step 2: Substitute the error message

   The error message is "Network failure", so the paragraph will show that exact text.

3. Final Answer:

   <main role="alert"><h1>Oops!</h1><p>Network failure</p><button>Try again</button></main> -> Option B

4. Quick Check:

   Rendered output matches JSX with error.message = D [OK]

Hint: Match JSX tags and error.message exactly [OK]

Common Mistakes:

• Ignoring role attribute
• Changing button text
• Using wrong HTML tags or heading levels

4. Identify the error in this Global-error.tsx component code:

export default function GlobalError({ error, reset }) {
  return (
    

      
Error!
      
{error}
      Retry
    
  );
}

medium

A. The reset function is not called correctly

B. The button text should be 'Try again' instead of 'Retry'

C. The component should use <main> instead of <div>

D. The error prop is used directly instead of error.message

Solution

1. Step 1: Check usage of error prop

   The error prop is an object; displaying it directly will show [object Object], not the message.

2. Step 2: Correct way to show error message

   Use error.message to display the actual error text.

3. Final Answer:

   The error prop is used directly instead of error.message -> Option D

4. Quick Check:

   Display error.message, not error object = B [OK]

Hint: Always use error.message to show error text [OK]

Common Mistakes:

• Displaying error object directly
• Ignoring error.message property
• Assuming reset needs parentheses in JSX

5. You want to improve accessibility in your Global-error.tsx component. Which change best helps screen reader users understand the error state?

hard

A. Remove the button to avoid confusion

B. Use <div> instead of semantic tags like <main>

C. Add role="alert" to the main container to announce the error immediately

D. Use only color to indicate the error without text

Solution

1. Step 1: Understand accessibility roles

   The role="alert" attribute tells screen readers to announce the content immediately, which is important for error messages.

2. Step 2: Evaluate other options

   Using semantic tags is good, but role="alert" is more critical for error announcements. Removing buttons or relying on color alone harms accessibility.

3. Final Answer:

   Add role="alert" to the main container to announce the error immediately -> Option C

4. Quick Check:

   Use role="alert" for error announcements = C [OK]

Hint: Use role="alert" to notify screen readers instantly [OK]

Common Mistakes:

• Ignoring ARIA roles for error messages
• Relying on color alone for errors
• Removing interactive elements like retry buttons