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.