Error recovery with reset in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the error boundary's reset function is called?

Consider a Next.js error boundary component that uses a reset function to clear the error state. What is the expected behavior after calling reset?

NextJS

import { useState } from 'react';

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  function reset() {
    setHasError(false);
  }

  if (hasError) {
    return <button onClick={reset}>Try again</button>;
  }

  return children;
}

A The component unmounts itself and does not show anything.

B The component throws the error again immediately after reset.

C The component remains in error state and does not re-render children.

D The component clears the error and re-renders its children normally.

💡 Hint

Think about what resetting error state means for rendering.

Calling reset clears the error state, so the component re-renders its children normally without error.

📝 Syntax

intermediate

Identify the syntax error in this Next.js error boundary reset handler

Which option correctly fixes the syntax error in this reset handler?

NextJS

function reset() {
  setHasError = false;
}

A Change to <code>setHasError(false);</code>

B Change to <code>setHasError == false;</code>

C Change to <code>setHasError(false) => {}</code>

D Change to <code>setHasError: false;</code>

💡 Hint

Remember how to call a state setter function in React.

State setters are functions and must be called with parentheses and the new value.

🔧 Debug

advanced

Why does the error boundary not reset after clicking the reset button?

Given this error boundary code, why does clicking the reset button not clear the error?

NextJS

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  function reset() {
    hasError = false;
  }

  if (hasError) {
    return <button onClick={reset}>Try again</button>;
  }

  return children;
}

A Because the reset function is not bound to the button's onClick event.

B Because directly assigning to hasError does not update React state.

C Because the component does not render the button when hasError is true.

D Because useState cannot be used inside error boundaries.

💡 Hint

Think about how React state updates work.

Directly assigning to the state variable does not trigger a re-render. The setter function must be used.

❓ state_output

advanced

What is the value of hasError after reset is called twice?

In this error boundary, what is the value of hasError after calling reset() two times in a row?

NextJS

const [hasError, setHasError] = useState(true);

function reset() {
  setHasError(false);
}

reset();
reset();

A undefined

B true

C false

D null

💡 Hint

Consider how React batches state updates.

Calling setHasError(false) twice keeps the state false after both calls.

🧠 Conceptual

expert

Why is resetting error state important in Next.js error boundaries?

Which reason best explains why implementing a reset function in Next.js error boundaries improves user experience?

A It allows users to recover from errors without reloading the entire page.

B It prevents errors from ever occurring in the application.

C It automatically fixes bugs in the code during runtime.

D It disables error logging to reduce console noise.

💡 Hint

Think about what users want when an error happens.

Resetting error state lets users try again without a full page reload, improving experience.

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