Fix ErrorBoundary Sentry reports

android/settings.gradle

@@ -3,8 +3,6 @@ include ':react-native-ble-plx'
 project(':react-native-ble-plx').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ble-plx/android')
 include ':react-native-palette-full'
 project(':react-native-palette-full').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-palette-full/android')
-include ':react-native-exit-app'
-project(':react-native-exit-app').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exit-app/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 

ios/Podfile

@@ -66,7 +66,6 @@ target 'Rainbow' do
   pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
   pod "PanModal", :git => 'https://github.com/rainbow-me/PanModal', :commit => 'ab97d74279ba28c2891b47a5dc767ed4dd7cf994'
   pod 'Shimmer'
-  pod 'RNExitApp', :path => '../node_modules/react-native-exit-app'
   pod 'SRSRadialGradient', :path => '../node_modules/react-native-radial-gradient/ios'
   pod 'react-native-palette-full', :path => '../node_modules/react-native-palette-full'
   pod 'react-native-ble-plx', :path => '../node_modules/react-native-ble-plx'

ios/Podfile.lock

@@ -1585,8 +1585,6 @@ PODS:
     - React-Core
   - RNDeviceInfo (5.3.1):
     - React
-  - RNExitApp (1.1.0):
-    - React
   - RNFastImage (8.5.11):
     - React-Core
     - SDWebImage (~> 5.18.11)
@@ -1878,7 +1876,6 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
-  - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
@@ -2149,8 +2146,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
-  RNExitApp:
-    :path: "../node_modules/react-native-exit-app"
   RNFastImage:
     :path: "../node_modules/react-native-fast-image"
   RNFBApp:
@@ -2337,7 +2332,6 @@ SPEC CHECKSUMS:
   RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d
   RNCMaskedView: 090213d32d8b3bb83a4dcb7d12c18f0152591906
   RNDeviceInfo: 6f20764111df002b4484f90cbe0a861be29bcc6c
-  RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
   RNFastImage: 4ce7636223e71615774b99004103e946a73e7c32
   RNFBApp: 1ae7462cddf74a49df206d3418bc0170f8fa53e5
   RNFBMessaging: 85f661b9f16e2b081e6809ef63d3daa4458b9042
@@ -2377,6 +2371,6 @@ SPEC CHECKSUMS:
   VisionCamera: 2af28201c3de77245f8c58b7a5274d5979df70df
   Yoga: 88480008ccacea6301ff7bf58726e27a72931c8d
 
-PODFILE CHECKSUM: 0f0a1ebe553d4680f84239a817bfe3b3d1ce74f9
+PODFILE CHECKSUM: 0839e4141c8f26133bf9a961f5ded1ea3127af54
 
 COCOAPODS: 1.14.3

package.json

@@ -223,7 +223,6 @@
     "react-native-dark-mode": "0.2.2",
     "react-native-device-info": "5.3.1",
     "react-native-dotenv": "2.4.2",
-    "react-native-exit-app": "1.1.0",
     "react-native-extra-dimensions-android": "1.2.2",
     "react-native-fast-image": "8.5.11",
     "react-native-fs": "2.16.6",

src/components/error-boundary/ErrorBoundary.tsx

@@ -1,35 +1,23 @@
-import { captureException } from '@sentry/react-native';
-import React, { PropsWithChildren } from 'react';
-// @ts-ignore
-import { IS_TESTING } from 'react-native-dotenv';
+import React from 'react';
+import * as Sentry from '@sentry/react-native';
 import Fallback from './Fallback';
-import logger from '@/utils/logger';
+import { IS_TEST } from '@/env';
+import { useTheme } from '@/theme';
 
-class ErrorBoundary extends React.Component<PropsWithChildren> {
-  static getDerivedStateFromError(_error: any) {
-    return { hasError: true };
-  }
+const NoErrorBoundary = ({ children }: { children: React.ReactNode }) => children;
 
-  state = { hasError: false };
+const ErrorBoundaryWithSentry = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+  return (
+    <Sentry.ErrorBoundary
+      beforeCapture={scope => scope.setTag('RainbowErrorBoundary', 'true')}
+      fallback={props => <Fallback {...props} colors={colors} />}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  );
+};
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // log captured error to Sentry
-    logger.sentry(`Unhandled JS error caught by Error Boundary: ${JSON.stringify(errorInfo)}`);
-    logger.sentry('Error is', error);
-    const customError = new Error('React Crash');
-    captureException(customError);
-  }
-  render() {
-    if (this.state.hasError) {
-      return <Fallback />;
-    }
+const ErrorBoundaryForEnvironment = IS_TEST ? NoErrorBoundary : ErrorBoundaryWithSentry;
 
-    return this.props.children;
-  }
-}
-
-const NoErrorBoundary = ({ children }: { children: React.ReactChild }) => children;
-
-const DefaultBoundary = IS_TESTING ? NoErrorBoundary : ErrorBoundary;
-
-export default DefaultBoundary;
+export default ErrorBoundaryForEnvironment;

src/components/error-boundary/Fallback.tsx

@@ -1,13 +1,12 @@
 import lang from 'i18n-js';
 import React from 'react';
 import { View } from 'react-native';
-import RNExitApp from 'react-native-exit-app';
 import { Centered } from '../layout';
 import { SheetActionButton } from '../sheet';
 import Text from '../text/Text';
 import styled from '@/styled-thing';
-import { useTheme } from '@/theme';
-import logger from '@/utils/logger';
+import { RainbowError, logger } from '@/logger';
+import { Colors } from '@/styles';
 
 const Spacer = styled(View)({
   height: ({ height }: { height: number }) => height,
@@ -25,11 +24,25 @@ const Message = styled(View)({
   textAlign: 'center',
 });
 
-export default function Fallback() {
-  const { colors } = useTheme();
+export default function Fallback({
+  colors,
+  error,
+  componentStack,
+  resetError,
+}: {
+  colors: Colors;
+  error: Error;
+  componentStack: string;
+  resetError: () => void;
+}) {
   const handleRestart = () => {
-    logger.sentry('Restarting app after Error Boundary catch');
-    RNExitApp.exitApp();
+    logger.error(new RainbowError('RainbowAppRestartFromErrorBoundary'), {
+      data: {
+        error: error.toString(),
+        componentStack,
+      },
+    });
+    resetError();
   };
   return (
     <Container>

src/logger/index.ts

@@ -267,7 +267,7 @@ export class Logger {
  *   `logger.debug(message[, metadata, debugContext])`
  *   `logger.info(message[, metadata])`
  *   `logger.warn(message[, metadata])`
- *   `logger.error(error[, metadata])`
+ *   `logger.error(RainbowError[, metadata])`
  *   `logger.disable()`
  *   `logger.enable()`
  */

src/logger/sentry.ts

@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/react-native';
 import { SENTRY_ENDPOINT, SENTRY_ENVIRONMENT } from 'react-native-dotenv';
 import VersionNumber from 'react-native-version-number';
 
-import { IS_PROD, IS_TEST } from '@/env';
+import { IS_TEST } from '@/env';
 import { logger, RainbowError } from '@/logger';
 import isTestFlight from '@/helpers/isTestFlight';
 

yarn.lock

@@ -7974,7 +7974,6 @@ __metadata:
     react-native-dark-mode: "npm:0.2.2"
     react-native-device-info: "npm:5.3.1"
     react-native-dotenv: "npm:2.4.2"
-    react-native-exit-app: "npm:1.1.0"
     react-native-extra-dimensions-android: "npm:1.2.2"
     react-native-fast-image: "npm:8.5.11"
     react-native-fs: "npm:2.16.6"
@@ -20888,13 +20887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-exit-app@npm:1.1.0":
-  version: 1.1.0
-  resolution: "react-native-exit-app@npm:1.1.0"
-  checksum: 10c0/e653f9c329de6300ad46d753919ee32767e6d1ca8139969f1c241a43eb12e9b29bd1dbac48f27d14de614674419fbd79b4a84c10c5848e726f197ed2fb547c96
-  languageName: node
-  linkType: hard
-
 "react-native-extra-dimensions-android@npm:1.2.2":
   version: 1.2.2
   resolution: "react-native-extra-dimensions-android@npm:1.2.2"