Add sentry to frontend

frontend/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/colors": "^1.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@sentry/react": "^7.108.0",
     "@tanstack/react-query": "^4.24.4",
     "D": "^1.0.0",
     "axios": "^1.6.0",

frontend/src/app.tsx

@@ -12,6 +12,30 @@ import ModalProvider from "./views/groups/modal/AllModalProvider"
 import { GroupNavigationProvider } from "./helpers/context/groupNavigationContext"
 import { MyGroupsRefetchProvider } from "./helpers/context/myGroupsRefetchContext"
 import { ConfirmModalProvider } from "./helpers/context/modal/confirmModalContext"
+import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom"
+import * as Sentry from "@sentry/react"
+
+Sentry.init({
+  dsn: import.meta.env.SENTRY_FRONTEND_DSN,
+  environment: import.meta.env.SENTRY_ENVIRONMENT,
+  integrations: [
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect: React.useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+    }),
+    Sentry.replayIntegration(),
+  ],
+
+  tracesSampleRate: 1.0,
+
+  tracePropagationTargets: ["localhost", "api.staging.vinstraff.no", "api.vinstraff.no"],
+
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+})
 
 const queryClient = new QueryClient()
 

frontend/src/env.d.ts

@@ -1,8 +1,8 @@
-// NB: Also set in env.ts
-
 interface ImportMetaEnv {
   VITE_REDIRECT_URI: string
   AUTH0_CLIENT_ID: string
   AUTH0_ISSUER: string
   VITE_API_URL: string
+  SENTRY_ENVIRONMENT: string
+  SENTRY_FRONTEND_DSN: string
 }

frontend/vite.config.ts

@@ -4,7 +4,7 @@ import react from "@vitejs/plugin-react-swc"
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  envPrefix: ["VITE_", "AUTH0_"],
+  envPrefix: ["VITE_", "AUTH0_", "SENTRY_"],
   server: {
     port: 3000,
   },