feat: integrate sentry

Author: veliseev93

.gitignore

@@ -62,4 +62,5 @@ cache/
 eas.json
 
 .env.local
-.eslintcache
+.eslintcache
+.env.local

apps/mobile/app.config.ts

@@ -14,6 +14,10 @@ const createConfig = (): Omit<ExpoConfig, 'extra'> & { extra: { eas: EASConfig }
 
   const extra = {
     eas: { projectId } as EASConfig,
+    sentry: {
+      dsn: 'https://3ae5dc8126bb61f3f6a582ea697a45d8@o4511502286716928.ingest.us.sentry.io/4511511143579648',
+    },
+    env: appEnv.current,
     googleIosClientId: appEnv.select({
       default: process.env.GOOGLE_IOS_CLIENT_ID_DEV,
       production: process.env.GOOGLE_IOS_CLIENT_ID_PROD,

apps/mobile/app/_layout.tsx

@@ -17,9 +17,11 @@ import { useNetworkConnection } from '@open-webui-react-native/shared/features/n
 import { constants } from '@open-webui-react-native/shared/utils/config';
 import { setupReactotron } from '@open-webui-react-native/shared/utils/reactotron';
 import { setLanguage } from '@ronas-it/react-native-common-modules/i18n';
+import * as Sentry from '@sentry/react-native';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import Constants from 'expo-constants';
 import { useFonts } from 'expo-font';
-import { SplashScreen, Stack } from 'expo-router';
+import { SplashScreen, Stack, useNavigationContainerRef } from 'expo-router';
 import { ReactElement, useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
@@ -29,6 +31,16 @@ import 'expo-dev-client';
 
 export { ErrorBoundary } from 'expo-router';
 
+const reactNavigationIntegration = Sentry.reactNavigationIntegration();
+
+Sentry.init({
+  dsn: Constants.expoConfig?.extra?.sentry?.dsn,
+  environment: Constants.expoConfig?.extra?.env,
+  debug: false,
+  integrations: [reactNavigationIntegration],
+  enabled: !__DEV__,
+});
+
 const translations = {
   [constants.defaultLocale]: {
     ...require('i18n/mobile/app/en.json'),
@@ -85,9 +97,16 @@ function App(): ReactElement | null {
   );
 }
 
-export default function RootLayout(): ReactElement | null {
+function RootLayout(): ReactElement | null {
   useLanguage(constants.defaultLocale);
   const [isFontsLoaded] = useFonts(fonts);
+  const navigationContainerRef = useNavigationContainerRef();
+
+  useEffect(() => {
+    if (navigationContainerRef) {
+      reactNavigationIntegration.registerNavigationContainer(navigationContainerRef);
+    }
+  }, [navigationContainerRef]);
 
   useEffect(() => {
     if (isFontsLoaded) {
@@ -121,3 +140,5 @@ export default function RootLayout(): ReactElement | null {
     </KeyboardProvider>
   );
 }
+
+export default Sentry.wrap(RootLayout);

apps/mobile/metro.config.js

@@ -1,12 +1,12 @@
-const { getDefaultConfig } = require('@expo/metro-config');
+const { getSentryExpoConfig } = require('@sentry/react-native/metro');
 const { withNativeWind } = require('nativewind/metro');
 const { withNxMetro } = require('@nx/expo');
 const { mergeConfig } = require('metro-config');
 const path = require('path');
 
 const appRoot = __dirname;
 const monorepoRoot = path.resolve(appRoot, '../..');
-const defaultConfig = getDefaultConfig(appRoot);
+const defaultConfig = getSentryExpoConfig(appRoot);
 const { assetExts, sourceExts } = defaultConfig.resolver;
 /**
  * Metro configuration

apps/mobile/package.json

@@ -32,6 +32,7 @@
     "@react-navigation/drawer": "^7.3.9",
     "@ronas-it/react-native-common-modules": "^1.1.0",
     "@ronas-it/rtkq-entity-api": "^0.4.10",
+    "@sentry/react-native": "~7.11.0",
     "@shopify/flash-list": "2.0.2",
     "@tanstack/react-query": "^5.80.6",
     "@tanstack/react-query-persist-client": "^5.87.4",