Why Handling runtime errors in React? - Purpose & Use Cases

The Big Idea

What if your app never crashes on users, no matter what goes wrong?

The Scenario

Imagine your React app crashes completely when a small mistake happens, like a missing value or a broken API call, leaving users staring at a blank screen.

The Problem

Manually checking every possible error everywhere is exhausting and easy to forget. Without proper error handling, your app becomes unreliable and frustrating for users.

The Solution

React's error boundaries catch runtime errors in components and let you show a friendly message instead of a crash, keeping your app stable and user-friendly.

Before vs After

✗ Before

componentDidCatch(error) { console.log(error); } // but UI still breaks

✓ After

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    return this.state.hasError
      ? <h1>Something went wrong.</h1>
      : this.props.children;
  }
}

// Usage: <ErrorBoundary>{children}</ErrorBoundary>

What It Enables

You can build resilient apps that gracefully handle mistakes and keep users happy even when things go wrong.

Real Life Example

When a user uploads a bad file or a network request fails, your app shows a helpful message instead of crashing, guiding users to fix the problem.

Key Takeaways

Runtime errors can crash your app unexpectedly.

Manual error checks are hard and incomplete.

React error boundaries catch errors and show fallback UI.