Client-side error boundaries in NextJS - Performance & Optimization

Performance: Client-side error boundaries

MEDIUM IMPACT

Client-side error boundaries affect interaction responsiveness and visual stability by catching runtime errors without crashing the whole app.

Handling runtime errors in React components to avoid app crashes

NextJS

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service here
  }

  render() {
    if (this.state.hasError) {
      return <div role="alert">Something went wrong.</div>;
    }

    return this.props.children;
  }
}

function MyComponent() {
  return (
    <ErrorBoundary>
      <ComponentThatMayThrow />
    </ErrorBoundary>
  );
}

Catches errors locally, preventing full app crash and allowing fallback UI, improving interaction responsiveness and visual stability.

📈 Performance GainPrevents blocking rendering on error, reducing INP and CLS by showing fallback UI instead of blank screen.

Handling runtime errors in React components to avoid app crashes

NextJS

function MyComponent() {
  // No error boundary
  const data = JSON.parse('invalid json');
  return <div>{data.name}</div>;
}

No error boundary means any runtime error crashes the entire React tree, causing a blank screen and poor user experience.

📉 Performance CostBlocks rendering completely on error, causing high INP and CLS due to sudden content disappearance.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error boundary (app crash)	Full tree unmount	Multiple reflows due to remount	High paint cost for blank screen and reload	[X] Bad
Error boundary with fallback UI	Partial DOM update	Single reflow for fallback render	Low paint cost with stable UI	[OK] Good

Rendering Pipeline

Error boundaries intercept errors during rendering or lifecycle methods, preventing the error from propagating and crashing the entire React tree. This allows React to render fallback UI instead of unmounting the whole app.

→JavaScript Execution

→Render

→Commit

⚠️ BottleneckJavaScript Execution when error occurs

Core Web Vital Affected

INP, CLS

Client-side error boundaries affect interaction responsiveness and visual stability by catching runtime errors without crashing the whole app.

Optimization Tips

1Always wrap error-prone components with error boundaries to prevent full app crashes.

2Use fallback UI in error boundaries to maintain visual stability and reduce layout shifts.

3Avoid heavy logic inside error boundaries to keep error handling fast and responsive.

Performance Quiz - 3 Questions

What is the main performance benefit of using client-side error boundaries in React?

A They reduce the initial bundle size significantly.

B They speed up the server-side rendering process.

C They prevent the entire app from crashing and improve interaction responsiveness.

D They eliminate all JavaScript errors automatically.

DevTools: Performance

How to check: Record a session where an error occurs in your app. Look for long tasks or dropped frames during error handling.

What to look for: Check if the app recovers gracefully with fallback UI instead of full reload or blank screen, indicating error boundaries work.