36. Error boundaries and crash reporting

An `Error Boundary` class component catches JS errors thrown during rendering in its child tree and can show a fallback UI instead of a blank crashed screen.

class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error: Error) { reportCrash(error); }
  render() {
    if (this.state.hasError) return <Text>Something went wrong.</Text>;
    return this.props.children;
  }
}

Error boundaries only catch render/lifecycle errors, not errors inside event handlers or async code — those need their own `try/catch`, often paired with a crash reporting service like Sentry.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges