Error recovery with reset in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the error boundary component from React.

NextJS

import { [1] } from 'react';

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

AErrorBoundary

BuseEffect

CErrorBoundaryReset

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks like useState instead of ErrorBoundary.

Using a non-existent component like ErrorBoundaryReset.

The ErrorBoundary component is imported from React to catch errors in child components.

2fill in blank

medium

Complete the code to reset the error boundary state using the reset function.

NextJS

function handleReset() {
  [1]();
}

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

Areset

BsetError

CclearError

Drecover

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a function named setError which sets error state instead of resetting.

Using clearError or recover which are not standard functions.

The reset function is called to clear the error state and retry rendering.

3fill in blank

hard

Fix the error in the error boundary usage by completing the prop name for reset handler.

NextJS

<ErrorBoundary [1]={handleReset}>
  <ChildComponent />
</ErrorBoundary>

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

Areset

BresetHandler

ConErrorReset

DonReset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reset' or 'resetHandler' which are not recognized props.

Using 'onErrorReset' which is not a valid prop.

The correct prop to handle reset in ErrorBoundary is onReset.

4fill in blank

hard

Fill both blanks to correctly use the error boundary with reset and fallback UI.

NextJS

return (
  <ErrorBoundary
    fallback=[1]
    [2]={handleReset}
  >
    <Component />
  </ErrorBoundary>
);

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

A<FallbackComponent />

BonReset

Creset

D<ErrorFallback />

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reset' instead of 'onReset' for the reset handler.

Passing a variable name instead of a React element for fallback.

The fallback prop takes a React element like <ErrorFallback />, and onReset handles the reset event.

5fill in blank

hard

Fill all three blanks to implement error recovery with reset in Next.js.

NextJS

import { ErrorBoundary } from 'react';

function App() {
  function handleReset() {
    [1]();
  }

  return (
    <ErrorBoundary
      fallback=[2]
      [3]={handleReset}
    >
      <MainComponent />
    </ErrorBoundary>
  );
}

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

Areset

B<ErrorFallback />

ConReset

DclearError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clearError' which is not a standard function.

Using 'reset' as a prop name instead of 'onReset'.

Passing a component name without JSX syntax for fallback.

Use reset() to clear errors, pass a fallback UI component like <ErrorFallback />, and handle reset with onReset.