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.