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.