How do you handle errors in a React Native app?

React error boundaries are class components that catch errors thrown during rendering, lifecycle methods and constructors of their descendants. They do not catch errors in event handlers, async callbacks or native code, so those need their own handling.

import React from "react";
import { Text, View } from "react-native";

type Props = { children: React.ReactNode };
type State = { error: Error | null };

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { error: null };

  static getDerivedStateFromError(error: Error): State {
    return { error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("render error", error, info.componentStack);
  }

  render() {
    if (this.state.error) {
      return (
        <View>
          <Text>Something went wrong.</Text>
        </View>
      );
    }
    return this.props.children;
  }
}

Layers of error handling

• Local try/catch around parsing, storage and network calls with a typed error result
• Error boundaries around screens or major sections for render failures
• A global handler for uncaught JavaScript errors that reports and recovers
• Crash reporting such as Sentry or Crashlytics for native crashes
• A retry or reload path rather than a dead-end error screen

Error boundaries reset only when their state changes. If a screen can recover, offer a retry that resets the boundary state or remounts the subtree with a new key. Log enough context to reproduce the issue, but never log tokens or personal data.