adds sentry to backpack-api and app-mobile

backend/native/backpack-api/package.json

@@ -17,6 +17,8 @@
     "@saberhq/merkle-distributor": "^0.3.5",
     "@saberhq/solana-contrib": "^1.14.11",
     "@saberhq/token-utils": "^1.14.11",
+    "@sentry/node": "^7.42.0",
+    "@sentry/tracing": "^7.42.0",
     "@solana/spl-token": "^0.3.7",
     "@solana/web3.js": "^1.73.0",
     "@types/express": "^4.17.14",

backend/native/backpack-api/src/config.ts

@@ -1,6 +1,7 @@
 import * as dotenv from "dotenv";
 
 dotenv.config();
+export const SENTRY_DSN = process.env.SENTRY_DSN;
 export const HASURA_URL =
   process.env.HASURA_URL || "http://localhost:8112/v1/graphql";
 

backend/native/backpack-api/src/index.ts

@@ -1,5 +1,7 @@
+import * as Sentry from "@sentry/node";
+import * as Tracing from "@sentry/tracing";
 import cors from "cors";
-import type { NextFunction, Request, Response } from "express";
+import type { Request, Response } from "express";
 import express from "express";
 import { createProxyMiddleware } from "http-proxy-middleware";
 import { ZodError } from "zod";
@@ -19,9 +21,33 @@ import referralsRouter from "./routes/v1/referrals";
 import s3Router from "./routes/v1/s3";
 import txParsingRouter from "./routes/v1/tx-parsing";
 import usersRouter from "./routes/v1/users";
+import { SENTRY_DSN } from "./config";
 import { zodErrorToString } from "./util";
 
 const app = express();
+
+// Must happen as close to the top as possible
+Sentry.init({
+  dsn: SENTRY_DSN,
+  integrations: [
+    // enable HTTP calls tracing
+    new Sentry.Integrations.Http({ tracing: true }),
+    // enable Express.js middleware tracing
+    new Tracing.Integrations.Express({ app }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 0.5,
+});
+
+// RequestHandler creates a separate execution context using domains, so that every
+// transaction/span/breadcrumb is attached to its own Hub instance
+app.use(Sentry.Handlers.requestHandler());
+// TracingHandler creates a trace for every incoming request
+app.use(Sentry.Handlers.tracingHandler());
+
 // eslint-disable-next-line
 const bodyParser = require("body-parser");
 // eslint-disable-next-line
@@ -70,8 +96,10 @@ app.get("/", (_req, res) => {
   });
 });
 
-// @ts-ignore
-app.use((err: any, _req: Request, res: Response, next: NextFunction) => {
+// The error handler must be before any other error middleware and after all controllers
+app.use(Sentry.Handlers.errorHandler());
+
+app.use((err: any, _req: Request, res: Response) => {
   if (err instanceof ZodError) {
     return res.status(400).json({
       message: zodErrorToString(err),

packages/app-mobile/.env.sample

@@ -0,0 +1,4 @@
+SENTRY_ORG=""
+SENTRY_PROJECT=""
+SENTRY_AUTH_TOKEN=""
+SENTRY_DSN=""

packages/app-mobile/.gitignore

@@ -12,3 +12,4 @@ web-build/
 
 # macOS
 .DS_Store
+.env

packages/app-mobile/app.config.js

@@ -1,3 +1,7 @@
+require("dotenv").config();
+const { SENTRY_DSN, SENTRY_ORG, SENTRY_PROJECT, SENTRY_AUTH_TOKEN } =
+  process.env;
+
 const projectID = "55bf074d-0473-4e61-9d9d-ecf570704635";
 const packageName = "app.backpack.mobile";
 
@@ -8,6 +12,7 @@ export default {
   version: "0.1.0",
   orientation: "portrait",
   icon: "./assets/icon.png",
+  plugins: ["sentry-expo"],
   splash: {
     image: "./assets/splash.png",
     resizeMode: "cover",
@@ -50,11 +55,24 @@ export default {
     favicon: "./assets/favicon.png",
   },
   extra: {
+    SENTRY_DSN,
     localWebViewUrl: "http://localhost:9333",
     remoteWebViewUrl:
-      "https://coral-xyz.github.io/backpack/background-scripts/807d4b7/service-worker-loader.html",
+      "https://coral-xyz.github.io/backpack/background-scripts/6ddf0ed/service-worker-loader.html",
     eas: {
       projectId: projectID,
     },
   },
+  hooks: {
+    postPublish: [
+      {
+        file: "sentry-expo/upload-sourcemaps",
+        config: {
+          organization: SENTRY_ORG,
+          project: SENTRY_PROJECT,
+          authToken: SENTRY_AUTH_TOKEN,
+        },
+      },
+    ],
+  },
 };

packages/app-mobile/babel.config.js

@@ -1,6 +1,6 @@
 process.env.TAMAGUI_TARGET = "native"; // Don't forget to specify your TAMAGUI_TARGET here
 
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],

packages/app-mobile/package.json

@@ -17,8 +17,8 @@
     "@cardinal/payment-manager": "^1.7.9",
     "@cardinal/token-manager": "^1.7.9",
     "@coral-xyz/common": "*",
-    "@coral-xyz/tamagui": "*",
     "@coral-xyz/recoil": "*",
+    "@coral-xyz/tamagui": "*",
     "@ethersproject/shims": "^5.7.0",
     "@expo/react-native-action-sheet": "^4.0.1",
     "@expo/vector-icons": "^13.0.0",
@@ -30,10 +30,13 @@
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.3.2",
+    "@sentry/react-native": "4.13.0",
     "big-integer": "^1.6.51",
     "buffer": "^6.0.3",
+    "dotenv": "^16.0.3",
     "ethers": "^5.7.2",
     "expo": "^48.0.4",
+    "expo-application": "~5.1.1",
     "expo-blur": "~12.2.1",
     "expo-checkbox": "~2.3.1",
     "expo-clipboard": "~4.1.2",
@@ -46,7 +49,7 @@
     "expo-secure-store": "~12.1.1",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
-    "expo-updates": "~0.16.1",
+    "expo-updates": "~0.16.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.40.0",
@@ -62,6 +65,7 @@
     "react-qr-code": "^2.0.8",
     "react-test-renderer": "^18.2.0",
     "recoil": "^0.7.6",
+    "sentry-expo": "~6.1.0",
     "tamagui": "^1.7.1",
     "uuid": "^9.0.0"
   },

packages/app-mobile/src/App.tsx

@@ -18,6 +18,7 @@ import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { WebView } from "react-native-webview";
 import { RecoilRoot } from "recoil";
+import * as Sentry from "sentry-expo";
 
 import { ErrorBoundary } from "~components/ErrorBoundary";
 import { useTheme } from "~hooks/useTheme";
@@ -26,6 +27,12 @@ import { maybeParseLog } from "~lib/helpers";
 import { useLoadedAssets } from "./hooks/useLoadedAssets";
 import { RootNavigation } from "./navigation/RootNavigator";
 
+Sentry.init({
+  dsn: Constants?.expoConfig?.extra?.SENTRY_DSN,
+  enableInExpoDevelopment: true,
+  debug: true,
+});
+
 SplashScreen.preventAutoHideAsync();
 
 export function App(): JSX.Element {