From b5cc58b8b54ca19a5895779e9b6c267b25b6224f Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 24 Dec 2024 06:46:01 +0300
Subject: [PATCH] Fix Sentry client setup (#5297)

* Fix Sentry client setup

* Pin Storybook version
---
 frontend/nuxt.config.ts            |  4 +++-
 frontend/package.json              |  2 +-
 frontend/sentry.client.config.ts   |  5 +++--
 frontend/sentry.server.config.ts   |  1 +
 frontend/server/api/sources.ts     |  4 +++-
 frontend/src/app.config.ts         |  5 -----
 frontend/src/pages/preferences.vue | 17 +++++++++++++++--
 pnpm-lock.yaml                     |  2 +-
 8 files changed, 27 insertions(+), 13 deletions(-)
 delete mode 100644 frontend/src/app.config.ts

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index ff450e7a3ef..bf28acf2d57 100644
--- a/frontend/nuxt.config.ts
+++ b/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,
diff --git a/frontend/package.json b/frontend/package.json
index ab1b6a26943..45d19b14e2f 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/sentry.client.config.ts b/frontend/sentry.client.config.ts
index 68c78be6808..28489ebbe8d 100644
--- a/frontend/sentry.client.config.ts
+++ b/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")
diff --git a/frontend/sentry.server.config.ts b/frontend/sentry.server.config.ts
index d356f895cc6..f64fe4099ba 100644
--- a/frontend/sentry.server.config.ts
+++ b/frontend/sentry.server.config.ts
@@ -13,3 +13,4 @@ Sentry.init({
   tracesSampleRate: 1.0,
 })
 Sentry.setContext("render context", { platform: "server" })
+Sentry.setTag("platform", "server")
diff --git a/frontend/server/api/sources.ts b/frontend/server/api/sources.ts
index 7351ed58115..4a88b0a7c86 100644
--- a/frontend/server/api/sources.ts
+++ b/frontend/server/api/sources.ts
@@ -19,7 +19,7 @@ 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/`,
@@ -27,6 +27,8 @@ const getSources = defineCachedFunction(
         headers: {
           ...getProxyRequestHeaders(event),
           ...userAgentHeader,
+          "Content-Type": "application/json",
+          Accept: "application/json",
         },
       }
     )
diff --git a/frontend/src/app.config.ts b/frontend/src/app.config.ts
deleted file mode 100644
index 35052894b02..00000000000
--- a/frontend/src/app.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { defineAppConfig } from "#imports"
-
-export default defineAppConfig({
-  semanticVersion: import.meta.env.SEMANTIC_VERSION as string,
-})
diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
index a3a406547a9..839ad618c12 100644
--- a/frontend/src/pages/preferences.vue
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb794ee4b0c..356f9c26350 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,7 +223,7 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1
       storybook:
-        specifier: ^8.3.6
+        specifier: 8.3.6
         version: 8.3.6
       talkback:
         specifier: ^4.2.0