Merge pull request #63 from Trustroots/sentry

Sentry

nr-app/app.json

@@ -42,7 +42,15 @@
     "plugins": [
       "expo-router",
       "expo-font",
-      "expo-secure-store"
+      "expo-secure-store",
+      [
+        "@sentry/react-native/expo",
+        {
+          "organization": "trustroots-foundation-fo",
+          "project": "react-native",
+          "url": "https://sentry.io/"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true,

nr-app/app/_layout.tsx

@@ -8,16 +8,37 @@ import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 import "react-native-reanimated";
-import { Provider } from "react-redux";
 import { RootSiblingParent } from "react-native-root-siblings";
+import { Provider } from "react-redux";
+
+import { SENTRY_DSN } from "../../nr-common/constants.ts";
+
+import * as Sentry from "@sentry/react-native";
+import { isRunningInExpoGo } from "expo";
 
-import { store } from "@/redux/store";
 import { useColorScheme } from "@/hooks/useColorScheme";
+import { store } from "@/redux/store";
+
+// Construct a new integration instance. This is needed to communicate between the integration and React
+const navigationIntegration = Sentry.reactNavigationIntegration({
+  enableTimeToInitialDisplay: !isRunningInExpoGo(),
+});
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  debug: __DEV__, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
+  tracesSampleRate: 1.0, // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing. Adjusting this value in production.
+  integrations: [
+    // Pass integration
+    navigationIntegration,
+  ],
+  enableNativeFramesTracking: !isRunningInExpoGo(), // Tracks slow and frozen frames in the application
+});
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
-export default function RootLayout() {
+function RootLayout() {
   const colorScheme = useColorScheme();
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -46,3 +67,6 @@ export default function RootLayout() {
     </Provider>
   );
 }
+
+// Wrap the Root Layout route component with `Sentry.wrap` to capture gesture info and profiling data.
+export default Sentry.wrap(RootLayout);

nr-app/metro.config.js

@@ -1,11 +1,13 @@
 // Learn more https://docs.expo.dev/guides/monorepos
-const { getDefaultConfig } = require("expo/metro-config");
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+
 const path = require("path");
 
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "..");
 
-const config = getDefaultConfig(projectRoot);
+// This replaces `const config = getDefaultConfig(__dirname);`
+const config = getSentryExpoConfig(__dirname);
 
 // Since we are using pnpm, we have to setup the monorepo manually for Metro
 // #1 - Watch all files in the monorepo

nr-app/package.json

@@ -23,6 +23,7 @@
     "@mobily/ts-belt": "^3.13.1",
     "@react-navigation/native": "^7.0.3",
     "@reduxjs/toolkit": "^2.2.7",
+    "@sentry/react-native": "~6.3.0",
     "@trustroots/nr-common": "workspace:*",
     "expo": "~52.0.8",
     "expo-constants": "~17.0.3",

nr-common/constants.ts

@@ -24,6 +24,10 @@ export const HITCHWIKI_AUTHOR_PUBLIC_KEY =
 export const TIMESAFARI_AUTHOR_PUBLIC_KEY =
   "76e88d2e653fc3655f8e0b97f6bc85f5468eaffc5d64522b584ce13eedbd8af7" as const;
 
+// cross-env DSN id - use for native + server
+export const SENTRY_DSN = "https://ea370f9e4aba87f6e69a479f2d41bc23@o4508806276841472.ingest.de.sentry.io/4508806292176976" as const;
+
+
 export type MapLayer = {
   title: string;
   rootUrl: string;