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.

Practice

1. What is the main purpose of error recovery with reset in a Next.js app?

easy

A. To automatically fix bugs in the code

B. To allow users to recover from errors without reloading the whole page

C. To prevent any errors from ever happening in the app

D. To disable user interactions after an error occurs

Solution

1. Step 1: Understand error recovery purpose

   Error recovery with reset is designed to keep the app running smoothly by letting users try again after an error.

2. Step 2: Compare options

   Only To allow users to recover from errors without reloading the whole page describes allowing users to recover without a full page reload, which matches the concept.

3. Final Answer:

   To allow users to recover from errors without reloading the whole page -> Option B

4. Quick Check:

   Error recovery = user retry without reload [OK]

Hint: Error recovery means retry without full page reload [OK]

Common Mistakes:

• Thinking error recovery prevents all errors
• Confusing error recovery with automatic bug fixing
• Assuming error recovery disables user actions

2. Which of the following is the correct way to reset error state using React's useState in a Next.js error boundary?

easy

A. const [error, setError] = useState(null); setError(null);

B. const [error, setError] = useState(null); setError(false);

C. const [error, setError] = useState(false); setError(undefined);

D. const [error, setError] = useState(true); setError(0);

Solution

1. Step 1: Identify initial error state

   Typically, error state is initialized as null to indicate no error.

2. Step 2: Reset error state correctly

   Resetting error state to null clears the error, allowing retry. const [error, setError] = useState(null); setError(null); does this correctly.

3. Final Answer:

   const [error, setError] = useState(null); setError(null); -> Option A

4. Quick Check:

   Reset error state = setError(null) [OK]

Hint: Reset error state by setting it back to null [OK]

Common Mistakes:

• Using false or 0 instead of null to reset error
• Initializing error state with true or false incorrectly
• Confusing undefined with null for reset

3. Given this simplified error boundary code snippet in Next.js, what will be the output after clicking the reset button?

function ErrorBoundary() {
  const [error, setError] = React.useState(null);
  if (error) {
    return (
      <div>
        <p>Error occurred</p>
        <button onClick={() => setError(null)}>Reset</button>
      </div>
    );
  }
  return <p>App is running</p>;
}

medium

A. Displays 'App is running' after clicking reset button

B. Nothing changes after clicking reset button

C. Throws an error because setError is called incorrectly

D. Displays 'Error occurred' and reset button permanently

Solution

1. Step 1: Understand initial state and rendering

   Initially, error is null, so component shows 'App is running'. If error is set, it shows error message and reset button.

2. Step 2: Effect of clicking reset button

   Clicking reset calls setError(null), clearing error state, so component re-renders showing 'App is running'.

3. Final Answer:

   Displays 'App is running' after clicking reset button -> Option A

4. Quick Check:

   Reset button clears error, shows normal app [OK]

Hint: Reset button sets error to null, restoring normal view [OK]

Common Mistakes:

• Thinking reset button does not change output
• Assuming setError call causes error
• Believing error message stays after reset

4. Identify the error in this Next.js error boundary snippet and how to fix it:

function ErrorBoundary() {
  const [error, setError] = React.useState(null);
  try {
    if (error) throw new Error('Error!');
    return <p>App running</p>;
  } catch {
    return <button onClick={() => setError(false)}>Reset</button>;
  }
}

medium

A. Error should not be thrown manually in React components

B. try/catch cannot be used inside a React component

C. setError(false) should be setError(null) to reset error state

D. useState must be called outside the component

Solution

1. Step 1: Analyze error state reset

   Resetting error state with false does not match initial null state, causing logic issues.

2. Step 2: Correct reset value

   Reset should use setError(null) to clear error properly and allow retry.

3. Final Answer:

   setError(false) should be setError(null) to reset error state -> Option C

4. Quick Check:

   Reset error state must match initial null [OK]

Hint: Reset error state with null, not false [OK]

Common Mistakes:

• Using false instead of null to reset error
• Thinking try/catch is invalid in components
• Believing throwing error manually is always wrong

5. You want to build a Next.js error boundary that resets error state only when a user clicks a reset button, but also logs the error before reset. Which approach correctly combines error recovery with reset and logging?

hard

A. Use useEffect to catch errors and reset automatically without user action

B. Set error state to false on reset and log error inside render method

C. Throw errors inside the reset button click handler to trigger recovery

D. Use useState for error, catch error in try/catch, log error, then set error to null on reset button click

Solution

1. Step 1: Combine error state and logging

   Use useState to track error, catch errors with try/catch, and log them before resetting.

2. Step 2: Reset error on user action

   Reset error state to null only when user clicks reset button, ensuring controlled recovery.

3. Final Answer:

   Use useState for error, catch error in try/catch, log error, then set error to null on reset button click -> Option D

4. Quick Check:

   Error recovery with logging needs try/catch + user reset [OK]

Hint: Log error in catch, reset error on button click [OK]

Common Mistakes:

• Resetting error automatically without user control
• Throwing errors inside event handlers incorrectly
• Logging errors inside render causing repeated logs