React Native theorytheory 0/50 · 0%
Reliability · medium

36. Error boundaries and crash reporting

Catching render errors gracefully.

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.

Check your understanding

  1. 1. What kind of errors do Error Boundaries catch?

  2. 2. Do Error Boundaries catch errors inside onPress handlers?

  3. 3. What is componentDidCatch commonly used for?