Sentry integration and migration to Expo SDK 50 (#177)

* chore(deps): upgraded to Expo 50

* feat(expo): added Sentry integration

* chore(config): added sentry URL

* feat(backend): added Sentry

* chore(backend): added environment related configuration

* chore: removed debug route

backend/.gitignore

@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.sentryclirc

backend/package.json

@@ -5,15 +5,18 @@
   "main": "index.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon --watch src src/server.ts",
-    "build": "tsc -p tsconfig.json",
-    "postinstall": "npm link ../commons"
+    "build": "tsc -p tsconfig.json && npm run sentry:sourcemaps",
+    "postinstall": "npm link ../commons",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org datsmysong --project backend ./build && sentry-cli sourcemaps upload --org datsmysong --project backend ./build"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@fastify/cookie": "^9.3.1",
     "@fastify/cors": "^9.0.1",
     "@fastify/rate-limit": "^9.1.0",
+    "@sentry/cli": "^2.31.2",
+    "@sentry/node": "^8.0.0-rc.2",
     "@spotify/web-api-ts-sdk": "^1.2.0",
     "@supabase/auth-helpers-nextjs": "^0.10.0",
     "@supabase/ssr": "^0.3.0",
@@ -41,4 +44,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   }
-}
+}

backend/src/server.ts

@@ -8,7 +8,6 @@ import {
   ServerToClientEvents,
 } from "commons/socket.io-types";
 import { config } from "dotenv";
-import fastify from "fastify";
 import fastifySocketIO from "fastify-socket.io";
 import { Server } from "socket.io";
 import authRoutes from "./authRoutes";
@@ -25,6 +24,7 @@ import StreamingServicesGET from "./route/StreamingServicesGET";
 import UnbindServicePOST from "./route/UnbindServicePOST";
 import RecentMusicsGET from "./route/RecentMusicsGET";
 import onRoomWSConnection from "./socketio/RoomIO";
+import * as Sentry from "@sentry/node";
 
 config({ path: ".env.local" });
 
@@ -44,6 +44,20 @@ const corsOrigin: (devValue?: string | boolean) => (string | boolean)[] = (
   return ["https://datsmysong.app", "https://api.datsmysong.app/"];
 };
 
+// Ensure to call this before requiring any other modules!
+Sentry.init({
+  dsn: "https://349dd8dd31222fcee73479d237a589dd@o4507124937064448.ingest.de.sentry.io/4507226372636752",
+
+  // Add Performance Monitoring by setting tracesSampleRate
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+  environment: process.env.NODE_ENV,
+  debug: process.env.NODE_ENV === "development",
+});
+
+// (!) This import should be done after the Sentry.init call
+import fastify from "fastify";
+
 export const server = fastify({
   ignoreTrailingSlash: true,
   ignoreDuplicateSlashes: true,
@@ -54,6 +68,8 @@ export const server = fastify({
   },
 });
 
+Sentry.setupFastifyErrorHandler(server);
+
 if (!process.env.SUPABASE_URL || !process.env.SERVICE_ROLE) {
   throw new Error(
     "Missing SUPABASE_URL or SUPABASE_SERVICE_ROLE environment variable"

expo/app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "app.datsmysong"
@@ -24,9 +22,7 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "permissions": [
-        "android.permission.INTERNET"
-      ],
+      "permissions": ["android.permission.INTERNET"],
       "package": "app.datsmysong"
     },
     "web": {
@@ -35,7 +31,15 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "@sentry/react-native/expo",
+        {
+          "url": "https://sentry.io/",
+          "organization": "datsmysong",
+          "project": "app"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

expo/app/(tabs)/index.tsx

@@ -5,7 +5,6 @@ import MusicNote from "phosphor-react-native/src/icons/MusicNote";
 import React, { useEffect, useState } from "react";
 import { FlatList, View as NativeView, ScrollView } from "react-native";
 
-import Alert from "../../components/Alert";
 import Button from "../../components/Button";
 import { TrackCard } from "../../components/Music";
 import { View } from "../../components/Themed";

expo/app/_layout.tsx

@@ -1,6 +1,12 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
+import * as Sentry from "@sentry/react-native";
 import { useFonts } from "expo-font";
-import { SplashScreen, Stack, router } from "expo-router";
+import {
+  SplashScreen,
+  Stack,
+  router,
+  useNavigationContainerRef,
+} from "expo-router";
 import { IconContext } from "phosphor-react-native/src/lib";
 import { useEffect } from "react";
 import { MenuProvider } from "react-native-popup-menu";
@@ -16,9 +22,40 @@ export const unstable_settings = {
   initialRouteName: "(tabs)",
 };
 
+// Construct a new instrumentation instance. This is needed to communicate between the integration and React
+const routingInstrumentation = new Sentry.ReactNavigationInstrumentation();
+
+Sentry.init({
+  dsn: "https://7085409d423f186cbaf15178a350408f@o4507124937064448.ingest.de.sentry.io/4507124939620432",
+  debug: process.env.NODE_ENV === "development",
+  // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
+  // We recommend adjusting this value in production.
+  tracesSampleRate: 1.0,
+  _experiments: {
+    // profilesSampleRate is relative to tracesSampleRate.
+    // Here, we'll capture profiles for 100% of transactions.
+    profilesSampleRate: 1.0,
+  },
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation,
+    }),
+  ],
+});
+
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
-export default function RootLayout() {
+
+function RootLayout() {
+  // Capture the NavigationContainer ref and register it with the instrumentation.
+  const ref = useNavigationContainerRef();
+
+  useEffect(() => {
+    if (ref) {
+      routingInstrumentation.registerNavigationContainer(ref);
+    }
+  }, [ref]);
+
   const [loaded, error] = useFonts({
     "Outfit-Thin": require("../assets/fonts/outfit/Outfit-Thin.ttf"),
     "Outfit-ExtraLight": require("../assets/fonts/outfit/Outfit-ExtraLight.ttf"),
@@ -108,3 +145,5 @@ function RootLayoutNav() {
     </View>
   );
 }
+
+export default Sentry.wrap(RootLayout);

expo/babel.config.js

@@ -1,10 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      // Required for expo-router
-      'expo-router/babel',
-    ],
+    presets: ["babel-preset-expo"],
   };
 };

expo/metro.config.js

@@ -1,8 +1,8 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
 
 /** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname, {
+const config = getSentryExpoConfig(__dirname, {
   // [Web-only]: Enables CSS support in Metro.
   isCSSEnabled: true,
 });