Sentry integration (#26)

Co-authored-by: Kunal Sharma <kunal.sharma@navi.com>

App.tsx

@@ -9,6 +9,13 @@ import FullScreenLoader from './RN-UI-LIB/src/components/FullScreenLoader';
 import ProtectedRouter from './ProtectedRouter';
 import { toastConfigs, ToastContainer } from './RN-UI-LIB/src/components/toast';
 
+import ErrorBoundary from './src/common/ErrorBoundary';
+
+import * as Sentry from '@sentry/browser';
+import { SENTRY_DSN } from './src/constants/config';
+
+Sentry.init({ dsn: SENTRY_DSN });
+
 const App = () => {
     return (
         <Provider store={store}>
@@ -16,7 +23,9 @@ const App = () => {
                 loading={<FullScreenLoader loading />}
                 persistor={persistor}>
                 <NavigationContainer ref={navigationRef}>
-                    <ProtectedRouter />
+                    <ErrorBoundary>
+                        <ProtectedRouter />
+                    </ErrorBoundary>
                 </NavigationContainer>
                 {<ToastContainer config={toastConfigs} position='bottom' />}
             </PersistGate>

package.json

@@ -19,6 +19,7 @@
         "@react-navigation/native": "6.0.16",
         "@react-navigation/native-stack": "6.9.4",
         "@reduxjs/toolkit": "1.9.1",
+        "@sentry/browser": "7.29.0",
         "axios": "1.2.1",
         "fuzzysort": "2.0.4",
         "lottie-react-native": "5.1.4",

src/common/ErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import React, { Component, ReactNode } from 'react';
+import { logError } from '../components/utlis/errorUtils';
+import { Text, View } from 'react-native';
+import { COLORS } from '../../RN-UI-LIB/src/styles/colors';
+
+interface IErrorBoundary {
+  children?: ReactNode;
+}
+
+interface IErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<IErrorBoundary, IErrorBoundaryState> {
+
+  constructor(props: IErrorBoundary) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error: Error) {
+    this.setState({
+      hasError: true
+    });
+    logError(error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        // Todo: Design Update
+        <View>
+            <Text style={[{color: COLORS.TEXT.DARK}]}>
+                Something went wrong
+            </Text>
+        </View>
+      );
+    }
+
+    return <>{this.props.children}</>;
+  }
+}
+
+export default ErrorBoundary;

src/components/utlis/apiHelper.ts

@@ -1,11 +1,12 @@
 import axios from 'axios';
-import { Dispatch } from '@reduxjs/toolkit';
-import { setAuthData } from '../../reducer/userSlice';
-import { toast } from '../../../RN-UI-LIB/src/components/toast';
-import { navigateToScreen } from './navigationUtlis';
-import { GLOBAL } from '../../constants/Global';
-import { _map } from '../../../RN-UI-LIB/src/utlis/common';
-import { BASE_AV_APP_URL } from '../../constants/config';
+import {Dispatch} from '@reduxjs/toolkit';
+import {setAuthData} from '../../reducer/userSlice';
+import {toast} from '../../../RN-UI-LIB/src/components/toast';
+import {navigateToScreen} from './navigationUtlis';
+import {GLOBAL} from '../../constants/Global';
+import {_map} from '../../../RN-UI-LIB/src/utlis/common';
+import {BASE_AV_APP_URL} from '../../constants/config';
+import { logError } from './errorUtils';
 
 const MOCK_DIR = '__mocks__';
 
@@ -114,7 +115,9 @@ axiosInstance.interceptors.response.use(
         return response;
     },
     error => {
-        const { config, response } = error;
+        logError(error as Error, 'From API Helper');
+
+        const {config, response} = error;
         if (
             !config ||
             config.retry <= 1 ||

src/components/utlis/errorUtils.ts

@@ -0,0 +1,6 @@
+import * as Sentry from '@sentry/browser';
+import { GLOBAL } from '../../constants/Global';
+
+export const logError = (error: Error, extraInfo = '') =>{
+  Sentry.captureException({error, message: error?.message, extraInfo, deviceId: GLOBAL.DEVICE_ID});
+};

src/constants/config.js

@@ -1 +1,2 @@
-export const BASE_AV_APP_URL = 'https://dev-longhorn-server.np.navi-tech.in/av';
+export const BASE_AV_APP_URL = 'https://dev-longhorn-portal.np.navi-tech.in/av';
+export const SENTRY_DSN = 'https://877396e88a2b4f78b911016c64f9121a@glitchtip.cmd.navi-tech.in/155';