🚨 Error Boundaries

Error Boundaries catch errors in child components and display a fallback UI instead of crashing.

What Error Boundaries Catch

✅ Caught by Error Boundaries:

• Render errors

• Lifecycle method errors

• Constructor errors

❌ NOT Caught:

• Event handler errors (use try/catch)

• Async code errors

• Server-side rendering errors

Creating an Error Boundary

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

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

  componentDidCatch(error, errorInfo) {
    console.log("Error caught:", error);
    console.log("Error info:", errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong</h1>
          <p>{this.state.error?.message}</p>
        </div>
      );
    }

    return this.props.children;
  }
}

Using Error Boundaries

function App() {
  return (
    <ErrorBoundary>
      <Header />
      <MainContent />
      <Footer />
    </ErrorBoundary>
  );
}

function MainContent() {
  // If this throws, ErrorBoundary catches it
  throw new Error("Component failed!");
}

Multiple Error Boundaries

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Header />
      </ErrorBoundary>

      <ErrorBoundary>
        <UserProfile />
      </ErrorBoundary>

      <ErrorBoundary>
        <ChatWindow />
      </ErrorBoundary>
    </div>
  );
}

Error Boundary with Fallback Component

function FallbackUI({ error }) {
  return (
    <div style={{ padding: "20px", backgroundColor: "#ffebee" }}>
      <h2>Component Error</h2>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        Reload Page
      </button>
    </div>
  );
}

class ErrorBoundary extends React.Component {
  // ... error handling code ...

  render() {
    if (this.state.hasError) {
      return <FallbackUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

✅ Key Takeaways

• Error Boundaries catch **component render errors**

• Use class components with `getDerivedStateFromError`

• Create **multiple boundaries** for granular error handling

• Show **fallback UI** when errors occur

• Use **try/catch** for event handlers and async code