Error boundaries

JavaScript errors during render can unmount the entire tree. An error boundary is a class component (or future API) that catches errors in child render/lifecycle methods and shows fallback UI instead of a blank screen.

What boundaries catch

• Errors in child render
• Errors in lifecycle methods of descendants

What they do NOT catch

• Event handler errors (wrap try/catch inside handlers)
• Async errors unless rethrown into render
• Errors in the boundary itself

Pattern

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

In production apps, log errors to monitoring (Sentry, etc.) inside componentDidCatch. This playground focuses on the concept—most function components rely on route-level boundaries higher in the tree.

Self-check

1. Where should you handle fetch failures vs render throws?
2. Why are error boundaries still class-based in React 18?

Tip: Wrap route-level sections, not every button—granular boundaries isolate failures without hiding all UI.