React Native: How to handle errors globally in React Native?

1import { Component, ErrorInfo, ReactNode } from "react";
2
3type Props = { children: ReactNode; fallback?: ReactNode };
4type State = { hasError: boolean; error?: Error };
5
6class ErrorBoundary extends Component<Props, State> {
7  constructor(props: Props) {
8    super(props);
9    this.state = { hasError: false };
10  }
11
12  static getDerivedStateFromError(error: Error) {
13    return { hasError: true, error };
14  }
15
16  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
17    console.error("Error caught:", error, errorInfo);
18  }
19
20  render() {
21    if (this.state.hasError) {
22      return this.props.fallback || <Text>Something went wrong</Text>;
23    }
24    return this.props.children;
25  }
26}

1import { ErrorUtils } from "react-native";
2
3const defaultHandler =
4  ErrorUtils.getGlobalHandler && ErrorUtils.getGlobalHandler();
5
6ErrorUtils.setGlobalHandler((error: Error, isFatal?: boolean) => {
7  console.error("Global error:", error);
8  if (defaultHandler) {
9    defaultHandler(error, isFatal);
10  }
11});