Error recovery with reset in NextJS - Performance & Optimization

Performance: Error recovery with reset

MEDIUM IMPACT

This concept affects user interaction responsiveness and visual stability during error recovery in Next.js applications.

Handling errors in a Next.js app and allowing users to recover by resetting the error state

NextJS

import { useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function ResettableErrorBoundary({ children }) {
  const [resetKey, setResetKey] = useState(0);
  return (
    <ErrorBoundary
      fallbackRender={({ resetErrorBoundary }) => (
        <div>
          <p>Something went wrong.</p>
          <button onClick={() => {
            resetErrorBoundary();
            setResetKey(k => k + 1);
          }} aria-label="Reset error boundary">
            Try again
          </button>
        </div>
      )}
      onReset={() => setResetKey(k => k + 1)}
      resetKeys={[resetKey]}
    >
      {children}
    </ErrorBoundary>
  );
}

This pattern resets only the error boundary state without full reload, preserving app state and improving responsiveness.

📈 Performance GainSingle re-render of error boundary subtree; avoids full page reload; improves INP and reduces CLS.

Handling errors in a Next.js app and allowing users to recover by resetting the error state

NextJS

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = React.useState(false);
  React.useEffect(() => {
    window.addEventListener('error', () => setHasError(true));
  }, []);
  if (hasError) {
    return <div>Error occurred. Please reload the page.</div>;
  }
  return children;
}

This pattern forces a full page reload for recovery, blocking user interaction and causing layout shifts.

📉 Performance CostBlocks rendering for user action; triggers full page reload increasing LCP and INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload on error	High (whole DOM reload)	Multiple reflows	High paint cost	[X] Bad
Error boundary reset with resetKeys	Low (subtree only)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When an error occurs, the error boundary catches it and renders a fallback UI. Resetting triggers React to re-render only the affected subtree, avoiding full page reload and layout shifts.

→JavaScript Execution

→React Reconciliation

→Layout

→Paint

⚠️ BottleneckLayout and Paint caused by full page reload or large subtree re-render

Core Web Vital Affected

INP

This concept affects user interaction responsiveness and visual stability during error recovery in Next.js applications.

Optimization Tips

1Avoid full page reloads for error recovery; reset error boundaries instead.

2Use resetKeys to control when error boundaries reset and re-render.

3Keep fallback UI minimal to reduce layout shifts and repaint cost.

Performance Quiz - 3 Questions

What is the main performance benefit of resetting an error boundary instead of reloading the whole page?

A It reduces the JavaScript bundle size.

B It eliminates all layout shifts on the page.

C It limits re-rendering to the error subtree, improving interaction responsiveness.

D It caches the error state for faster reloads.

DevTools: Performance

How to check: Record a session triggering an error and recovery. Compare time spent in scripting, rendering, and painting between full reload and error boundary reset.

What to look for: Look for shorter scripting and rendering times and fewer layout shifts during error recovery with reset.

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