Error Boundary

ELI5 — The Vibe Check

Error Boundaries are like safety nets in a circus. If a component throws up (errors, that is), the Error Boundary catches it and shows a 'something went wrong' message instead of nuking your entire app. Because one broken widget shouldn't crash the whole page.

Real Talk

Error Boundaries are React class components that catch JavaScript errors in their child component tree during rendering, lifecycle methods, and constructors. They prevent the entire app from unmounting by displaying a fallback UI and optionally logging the error.

Show Me The Code

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    return this.state.hasError ? <h1>Something broke</h1> : this.props.children;
  }
}

When You'll Hear This

"Wrap every route in an Error Boundary so one page can't kill the app" / "Error Boundaries only catch render errors, not event handler errors"