Crash handling for react native

App.tsx

import {ApolloProvider} from '@apollo/client';
import React from 'react';
import 'react-native-gesture-handler';
import {Provider as PaperProvider} from 'react-native-paper';
import {enableFreeze} from 'react-native-screens';
import {RootComponent} from './src';
import {client} from './src/api';
import {theme} from './src/theme/theme';
import * as Sentry from '@sentry/react-native';
import {ErrorBoundary} from '@sentry/react-native';
import {AppCrash} from './src/screens/errors/AppCrash';

enableFreeze(true);

const App = () => {
  return (
    <ErrorBoundary
      fallback={({error, componentStack, resetError}) => (
        <AppCrash reloadApp={resetError} error={error.message} stack={componentStack} />
      )}>
      <ApolloProvider client={client}>
        <PaperProvider theme={theme}>
          <RootComponent />
        </PaperProvider>
      </ApolloProvider>
    </ErrorBoundary>
  );
};

export default Sentry.wrap(App);

AppCrash.tsx

import * as React from 'react';
import {Button, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {themeColors} from '../../theme/constants';

type Props = {reloadApp: () => void; error: string; stack: string | null};

export const AppCrash = ({reloadApp, error, stack}: Props) => {
  React.useEffect(() => {
    // Hide splashscreen in case the error happened before it was hidden by the app.
    RNBootSplash.hide({fade: true});
  }, []);
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <Text style={styles.title}>Něco se nepovedlo</Text>
        <Text style={styles.text}>O chybě jsme informovali naše techniky a pracujeme na její opravě.</Text>
        <Button color={themeColors.primary} title={'Zkusit znovu'} onPress={reloadApp} />
      </View>
      <View style={styles.detailsContainer}>
        <Text style={styles.details}>
          Detail chyby: {error}
          {'\n'}
          {stack}
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    padding: 40,
    backgroundColor: themeColors.background,
    flexGrow: 1,
    justifyContent: 'center',
  },
  title: {
    color: themeColors.notification,
    fontSize: 20,
    textAlign: 'center',
    paddingBottom: 20,
  },
  text: {
    color: themeColors.notification,
    textAlign: 'center',
    paddingBottom: 20,
  },
  detailsContainer: {
    padding: 20,
  },
  details: {
    color: themeColors.disabled,
    paddingTop: 20,
  },
});