Fix Sentry client setup (#5297)

* Fix Sentry client setup

* Pin Storybook version

frontend/nuxt.config.ts

@@ -38,8 +38,10 @@ export default defineNuxtConfig({
       sentry: {
         dsn: "",
         environment: "local",
-        // Release is a build time variable, and as such, is defined in app.config.ts
       },
+      // Release is a build time variable. However, due to the way Sentry is set up, setting it in app.config.ts
+      // does not work, so we set it here using `process.env` to bake in the value at build time.
+      sentryRelease: process.env.SEMANTIC_VERSION,
       plausible: {
         ignoredHostnames: ["localhost", "staging.openverse.org"],
         logIgnoredEvents: true,

frontend/package.json

@@ -108,7 +108,7 @@
     "npm-run-all2": "^7.0.0",
     "nuxt": "^3.14.1592",
     "rimraf": "^6.0.1",
-    "storybook": "^8.3.6",
+    "storybook": "8.3.6",
     "talkback": "^4.2.0",
     "typescript": "5.6.3",
     "vitest": "^2.1.4",

frontend/sentry.client.config.ts

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

frontend/sentry.server.config.ts

@@ -13,3 +13,4 @@ Sentry.init({
   tracesSampleRate: 1.0,
 })
 Sentry.setContext("render context", { platform: "server" })
+Sentry.setTag("platform", "server")

frontend/server/api/sources.ts

@@ -19,14 +19,16 @@ const getSources = defineCachedFunction(
   async (mediaType: SupportedMediaType, event: H3Event) => {
     const apiUrl = useRuntimeConfig(event).public.apiUrl
 
-    consola.info(`Fetching sources for ${mediaType} media`)
+    consola.info(`Fetching ${mediaType} sources.`)
 
     return await $fetch<MediaProvider[]>(
       `${apiUrl}v1/${mediaSlug(mediaType)}/stats/`,
       {
         headers: {
           ...getProxyRequestHeaders(event),
           ...userAgentHeader,
+          "Content-Type": "application/json",
+          Accept: "application/json",
         },
       }
     )

frontend/src/pages/preferences.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 import { computed } from "vue"
 
 import { SWITCHABLE, ON, OFF } from "#shared/constants/feature-flag"
@@ -51,7 +51,11 @@ const featureGroups = computed(() => {
   return featureFlagStore.getFeatureGroups()
 })
 
-const doneHydrating = computed(() => useHydrating())
+const { doneHydrating } = useHydrating()
+
+const captureException = () => {
+  useNuxtApp().$captureException(new Error("Test Sentry Exception"))
+}
 </script>
 
 <template>
@@ -133,5 +137,14 @@ const doneHydrating = computed(() => useHydrating())
 
     <h2>{{ $t("prefPage.storeState") }}</h2>
     <pre><code>{{ flags }}</code></pre>
+
+    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+    <VButton
+      v-if="$config.public.sentry.environment === 'local'"
+      variant="bordered-gray"
+      size="medium"
+      @click="captureException"
+      >Capture Sentry Exception</VButton
+    ><!-- eslint-enable -->
   </VContentPage>
 </template>