feat: integrating sentry (#240)

backend/Pipfile

@@ -26,6 +26,7 @@ types-requests = "*"
 greenlet = "*"
 emails = "*"
 jinja2 = "*"
+sentry-sdk = {extras = ["fastapi"], version = "*"}
 
 [dev-packages]
 aiosqlite = "*"

backend/app/api/internal/api.py

@@ -30,7 +30,7 @@ async def version():
 
 @api_router.get("/frontend-settings")
 @api_router.post("/frontend-settings")
-async def matomo():
+async def frontend_settings():
     """
     Return frontend settings.
 

backend/app/main.py

@@ -2,6 +2,7 @@
 import pathlib
 from contextlib import asynccontextmanager
 
+import sentry_sdk
 from fastapi import FastAPI, Request
 from fastapi.staticfiles import StaticFiles
 from starlette.middleware.cors import CORSMiddleware
@@ -17,13 +18,26 @@
 
 logger = logging.getLogger(__name__)
 
+if settings.SENTRY_DSN:  # pragma: no cover
+    sentry_sdk.init(
+        dsn=str(settings.SENTRY_DSN),
+        enable_tracing=True,
+    )
+
 app = FastAPI(
     title="REEV",
     openapi_url=f"{settings.API_V1_STR}/openapi.json",
     docs_url=f"{settings.API_V1_STR}/docs",
     debug=settings.DEBUG,
 )
 
+if settings.SENTRY_DSN and settings.DEBUG:  # pragma: no cover
+
+    @app.get("/sentry-debug")
+    async def trigger_error():
+        division_by_zero = 1 / 0
+
+
 # Set all CORS enabled origins
 if settings.BACKEND_CORS_ORIGINS:
     app.add_middleware(

frontend/package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@reactgular/chunks": "^1.0.1",
+    "@sentry/tracing": "^7.84.0",
+    "@sentry/vue": "^7.84.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "igv": "^2.15.11",
     "lodash": "^4.17.21",

frontend/src/plugins/index.ts

@@ -9,12 +9,13 @@ import type { App } from 'vue'
 
 import router from '../router'
 import pinia from '../stores'
-import setupMatomo from './matomo'
+import { setupMatomo } from './matomo'
+import { setupSentry } from './sentry'
 import vuetify from './vuetify'
 
 export async function registerPlugins(app: App) {
   app.use(vuetify).use(router).use(pinia)
 
-  // Initialize Matomo
-  await setupMatomo(app, router)
+  // Initialize Matomo and Sentry
+  await Promise.all([setupMatomo(app, router), setupSentry(app, router)])
 }

frontend/src/plugins/matomo.ts

@@ -5,10 +5,11 @@
  */
 import { type App } from 'vue'
 import VueMatomo from 'vue-matomo'
+import { type Router } from 'vue-router'
 
 import { SettingsClient } from '@/api/settings'
 
-async function setupMatomo(app: App, router: any) {
+export async function setupMatomo(app: App, router: Router) {
   try {
     const client = new SettingsClient()
     const response = await client.fetchFrontendSettings()
@@ -27,5 +28,3 @@ async function setupMatomo(app: App, router: any) {
     console.error('Failed to initialize Matomo:', error)
   }
 }
-
-export default setupMatomo

frontend/src/plugins/sentry.ts

@@ -0,0 +1,41 @@
+/**
+ * plugins/sentry.ts
+ *
+ * Integration of sentry into our frontend.
+ */
+import * as Sentry from '@sentry/vue'
+import { type App } from 'vue'
+import { type Router } from 'vue-router'
+
+export async function setupSentry(app: App, router: Router) {
+  Sentry.init({
+    app,
+    dsn: 'https://[email protected]/7',
+    integrations: [
+      new Sentry.BrowserTracing({
+        routingInstrumentation: Sentry.vueRouterInstrumentation(router)
+      }),
+      new Sentry.Replay()
+    ],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 1.0,
+
+    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: [
+      // 'localhost',
+      // '127.0.0.1',
+      /^https:\/\/reev.bihealth.org\//,
+      /^https:\/\/reev.cubi.bihealth.org\//,
+      /^https:\/\/reev-staging.bihealth.org\//,
+      /^https:\/\/reev-staging.cubi.bihealth.org\//
+    ],
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0
+  })
+}