Error recovery with reset in NextJS - Step-by-Step Execution

Concept Flow - Error recovery with reset

Component Renders

↓

Error Occurs?

No→Normal UI

Yes↓

Show Error Boundary UI

↓

User Clicks Reset

↓

Reset Error State

↓

Re-render Component

↩Back to Component Renders

The component renders normally until an error occurs. Then the error UI shows. When the user resets, the error state clears and the component tries rendering again.

Execution Sample

NextJS

import { useState } from 'react';

function BuggyCounter() {
  const [count, setCount] = useState(0);
  if (count === 3) throw new Error('Crashed!');
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

export default function ErrorBoundary() {
  const [error, setError] = useState(null);
  if (error) return <button onClick={() => setError(null)}>Reset</button>;
  try {
    return <BuggyCounter />;
  } catch (e) {
    setError(e);
    return null;
  }
}

A counter button that crashes at 3 clicks. The error boundary shows a reset button to recover.

Execution Table

Step	Action	State Before	State After	UI Rendered	Notes
1	Render BuggyCounter	error=null, count=0	error=null, count=0	Button shows '0'	Initial render, no error
2	Click button	count=0	count=1	Button shows '1'	Increment count
3	Click button	count=1	count=2	Button shows '2'	Increment count
4	Click button	count=2	count=3	Error thrown	Count reached 3 triggers error
5	Catch error in ErrorBoundary	error=null	error=Error('Crashed!')	Button shows 'Reset'	Error caught, show reset UI
6	Click Reset button	error=Error('Crashed!')	error=null, count=3	Button shows '3'	Reset error state, re-render BuggyCounter
7	Click button	count=3	count=4	Button shows '4'	Count increments normally after reset
8	Click button	count=4	count=5	Button shows '5'	Normal operation continues
9	No error, normal operation	count=5	count=5	Button shows '5'	No error, UI stable

💡 Execution stops as no error occurs and UI renders normally after reset.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	After Step 8	Final
count	0	1	2	3 (error thrown)	3	3	4	5	5
error	null	null	null	null	Error('Crashed!')	null	null	null	null

Key Moments - 3 Insights

Why does the UI switch to the reset button after the error?

Because the error state changes from null to an Error object at step 5, the component renders the reset button instead of the buggy counter (see execution_table row 5).

Why does clicking reset show the counter at 3 instead of starting over at 0?

Reset clears the error state but does not reset the count variable, so the counter resumes at 3 (execution_table row 6). The count state is preserved across error recovery.

Why does the error throw only at count 3 and not before?

The BuggyCounter throws an error only when count equals 3 (see code in execution_sample). Before that, it renders normally (execution_table rows 1-3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'error' after step 4?

A null

B Error('Crashed!')

C undefined

D false

💡 Hint

Check the 'State After' column for step 4 in the execution_table.

At which step does the UI first show the reset button?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look at the 'UI Rendered' column in the execution_table for when 'Reset' appears.

If the reset button did not clear the error state, what would happen at step 6?

A The app would crash

B The buggy counter would render normally

C The reset button would remain visible

D The count would reset to 0

💡 Hint

Refer to the 'State After' and 'UI Rendered' columns around step 6 in the execution_table.

Concept Snapshot

Error recovery with reset in Next.js:
- Wrap components with error boundary logic.
- Catch errors during render and show fallback UI.
- Provide a reset button to clear error state.
- Reset triggers re-render to try normal UI again.
- State outside error boundary persists unless reset explicitly.

Full Transcript

This visual trace shows how error recovery with reset works in Next.js. Initially, the BuggyCounter component renders normally with count starting at 0. Each button click increments count. When count reaches 3, the component throws an error. The error boundary catches this error and switches the UI to show a reset button. Clicking reset clears the error state and re-renders the buggy counter at the same count value (3). Further clicks increment count normally. The variable tracker shows how 'count' and 'error' change over time. Key moments clarify why the reset button appears and why count does not reset automatically. The quiz tests understanding of error state changes and UI transitions. This pattern helps apps recover gracefully from errors by letting users reset and continue.

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