Add Sentry Nuxt module

frontend/.gitignore

@@ -43,3 +43,6 @@ src/locales/scripts/wp-locales.json
 # To prevent accidentally adding a hardcoded robots.txt, see
 # /src/server-middleware/robots.js for the robots.txt file.
 src/static/robots.txt
+
+# Sentry Config File
+.env.sentry-build-plugin

frontend/nuxt.config.ts

@@ -67,6 +67,7 @@ export default defineNuxtConfig({
     "@nuxt/test-utils/module",
     "@nuxtjs/sitemap",
     "@nuxtjs/robots",
+    "@sentry/nuxt/module",
   ],
   routeRules: {
     "/photos/**": { redirect: { to: "/image/**", statusCode: 301 } },
@@ -126,4 +127,13 @@ export default defineNuxtConfig({
     trailingSlash: false,
     vueI18n: "./vue-i18n",
   },
+  sentry: {
+    sourceMapsUploadOptions: {
+      org: "openverse",
+      project: "openverse-frontend",
+    },
+  },
+  sourcemap: {
+    client: "hidden",
+  },
 })

frontend/package.json

@@ -63,15 +63,15 @@
     "@nuxtjs/sitemap": "^7.0.0",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@pinia/nuxt": "^0.9.0",
-    "@sentry/node": "^8.26.0",
-    "@sentry/vue": "^8.26.0",
+    "@sentry/nuxt": "^8.45.0",
     "@tailwindcss/typography": "^0.5.13",
     "@vueuse/core": "^12.0.0",
     "@wordpress/is-shallow-equal": "^5.3.0",
     "async-mutex": "^0.5.0",
     "axios": "^1.7.2",
     "axios-mock-adapter": "^1.22.0",
     "clipboard": "^2.0.11",
+    "dotenv": "^16.4.7",
     "focus-trap": "^7.5.4",
     "focus-visible": "^5.2.0",
     "pinia": "^2.2.5",

frontend/sentry.client.config.ts

@@ -0,0 +1,16 @@
+import { useAppConfig, useRuntimeConfig } from "#imports"
+
+import * as Sentry from "@sentry/nuxt"
+
+Sentry.init({
+  dsn: useRuntimeConfig().public.sentry.dsn,
+  environment: useRuntimeConfig().public.sentry.environment,
+  release: useAppConfig().semanticVersion,
+  ignoreErrors: [
+    // Can be safely ignored, @see https://github.com/WICG/resize-observer/issues/38
+    /ResizeObserver loop limit exceeded/i,
+  ],
+
+  tracesSampleRate: 1.0,
+})
+Sentry.setContext("render context", { platform: "client" })

frontend/sentry.server.config.ts

@@ -0,0 +1,15 @@
+import * as Sentry from "@sentry/nuxt"
+import dotenv from "dotenv"
+
+// Necessary for loading environment variables before Nuxt is loaded
+// @see the section on server setup: https://nuxt.com/modules/sentry
+dotenv.config()
+
+Sentry.init({
+  dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NUXT_PUBLIC_SENTRY_ENVIRONMENT,
+  release: process.env.SEMANTIC_VERSION,
+
+  tracesSampleRate: 1.0,
+})
+Sentry.setContext("render context", { platform: "server" })

frontend/typings/extend.d.ts

@@ -6,18 +6,22 @@ import type {
 import type { Sentry } from "@sentry/node"
 // Fix until the libraries are updated to correctly augment `vue`.
 // See https://nuxt.com/blog/v3-13#vue-typescript-changes
-
-declare module "h3" {
-  interface H3EventContext {
-    $sentry?: Sentry
-  }
-}
-
 declare module "@vue/runtime-core" {
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface ComponentCustomProperties extends _ComponentCustomProperties {}
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface ComponentCustomOptions extends _ComponentCustomOptions {}
 }
 
+declare module "@sentry/nuxt" {
+  const Sentry: Sentry
+  export = Sentry
+}
+
+declare module "#app" {
+  interface NuxtApp {
+    $sentry: Sentry
+  }
+}
+
 export {}

package.json

@@ -28,10 +28,12 @@
   },
   "pnpm": {
     "overrides": {
+      "nitropack": "~2.9.7",
       "vite": "^6.0.1",
       "@intlify/core-base": "10.0.5",
       "@intlify/message-compiler": "10.0.5",
       "@intlify/shared": "10.0.5",
+      "@vercel/nft": "^0.27.4",
       "@vue/compiler-sfc": "3.5.13"
     }
   }