Global-error.tsx for root errors in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React library correctly.

NextJS

import [1] from 'react';

Drag options to blanks, or click blank then click option'

Areact

B{ React }

CReact

D* as React

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces around React in import statement.

Using lowercase 'react' as import name.

In Next.js and React, you import the default React export as React to use JSX and React features.

2fill in blank

medium

Complete the code to define the error component as a React functional component.

NextJS

export default function GlobalError({ error }: { error: Error }) {
  return (
    <div role="alert">
      <h1>[1]</h1>
      <p>{error.message}</p>
    </div>
  );
}

Drag options to blanks, or click blank then click option'

A'An error occurred'

BAn error occurred

C<strong>An error occurred</strong>

D"An error occurred"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the string unquoted causing syntax errors.

Using HTML tags inside JSX text without curly braces.

The heading text must be a string inside quotes in JSX. Double quotes are standard for JSX strings.

3fill in blank

hard

Fix the error in the code to correctly display the error stack trace inside a <pre> tag.

NextJS

<pre>[1]</pre>

Drag options to blanks, or click blank then click option'

A{error.stack}

Berror.stack

C"error.stack"

D{error.message}

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable without curly braces causing it to render as text.

Using quotes around the variable name.

To display JavaScript variables inside JSX, wrap them in curly braces. error.stack shows the stack trace.

4fill in blank

hard

Fill both blanks to add a button that reloads the page when clicked.

NextJS

<button onClick=[1]>[2]</button>

Drag options to blanks, or click blank then click option'

A() => location.reload()

Blocation.reload()

C"Reload page"

DReload

Attempts:

3 left

💡 Hint

Common Mistakes

Calling location.reload() directly instead of wrapping in a function.

Putting quotes around button text in JSX.

The onClick handler needs a function, so use an arrow function. The button text is a string without quotes in JSX.

5fill in blank

hard

Fill all three blanks to create a complete GlobalError component with error message, stack, and reload button.

NextJS

export default function GlobalError({ error }: { error: Error }) {
  return (
    <main role="alert" aria-live="assertive">
      <h1>[1]</h1>
      <p>{error.message}</p>
      <pre>[2]</pre>
      <button onClick=[3]>Reload</button>
    </main>
  );
}

Drag options to blanks, or click blank then click option'

A"Something went wrong"

B{error.stack}

C() => location.reload()

D"Reload"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the heading string.

Not using curly braces for error.stack.

Calling location.reload() directly instead of a function.

The heading is a string in quotes, the stack trace is embedded with curly braces, and the reload button uses an arrow function for onClick.

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