Fix frontend Sentry configuration (#2510)

Co-authored-by: Zack Krida <[email protected]>

frontend/Dockerfile

@@ -44,6 +44,7 @@ RUN pnpm install --offline
 # disable telemetry when building the app
 ENV NUXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
+ENV SENTRY_DSN=https://[email protected]/5799642
 
 ARG API_URL
 ARG SEMANTIC_VERSION

frontend/docker-compose.playwright.yml

@@ -16,7 +16,6 @@ services:
     environment:
       # This makes the webserver that Playwright runs show the build
       - DEBUG=pw:webserver
-      - DISABLE_SENTRY=true
       - UPDATE_TAPES=${UPDATE_TAPES:-false}
       - FASTSTART=${FASTSTART:-false}
     cpus: 0.000

frontend/nuxt.config.ts

@@ -313,6 +313,16 @@ const config: NuxtConfig = {
           ? "https://openverse.org"
           : `http://localhost:${port}`),
     },
+    sentry: {
+      config: {
+        // We need to explicitly configure this for the frontend to have
+        // access to it at runtime. On the server side it would be picked
+        // up from the environment; the client-side doesn't have that
+        // luxury of a configured runtime environment, so we need to
+        // tell it what environment it is in.
+        environment: process.env.SENTRY_ENVIRONMENT,
+      },
+    },
   },
 }
 

frontend/package.json

@@ -30,7 +30,7 @@
     "test:unit": "jest",
     "test:unit:watch": "pnpm test:unit --collectCoverage=false --watch",
     "test:playwright": "./bin/playwright.sh",
-    "test:playwright:local": "DISABLE_SENTRY=true pnpm exec playwright test -c test/playwright",
+    "test:playwright:local": "pnpm exec playwright test -c test/playwright",
     "test:playwright:debug": "PWDEBUG=1 pnpm test:playwright:local",
     "test:playwright:recreate-tapes": "rimraf test/tapes && pnpm test:playwright:update-tapes",
     "test:playwright:update-tapes": "UPDATE_TAPES=true pnpm test:playwright",
@@ -65,7 +65,7 @@
     "@nuxtjs/i18n": "^7.0.3",
     "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/redirect-module": "^0.3.1",
-    "@nuxtjs/sentry": "^7.1.4",
+    "@nuxtjs/sentry": "^7.3.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/svg-sprite": "0.5.2",
     "@pinia/nuxt": "0.2.1",

frontend/src/utils/sentry-config.ts

@@ -1,17 +1,12 @@
-import { isProd } from "./node-env"
-
-import type { ModuleConfiguration } from "@nuxtjs/sentry"
+import type { ModuleOptions } from "@nuxtjs/sentry"
 
 /**
  * Get the Sentry configuration based on the current environment.
  * @param isDisabled - whether to disable Sentry
  * @returns the Sentry configuration to use
  */
-export const sentryConfig: ModuleConfiguration = {
+export const sentryConfig: ModuleOptions = {
   dsn: process.env.SENTRY_DSN,
-  disabled: process.env.DISABLE_SENTRY
-    ? true
-    : process.env.SENTRY_DSN === undefined || !isProd,
   logMockCalls: false,
   lazy: true,
   clientConfig: {