From 0f7ee9995f08402520ed128b8d9e374577afca21 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 20 Dec 2024 08:46:49 +0300
Subject: [PATCH] Fix Sentry client setup

---
 frontend/nuxt.config.ts            |  4 +++-
 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 +++++++++++++++--
 6 files changed, 25 insertions(+), 11 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/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>