Why Error boundaries concept in React? - Purpose & Use Cases

The Big Idea

What if one tiny bug could crash your whole app--unless you catch it early?

The Scenario

Imagine building a React app where a small mistake in one component crashes the entire page, leaving users staring at a blank screen with no clue what went wrong.

The Problem

Without error boundaries, a single error bubbles up and breaks the whole app. This makes debugging hard and ruins user experience because the app stops working completely.

The Solution

Error boundaries catch errors in parts of the UI and show a fallback UI instead of crashing everything. This keeps the app running smoothly and helps developers find and fix bugs faster.

Before vs After

✗ Before

function App() {
  return <BuggyComponent />;
}
// If BuggyComponent throws, whole app crashes

✓ After

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
  render() {
    return this.state.hasError ? <FallbackUI /> : this.props.children;
  }
}

function App() {
  return <ErrorBoundary><BuggyComponent /></ErrorBoundary>;
}

What It Enables

It enables building resilient React apps that stay alive and user-friendly even when parts of the UI fail unexpectedly.

Real Life Example

Think of a social media feed where one broken post doesn't crash the entire feed, letting users keep scrolling and interacting with other posts.

Key Takeaways

Manual error handling can crash the whole React app.

Error boundaries catch errors and show fallback UI.

This improves user experience and helps debugging.