What Are Error Boundaries in React?

Error boundaries are special React components that catch JavaScript errors anywhere in their child component tree and render a fallback UI instead of crashing the whole app.

They improve reliability by isolating failures to specific parts of the UI.

Large applications such as multi-feature web platforms use error boundaries to prevent a single broken component from taking down the entire experience.

Why Error Boundaries Are Important

• Prevent white-screen-of-death (WSOD)
• Improve user experience
• Enable graceful error recovery
• Allow logging and monitoring

What Errors Do Error Boundaries Catch?

• Errors during rendering
• Errors in lifecycle methods
• Errors in constructors of child components

What They Do NOT Catch

• Event handler errors
• Asynchronous errors (setTimeout, promises)
• Errors inside the error boundary itself

How Error Boundaries Work Internally

Error boundaries rely on two lifecycle methods:

• static getDerivedStateFromError()
• componentDidCatch()

When an error occurs, React stops rendering the broken subtree and renders the fallback UI.

How to Create an Error Boundary

⚠️ Error boundaries must be implemented using class components. Hooks do not support error boundaries directly.

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) {
    console.error("Error caught:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

How to Use an Error Boundary

<ErrorBoundary>
  <UserProfile />
</ErrorBoundary>

Only the wrapped component tree is affected when an error occurs.

Granular vs Global Error Boundaries

Global Error Boundary

<ErrorBoundary>
  <App />
</ErrorBoundary>

Catches errors across the entire application.

Feature-Level Error Boundary

<ErrorBoundary>
  <Dashboard />
</ErrorBoundary>

This approach is preferred for complex flows such as step-based user journeys.

Error Boundaries with Lazy Loading & Suspense

<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

This pattern handles both loading failures and runtime errors.

Real-World Example Scenario

Imagine a dashboard with:

• User analytics
• Reports section
• Third-party charts

If a chart library crashes:

• Only the chart section fails
• The rest of the dashboard remains usable

This isolation strategy is frequently recommended in frontend stability guides.

Common Mistakes

• Using error boundaries to catch event errors
• Wrapping the entire app only
• Not logging errors
• Showing poor fallback UI

Best Practices & Special Notes

• Place error boundaries around risky components
• Use meaningful fallback UIs
• Log errors to monitoring tools
• Combine with Suspense for async loading

Testing error-handling scenarios using scenario-based assessments helps developers understand failure recovery patterns.

Final Takeaway

Error boundaries are essential for building resilient React applications. They prevent crashes, isolate failures, and provide a controlled recovery experience. When used correctly, error boundaries significantly improve stability, maintainability, and production readiness of React apps.