Fix

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/pages/image/[id]/index.vue

@@ -71,15 +71,15 @@
 
 <script setup lang="ts">
 import {
-  useHead,
-  useRoute,
+  definePageMeta,
+  firstParam,
+  handledClientSide,
+  showError,
   useAsyncData,
+  useHead,
   useNuxtApp,
-  firstParam,
-  definePageMeta,
+  useRoute,
   validateUUID,
-  showError,
-  handledClientSide,
 } from "#imports"
 
 import axios from "axios"

frontend/src/plugins/errors.ts

@@ -1,11 +1,13 @@
-import { defineNuxtPlugin, useNuxtApp } from "#imports"
+import { defineNuxtPlugin } from "#imports"
 
 import axios from "axios"
 
 import { ERR_UNKNOWN, ErrorCode, errorCodes } from "~/constants/errors"
 import type { FetchingError, RequestKind } from "~/types/fetch-state"
 import type { SupportedSearchType } from "~/constants/media"
 
+import type { NuxtApp } from "#app"
+
 const isValidErrorCode = (
   code: string | undefined | null
 ): code is ErrorCode => {
@@ -72,10 +74,12 @@ export function normalizeFetchingError(
  * based on response code, status, and request kind.
  * @param originalError - the original error, usually an AxiosError
  * @param fetchingError - the normalized error object
+ * @param nuxtApp - the context object
  */
 export function recordError(
   originalError: unknown,
-  fetchingError: FetchingError
+  fetchingError: FetchingError,
+  nuxtApp: NuxtApp
 ) {
   if (fetchingError.statusCode === 429) {
     // These are more readily monitored via the Cloudflare dashboard.
@@ -110,13 +114,13 @@ export function recordError(
      * for Plausible, but do actually affect our Sentry quota enough that it
      * is worth diverting them.
      */
-    const { $sendCustomEvent } = useNuxtApp()
+    const { $sendCustomEvent } = nuxtApp
     $sendCustomEvent("NETWORK_ERROR", {
       requestKind: fetchingError.requestKind,
       searchType: fetchingError.searchType,
     })
   } else {
-    const { $sentry } = useNuxtApp()
+    const { $sentry } = nuxtApp
     if ($sentry && $sentry.captureException) {
       $sentry.captureException(originalError, {
         extra: { fetchingError },
@@ -130,22 +134,18 @@ export function recordError(
   }
 }
 
-export function createProcessFetchingError(): typeof normalizeFetchingError {
+export default defineNuxtPlugin(async (nuxtApp) => {
   function processFetchingError(
     ...[originalError, ...args]: Parameters<typeof normalizeFetchingError>
   ) {
     const fetchingError = normalizeFetchingError(originalError, ...args)
-    recordError(originalError, fetchingError)
+    recordError(originalError, fetchingError, nuxtApp as NuxtApp)
     return fetchingError
   }
 
-  return processFetchingError
-}
-
-export default defineNuxtPlugin(async () => {
   return {
     provide: {
-      processFetchingError: createProcessFetchingError(),
+      processFetchingError: processFetchingError,
     },
   }
 })

frontend/src/stores/media/single-result.ts

@@ -1,4 +1,4 @@
-import { useNuxtApp } from "#imports"
+import { tryUseNuxtApp } from "#imports"
 
 import { defineStore } from "pinia"
 
@@ -136,31 +136,27 @@ export const useSingleResultStore = defineStore("single-result", {
       if (existingItem) {
         return existingItem
       }
-      return await this.fetchMediaItem(type, id)
-    },
 
-    /**
-     * Fetch the media item from the API.
-     * On error, send the error to Sentry and return null.
-     */
-    async fetchMediaItem<MediaType extends SupportedMediaType>(
-      type: MediaType,
-      id: string
-    ) {
       this._updateFetchState("start")
+      const nuxtApp = tryUseNuxtApp()
+      if (!nuxtApp) {
+        throw new Error(
+          "No nuxtApp available in single media store's fetch function"
+        )
+      }
 
       try {
-        const { $openverseApiToken: accessToken } = useNuxtApp()
+        const accessToken = nuxtApp?.$openverseApiToken
         const client = createApiClient({ accessToken })
 
         const item = await client.getSingleMedia(type, id)
 
         this.setMediaItem(item)
         this._updateFetchState("end")
 
-        return item as DetailFromMediaType<MediaType>
+        return item as DetailFromMediaType<typeof type>
       } catch (error) {
-        const { $processFetchingError } = useNuxtApp()
+        const { $processFetchingError } = nuxtApp
         const errorData = $processFetchingError(error, type, "single-result", {
           id,
         })