Error Handling

🔍 What Is It?

React error handling covers two scenarios:

1. Render errors:

A component throws during rendering. Without an Error Boundary, the entire app unmounts with a white screen. An Error Boundary catches the error and renders a fallback UI instead.

2. Async errors:

An API call fails, a Promise rejects, or a setTimeout throws. These are not caught by Error Boundaries. You handle them with try/catch in async functions or .catch() on Promises.

Error Boundary:

A class component that implements componentDidCatch and getDerivedStateFromError. React 19 will add a use() hook that simplifies this.

🎯 Why Do We Need It?

Without error handling:

• →One failing component crashes the entire app (white screen)
• →API errors are silently swallowed or show raw error objects to users
• →Users have no way to recover from errors

With proper error handling:

• →Isolated failures — a broken widget does not crash the page
• →User-friendly error messages — "Something went wrong, please retry"
• →Recovery paths — retry buttons, fallback content
• →Error reporting — log errors to Sentry/Datadog for monitoring

🏗️ What Happens in Real Projects?

In an insurance portal:

• →Error Boundary around each dashboard widget — a broken chart does not crash the claims table
• →Error Boundary at the route level — a broken page shows a friendly error with a "go back" button
• →API error handling in each data-fetching hook — loading/error/data states
• →Global error toast for unexpected server errors
• →Sentry integration to capture and report errors in production

⚙️ How It Works

Error Boundary lifecycle:

1. A child component throws during render (or in a lifecycle method)
2. React looks up the tree for the nearest Error Boundary
3. Error Boundary's getDerivedStateFromError sets hasError: true
4. Error Boundary re-renders with the fallback UI
5. componentDidCatch receives the error for logging

What Error Boundaries do NOT catch:

• →Errors in event handlers (use try/catch inside the handler)
• →Errors in async code (useEffect, setTimeout, Promises)
• →Errors in the Error Boundary itself

💻 Example

Error Handling Patterns in Production — Error Boundary component and async error handling patterns.

import { Component, ErrorInfo } from 'react';

interface Props {
  children: React.ReactNode;
  fallback?: React.ReactNode;
  onError?: (error: Error, info: ErrorInfo) => void;
}

interface State { hasError: boolean; error: Error | null; }

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

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

  componentDidCatch(error: Error, info: ErrorInfo) {
    // Log to error monitoring service
    console.error('ErrorBoundary caught:', error, info);
    this.props.onError?.(error, info);
    // In production: Sentry.captureException(error, { extra: info });
  }

  handleReset = () => this.setState({ hasError: false, error: null });

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={this.handleReset}>Try again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Usage — wrap at different levels for different granularity
function Dashboard() {
  return (
    <ErrorBoundary fallback={<p>Dashboard failed to load</p>}>
      <ErrorBoundary fallback={<p>Chart unavailable</p>}>
        <ClaimsChart />
      </ErrorBoundary>
      <ErrorBoundary fallback={<p>Table unavailable</p>}>
        <ClaimsTable />
      </ErrorBoundary>
    </ErrorBoundary>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits