Error handling with error.tsx in NextJS - Performance & Optimization

Performance: Error handling with error.tsx

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how errors are caught and displayed without full page reloads.

Handling runtime errors in a Next.js app to avoid full page reloads

NextJS

export default function Error({ error, reset }) {
  return (
    <div role="alert">
      <p>Something went wrong: {error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

// error.tsx catches errors and allows recovery without reload

Error boundary catches errors and renders fallback UI instantly, avoiding full reload and layout shifts.

📈 Performance GainImproves INP by enabling quick recovery, reduces CLS by stable error UI, avoids blocking rendering

Handling runtime errors in a Next.js app to avoid full page reloads

NextJS

export default function Page() {
  if (someError) {
    throw new Error('Oops!');
  }
  return <div>Content</div>;
}

// No error boundary or error.tsx used

Without error.tsx, errors cause full page reloads or unstyled error screens, blocking interaction and causing layout shifts.

📉 Performance CostBlocks rendering until reload, causes CLS due to layout shifts, increases INP by delaying error recovery

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error.tsx, error causes full reload	High (full page reload creates many DOM nodes)	Multiple (full re-layout triggered)	High (browser repaints entire page)	[X] Bad
Using error.tsx with fallback UI	Low (only error UI nodes rendered)	Single (only error UI layout)	Low (small repaint area)	[OK] Good

Rendering Pipeline

When an error occurs, error.tsx intercepts it before the browser triggers a full reload. The fallback UI is rendered during the Paint stage, avoiding re-layout of the entire page.

→JavaScript Execution

→Style Calculation

→Paint

→Composite

⚠️ BottleneckJavaScript Execution due to error handling logic

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how errors are caught and displayed without full page reloads.

Optimization Tips

1Use error.tsx to catch errors and show fallback UI without full page reloads.

2Keep error UI simple to minimize JavaScript execution and paint time.

3Avoid heavy layout changes in error UI to reduce layout shifts (CLS).

Performance Quiz - 3 Questions

What is the main performance benefit of using error.tsx in Next.js?

A It eliminates all JavaScript execution during errors.

B It reduces the initial page load size by lazy loading error components.

C It prevents full page reloads on errors, improving interaction responsiveness.

D It automatically caches error pages for faster reloads.

DevTools: Performance

How to check: Record a session where an error occurs. Look for long tasks or full page reloads in the flame chart.

What to look for: Check if error handling triggers full reload (bad) or quick fallback UI paint (good). Also watch for layout shifts in the Experience section.