feat: Add Error Boundary

App.js

@@ -15,6 +15,7 @@ import Main from './src/navigators/Main';
 import { createDatabase } from './src/database/db';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import LottieSplashScreen from 'react-native-lottie-splash-screen';
+import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
 
 const App = () => {
   useEffect(() => {
@@ -23,16 +24,18 @@ const App = () => {
   }, []);
 
   return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <SafeAreaProvider>
-          <PaperProvider>
-            <StatusBar translucent={true} backgroundColor="transparent" />
-            <Main />
-          </PaperProvider>
-        </SafeAreaProvider>
-      </PersistGate>
-    </Provider>
+    <AppErrorBoundary>
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <SafeAreaProvider>
+            <PaperProvider>
+              <StatusBar translucent={true} backgroundColor="transparent" />
+              <Main />
+            </PaperProvider>
+          </SafeAreaProvider>
+        </PersistGate>
+      </Provider>
+    </AppErrorBoundary>
   );
 };
 

package-lock.json

@@ -45,6 +45,7 @@
         "react-native-background-actions": "^2.6.5",
         "react-native-device-info": "^8.4.7",
         "react-native-easing-gradient": "^1.0.0",
+        "react-native-error-boundary": "^1.1.16",
         "react-native-fast-image": "^8.5.11",
         "react-native-gesture-handler": "~1.10.2",
         "react-native-lottie-splash-screen": "^1.0.1",
@@ -12765,6 +12766,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-error-boundary": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/react-native-error-boundary/-/react-native-error-boundary-1.1.16.tgz",
+      "integrity": "sha512-yCbKhjGo2kMJBoUdy503L3oaInrLo1gychGr5e/IrezfPhfUGhfr8EtG2EKgZDcSfmvodBXvARq942hWis5sUA==",
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-native": ">=0.57.7"
+      }
+    },
     "node_modules/react-native-fast-image": {
       "version": "8.5.11",
       "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",
@@ -26017,6 +26027,11 @@
       "resolved": "https://registry.npmjs.org/react-native-easing-gradient/-/react-native-easing-gradient-1.0.0.tgz",
       "integrity": "sha512-wkFPbjDLvySHKzqkCYxD8vTgKLdlgch9AL8wkO+liJuukwVXeD2sDqtPPsMKqX6hWK+Ebg8shjIeavNfoOLy7w=="
     },
+    "react-native-error-boundary": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/react-native-error-boundary/-/react-native-error-boundary-1.1.16.tgz",
+      "integrity": "sha512-yCbKhjGo2kMJBoUdy503L3oaInrLo1gychGr5e/IrezfPhfUGhfr8EtG2EKgZDcSfmvodBXvARq942hWis5sUA=="
+    },
     "react-native-fast-image": {
       "version": "8.5.11",
       "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",

package.json

@@ -52,6 +52,7 @@
     "react-native-background-actions": "^2.6.5",
     "react-native-device-info": "^8.4.7",
     "react-native-easing-gradient": "^1.0.0",
+    "react-native-error-boundary": "^1.1.16",
     "react-native-fast-image": "^8.5.11",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-lottie-splash-screen": "^1.0.1",

src/components/AppErrorBoundary/AppErrorBoundary.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, View, Text, StatusBar } from 'react-native';
+import ErrorBoundary from 'react-native-error-boundary';
+
+import { Button, List } from '@components';
+import { useTheme } from '@hooks';
+import { ButtonVariation } from '@components/Button/Button';
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  resetError,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.mainCtn, { backgroundColor: theme.background }]}>
+      <StatusBar translucent={true} backgroundColor="transparent" />
+      <View style={styles.errorInfoCtn}>
+        <Text style={[styles.errorTitle, { color: theme.onSurface }]}>
+          An Unexpected Error Ocurred
+        </Text>
+        <Text style={[styles.errorDesc, { color: theme.onSurface }]}>
+          The application ran into an unexpected error. We suggest you
+          screenshot this message and then share it in our support channel on
+          Discord.
+        </Text>
+        <Text
+          style={[
+            styles.errorCtn,
+            {
+              backgroundColor: theme.surfaceVariant,
+              color: theme.onSurfaceVariant,
+            },
+          ]}
+          numberOfLines={20}
+        >
+          {`${error.message}\n\n${error.stack}`}
+        </Text>
+      </View>
+      <List.Divider theme={theme} />
+      <Button
+        variation={ButtonVariation.DEFAULT}
+        onPress={resetError}
+        title={'Restart the application'}
+        style={styles.buttonCtn}
+        theme={theme}
+      />
+    </View>
+  );
+};
+
+interface AppErrorBoundaryProps {
+  children: React.ReactNode | React.ReactElement;
+}
+
+const AppErrorBoundary: React.FC<AppErrorBoundaryProps> = ({ children }) => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+  );
+};
+
+export default AppErrorBoundary;
+
+const styles = StyleSheet.create({
+  mainCtn: {
+    flex: 1,
+  },
+  errorInfoCtn: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+  },
+  buttonCtn: {
+    margin: 16,
+    marginBottom: 32,
+  },
+  errorTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  errorDesc: {
+    lineHeight: 20,
+    marginVertical: 8,
+  },
+  errorCtn: {
+    borderRadius: 8,
+    lineHeight: 20,
+    marginVertical: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+  },
+});