Skip to content

Instantly share code, notes, and snippets.

@wodCZ

wodCZ/App.tsx Secret

Created Dec 2, 2021
Embed
What would you like to do?
Crash handling for react native
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);
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,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment