fix: configure Sentry SDK for mobile app error monitoring

Author: batalabs

apps/mobile/v1/.gitignore

@@ -42,3 +42,5 @@ app-example
 # generated native folders
 /ios
 /android
+
+.env.local

apps/mobile/v1/app/_layout.tsx

@@ -11,6 +11,26 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { ThemeProvider, useTheme } from '@/src/theme';
 import { AppWrapper } from '@/src/components/AppWrapper';
 import ErrorBoundary from '@/src/components/ErrorBoundary';
+import * as Sentry from '@sentry/react-native';
+
+Sentry.init({
+  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
+
+  // Adds more context data to events (IP address, cookies, user, etc.)
+  // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/
+  sendDefaultPii: true,
+
+  // Enable Logs
+  enableLogs: true,
+
+  // Configure Session Replay
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1,
+  integrations: [Sentry.mobileReplayIntegration()],
+
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: __DEV__,
+});
 
 const clerkPublishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY || '';
 
@@ -101,7 +121,7 @@ function AppContent() {
   );
 }
 
-export default function RootLayout() {
+export default Sentry.wrap(function RootLayout() {
   if (__DEV__) {
     console.log('=== MOBILE V1 APP WITH CLERK ===');
     console.log('Clerk key loaded:', clerkPublishableKey ? 'YES' : 'NO');
@@ -122,4 +142,4 @@ export default function RootLayout() {
       </ClerkLoaded>
     </ClerkProvider>
   );
-}
+});

apps/mobile/v1/metro.config.js

@@ -0,0 +1,5 @@
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+
+const config = getSentryExpoConfig(__dirname);
+
+module.exports = config;