Fix Sentry client setup

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/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

@@ -28,6 +28,7 @@ const getSources = defineCachedFunction(
           ...getProxyRequestHeaders(event),
           ...userAgentHeader,
         },
+        params: { format: "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>