diff --git a/frontend/package.json b/frontend/package.json index 57a88a00..4c81f98a 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 47e27f88..ad231807 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.2.0) + '@sentry/react': + specifier: ^7.108.0 + version: 7.108.0(react@18.2.0) '@tanstack/react-query': specifier: ^4.24.4 version: 4.24.4(react-dom@18.2.0)(react@18.2.0) @@ -689,6 +692,91 @@ packages: engines: {node: '>=14.0.0'} dev: false + /@sentry-internal/feedback@7.108.0: + resolution: {integrity: sha512-8JcgZEnk1uWrXJhsd3iRvFtEiVeaWOEhN0NZwhwQXHfvODqep6JtrkY1yCIyxbpA37aZmrPc2JhyotRERGfUjg==} + engines: {node: '>=12'} + dependencies: + '@sentry/core': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry-internal/replay-canvas@7.108.0: + resolution: {integrity: sha512-R5tvjGqWUV5vSk0N1eBgVW7wIADinrkfDEBZ9FyKP2mXHBobsyNGt30heJDEqYmVqluRqjU2NuIRapsnnrpGnA==} + engines: {node: '>=12'} + dependencies: + '@sentry/core': 7.108.0 + '@sentry/replay': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry-internal/tracing@7.108.0: + resolution: {integrity: sha512-zuK5XsTsb+U+hgn3SPetYDAogrXsM16U/LLoMW7+TlC6UjlHGYQvmX3o+M2vntejoU1QZS8m1bCAZSMWEypAEw==} + engines: {node: '>=8'} + dependencies: + '@sentry/core': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry/browser@7.108.0: + resolution: {integrity: sha512-FNpzsdTvGvdHJMUelqEouUXMZU7jC+dpN7CdT6IoHVVFEkoAgrjMVUhXZoQ/dmCkdKWHmFSQhJ8Fm6V+e9Aq0A==} + engines: {node: '>=8'} + dependencies: + '@sentry-internal/feedback': 7.108.0 + '@sentry-internal/replay-canvas': 7.108.0 + '@sentry-internal/tracing': 7.108.0 + '@sentry/core': 7.108.0 + '@sentry/replay': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry/core@7.108.0: + resolution: {integrity: sha512-I/VNZCFgLASxHZaD0EtxZRM34WG9w2gozqgrKGNMzAymwmQ3K9g/1qmBy4e6iS3YRptb7J5UhQkZQHrcwBbjWQ==} + engines: {node: '>=8'} + dependencies: + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry/react@7.108.0(react@18.2.0): + resolution: {integrity: sha512-C60arh5/gtO42eMU9l34aWlKDLZUO+1j1goaEf/XRSwUcyJS9tbJrs+mT4nbKxUsEG714It2gRbfSEvh1eXmCg==} + engines: {node: '>=8'} + peerDependencies: + react: 15.x || 16.x || 17.x || 18.x + dependencies: + '@sentry/browser': 7.108.0 + '@sentry/core': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + dev: false + + /@sentry/replay@7.108.0: + resolution: {integrity: sha512-jo8fDOzcZJclP1+4n9jUtVxTlBFT9hXwxhAMrhrt70FV/nfmCtYQMD3bzIj79nwbhUtFP6pN39JH1o7Xqt1hxQ==} + engines: {node: '>=12'} + dependencies: + '@sentry-internal/tracing': 7.108.0 + '@sentry/core': 7.108.0 + '@sentry/types': 7.108.0 + '@sentry/utils': 7.108.0 + dev: false + + /@sentry/types@7.108.0: + resolution: {integrity: sha512-bKtHITmBN3kqtqE5eVvL8mY8znM05vEodENwRpcm6TSrrBjC2RnwNWVwGstYDdHpNfFuKwC8mLY9bgMJcENo8g==} + engines: {node: '>=8'} + dev: false + + /@sentry/utils@7.108.0: + resolution: {integrity: sha512-a45yEFD5qtgZaIFRAcFkG8C8lnDzn6t4LfLXuV4OafGAy/3ZAN3XN8wDnrruHkiUezSSANGsLg3bXaLW/JLvJw==} + engines: {node: '>=8'} + dependencies: + '@sentry/types': 7.108.0 + dev: false + /@swc/core-darwin-arm64@1.3.93: resolution: {integrity: sha512-gEKgk7FVIgltnIfDO6GntyuQBBlAYg5imHpRgLxB1zSI27ijVVkksc6QwISzFZAhKYaBWIsFSVeL9AYSziAF7A==} engines: {node: '>=10'} @@ -1791,6 +1879,12 @@ packages: '@types/hast': 3.0.3 dev: false + /hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + dependencies: + react-is: 16.13.1 + dev: false + /html-url-attributes@3.0.0: resolution: {integrity: sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==} dev: false diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx index 707b2d50..d36a1a03 100644 --- a/frontend/src/app.tsx +++ b/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() diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts index 3daeaf66..7b529e99 100644 --- a/frontend/src/env.d.ts +++ b/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 } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index b27915ba..1726a8e4 100644 --- a/frontend/vite.config.ts +++ b/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, },