From 7199e417346e00d94b1faa2af3bde7c6294b5bcd Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Fri, 19 Aug 2022 20:57:43 +0300
Subject: [PATCH 01/15] Returns all the error

---
 src/stores/media/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index ed33f8804b..63ea5edabd 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -386,7 +386,8 @@ export const useMediaStore = defineStore('media', {
               }`
       } else {
         errorMessage =
-          error instanceof Error ? error.message : 'Oops! Something went wrong'
+          /*Return info on the error message by appending all details*/
+          error instanceof Error ? error.message : JSON.stringify(error)
       }
       this._updateFetchState(mediaType, 'end', errorMessage)
       if (!axios.isAxiosError(error)) {

From 152f183a2089830ca41cb51dec3eb37a0bda2892 Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Fri, 19 Aug 2022 21:22:17 +0300
Subject: [PATCH 02/15] Sentry Clarify Error

---
 src/stores/media/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index 63ea5edabd..fb922b7394 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 
 import axios from 'axios'
 
+import * as Sentry from '@sentry/browser'
+
 import { warn } from '~/utils/console'
 import { hash, rand as prng } from '~/utils/prng'
 import prepareSearchQueryParams from '~/utils/prepare-search-query-params'
@@ -385,9 +387,13 @@ export const useMediaStore = defineStore('media', {
                 error.response?.status ?? 'unknown'
               }`
       } else {
+        /*Capture the error and all of its details using $sentry */
+        Sentry.captureEvent({
+          message: `Error fetching ${mediaType}`,
+          extra: { error },
+        })
         errorMessage =
-          /*Return info on the error message by appending all details*/
-          error instanceof Error ? error.message : JSON.stringify(error)
+          error instanceof Error ? error.message : 'Oops! Something went wrong'
       }
       this._updateFetchState(mediaType, 'end', errorMessage)
       if (!axios.isAxiosError(error)) {

From b498f71054cbea12176a0bb18a891d2f043ccd2c Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Tue, 23 Aug 2022 14:45:01 +0300
Subject: [PATCH 03/15] sentry add context

---
 src/stores/media/index.ts     | 4 +---
 test/unit/test-utils/pinia.js | 6 ++++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index fb922b7394..bebeb9f52e 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -2,8 +2,6 @@ import { defineStore } from 'pinia'
 
 import axios from 'axios'
 
-import * as Sentry from '@sentry/browser'
-
 import { warn } from '~/utils/console'
 import { hash, rand as prng } from '~/utils/prng'
 import prepareSearchQueryParams from '~/utils/prepare-search-query-params'
@@ -388,7 +386,7 @@ export const useMediaStore = defineStore('media', {
               }`
       } else {
         /*Capture the error and all of its details using $sentry */
-        Sentry.captureEvent({
+        this.$nuxt.$sentry.captureEvent({
           message: `Error fetching ${mediaType}`,
           extra: { error },
         })
diff --git a/test/unit/test-utils/pinia.js b/test/unit/test-utils/pinia.js
index 7a21c51d03..626ff189ee 100644
--- a/test/unit/test-utils/pinia.js
+++ b/test/unit/test-utils/pinia.js
@@ -5,6 +5,12 @@ export const createPinia = () =>
   pinia.createPinia().use(() => ({
     $nuxt: {
       $openverseApiToken: '',
+      $sentry: {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        captureException: () => {},
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        captureEvent: () => {},
+      },
     },
   }))
 

From 7dce5b7308b4adc98d0fd65d59ebfb39baa75ab7 Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Tue, 23 Aug 2022 16:47:55 +0300
Subject: [PATCH 04/15] handle media error with sentry

---
 src/stores/media/index.ts | 55 +++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index bebeb9f52e..87f3852b12 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -369,6 +369,10 @@ export const useMediaStore = defineStore('media', {
       }
     },
 
+    //Handles errors for media fetches and sets the fetch state accordingly
+    //Reported errors are logged to Sentry
+    //TODO: Handle errors for media fetches
+
     async handleMediaError({
       mediaType,
       error,
@@ -378,25 +382,48 @@ export const useMediaStore = defineStore('media', {
     }) {
       let errorMessage
       if (axios.isAxiosError(error)) {
-        errorMessage =
-          error.response?.status === 500
-            ? 'There was a problem with our servers'
-            : `Request failed with status ${
-                error.response?.status ?? 'unknown'
-              }`
+        // If the error is an axios error:
+        // If the error has a response property, and recieved a response that is not in the 2xx range,
+        // then the error is logged to Sentry
+        if (error.response && error.response.status >= 300) {
+          errorMessage = `Error fetching ${mediaType} from API. Request failed with status code: ${error.response.status}`
+          this.$nuxt.$sentry.captureEvent({
+            message: errorMessage,
+            extra: {
+              error,
+            },
+          })
+        } else if (!error.response && error.request) {
+          // If the error has a request property, but no response, then we capture the event in Sentry
+          errorMessage = `Error fetching ${mediaType} from API. No response received from the server`
+          this.$nuxt.$sentry.captureEvent({
+            message: errorMessage,
+            extra: {
+              error,
+            },
+          })
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          errorMessage = `Error fetching ${mediaType} from API. Unknown Axios error`
+          this.$nuxt.$sentry.captureEvent({
+            message: errorMessage,
+            extra: {
+              error,
+            },
+          })
+        }
       } else {
-        /*Capture the error and all of its details using $sentry */
+        // If the error is not an axios error, then we capture the event in Sentry
+        errorMessage = `Error fetching ${mediaType} from API. Unknown error`
         this.$nuxt.$sentry.captureEvent({
-          message: `Error fetching ${mediaType}`,
-          extra: { error },
+          message: errorMessage,
+          extra: {
+            error,
+          },
         })
-        errorMessage =
-          error instanceof Error ? error.message : 'Oops! Something went wrong'
       }
+
       this._updateFetchState(mediaType, 'end', errorMessage)
-      if (!axios.isAxiosError(error)) {
-        throw new Error(errorMessage)
-      }
     },
 
     setMediaProperties(

From 20957e41ca737713ab3c3507a9052926272ec944 Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Tue, 23 Aug 2022 17:02:53 +0300
Subject: [PATCH 05/15] unit tests for handle media error function

---
 src/stores/media/index.ts                  | 3 +++
 test/unit/specs/stores/media-store.spec.js | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index 87f3852b12..c76b89dfbb 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -424,6 +424,9 @@ export const useMediaStore = defineStore('media', {
       }
 
       this._updateFetchState(mediaType, 'end', errorMessage)
+      if (!axios.isAxiosError(error)) {
+        throw new Error(errorMessage)
+      }
     },
 
     setMediaProperties(
diff --git a/test/unit/specs/stores/media-store.spec.js b/test/unit/specs/stores/media-store.spec.js
index 2ec202e0b2..6c2d0dd0e2 100644
--- a/test/unit/specs/stores/media-store.spec.js
+++ b/test/unit/specs/stores/media-store.spec.js
@@ -372,7 +372,7 @@ describe('Media Store', () => {
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
       expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
-        'There was a problem with our servers'
+        'Error fetching audio from API. Request failed with status code: 500'
       )
     })
 
@@ -382,14 +382,14 @@ describe('Media Store', () => {
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
       expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
-        'Request failed with status 403'
+        'Error fetching audio from API. Request failed with status code: 403'
       )
     })
 
     it('handleMediaError throws a new error on error when server did not respond', async () => {
       const mediaStore = useMediaStore()
 
-      const error = new Error('Server did not respond')
+      const error = new Error('Error fetching audio from API. Unknown error')
       await expect(
         mediaStore.handleMediaError({ mediaType: AUDIO, error })
       ).rejects.toThrow(error.message)

From 33138ae7c41f56e16f96c6823b315c43a08685b3 Mon Sep 17 00:00:00 2001
From: Ramadan Omar <55840806+ramadanomar@users.noreply.github.com>
Date: Tue, 23 Aug 2022 17:12:59 +0300
Subject: [PATCH 06/15] Update src/stores/media/index.ts

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 src/stores/media/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index c76b89dfbb..a8a3d6b53e 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -385,7 +385,7 @@ export const useMediaStore = defineStore('media', {
         // If the error is an axios error:
         // If the error has a response property, and recieved a response that is not in the 2xx range,
         // then the error is logged to Sentry
-        if (error.response && error.response.status >= 300) {
+        if (error.response) {
           errorMessage = `Error fetching ${mediaType} from API. Request failed with status code: ${error.response.status}`
           this.$nuxt.$sentry.captureEvent({
             message: errorMessage,

From 34a49e1b55660118988947169cf6f8a06a418666 Mon Sep 17 00:00:00 2001
From: Ramadan Omar <55840806+ramadanomar@users.noreply.github.com>
Date: Tue, 23 Aug 2022 17:13:07 +0300
Subject: [PATCH 07/15] Update src/stores/media/index.ts

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 src/stores/media/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index a8a3d6b53e..e65ea2d150 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -393,7 +393,7 @@ export const useMediaStore = defineStore('media', {
               error,
             },
           })
-        } else if (!error.response && error.request) {
+        } else if (error.request) {
           // If the error has a request property, but no response, then we capture the event in Sentry
           errorMessage = `Error fetching ${mediaType} from API. No response received from the server`
           this.$nuxt.$sentry.captureEvent({

From eb6f299690ff985acaf185fc290bb8441949984f Mon Sep 17 00:00:00 2001
From: Ramadan Omar <55840806+ramadanomar@users.noreply.github.com>
Date: Tue, 23 Aug 2022 19:02:48 +0300
Subject: [PATCH 08/15] Apply suggestions from code review

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 src/stores/media/index.ts | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index e65ea2d150..8de809144c 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -387,40 +387,16 @@ export const useMediaStore = defineStore('media', {
         // then the error is logged to Sentry
         if (error.response) {
           errorMessage = `Error fetching ${mediaType} from API. Request failed with status code: ${error.response.status}`
-          this.$nuxt.$sentry.captureEvent({
-            message: errorMessage,
-            extra: {
-              error,
-            },
-          })
         } else if (error.request) {
           // If the error has a request property, but no response, then we capture the event in Sentry
           errorMessage = `Error fetching ${mediaType} from API. No response received from the server`
-          this.$nuxt.$sentry.captureEvent({
-            message: errorMessage,
-            extra: {
-              error,
-            },
-          })
         } else {
           // Something happened in setting up the request that triggered an Error
           errorMessage = `Error fetching ${mediaType} from API. Unknown Axios error`
-          this.$nuxt.$sentry.captureEvent({
-            message: errorMessage,
-            extra: {
-              error,
-            },
-          })
         }
       } else {
         // If the error is not an axios error, then we capture the event in Sentry
         errorMessage = `Error fetching ${mediaType} from API. Unknown error`
-        this.$nuxt.$sentry.captureEvent({
-          message: errorMessage,
-          extra: {
-            error,
-          },
-        })
       }
 
       this._updateFetchState(mediaType, 'end', errorMessage)

From 2484d73db88222f59c673d1b089da10392b50b03 Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Tue, 23 Aug 2022 19:04:04 +0300
Subject: [PATCH 09/15] refactors code

---
 src/stores/media/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index 8de809144c..f4ab073fe5 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -399,6 +399,13 @@ export const useMediaStore = defineStore('media', {
         errorMessage = `Error fetching ${mediaType} from API. Unknown error`
       }
 
+      this.$nuxt.$sentry.captureEvent({
+        message: errorMessage,
+        extra: {
+          error,
+        },
+      })
+
       this._updateFetchState(mediaType, 'end', errorMessage)
       if (!axios.isAxiosError(error)) {
         throw new Error(errorMessage)

From dd1f2f54a7591f3f16ec07900f0563164c116219 Mon Sep 17 00:00:00 2001
From: Ramadan Omar <55840806+ramadanomar@users.noreply.github.com>
Date: Thu, 25 Aug 2022 17:29:46 +0300
Subject: [PATCH 10/15] Update src/stores/media/index.ts

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 src/stores/media/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index f4ab073fe5..2ebe4046fe 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -369,9 +369,8 @@ export const useMediaStore = defineStore('media', {
       }
     },
 
-    //Handles errors for media fetches and sets the fetch state accordingly
-    //Reported errors are logged to Sentry
-    //TODO: Handle errors for media fetches
+    // Handles errors for media fetches and sets the fetch state accordingly
+    // Reported errors are logged to Sentry
 
     async handleMediaError({
       mediaType,

From c09df7ea024e3752a0563d2282d753286d509bd0 Mon Sep 17 00:00:00 2001
From: Ramadan Omar <55840806+ramadanomar@users.noreply.github.com>
Date: Thu, 25 Aug 2022 17:30:37 +0300
Subject: [PATCH 11/15] Update test/unit/test-utils/pinia.js

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
---
 test/unit/test-utils/pinia.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/test/unit/test-utils/pinia.js b/test/unit/test-utils/pinia.js
index 626ff189ee..0f46d3abf0 100644
--- a/test/unit/test-utils/pinia.js
+++ b/test/unit/test-utils/pinia.js
@@ -6,10 +6,8 @@ export const createPinia = () =>
     $nuxt: {
       $openverseApiToken: '',
       $sentry: {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        captureException: () => {},
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        captureEvent: () => {},
+        captureException: jest.fn(),
+        captureEvent: jest.fn(),
       },
     },
   }))

From 78879769eae33d6b61d2389949867719f0ac7126 Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Mon, 29 Aug 2022 14:51:35 +0300
Subject: [PATCH 12/15] axios error unit test

---
 test/unit/specs/stores/media-store.spec.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/test/unit/specs/stores/media-store.spec.js b/test/unit/specs/stores/media-store.spec.js
index 6c2d0dd0e2..e342c9ce22 100644
--- a/test/unit/specs/stores/media-store.spec.js
+++ b/test/unit/specs/stores/media-store.spec.js
@@ -386,6 +386,21 @@ describe('Media Store', () => {
       )
     })
 
+    it('handleMediaError handles unknown Axios Error', () => {
+      const mediaType = AUDIO
+      //Error is an Axios error with no response or request property
+      const error = {
+        response: undefined,
+        request: undefined,
+        message: 'Unknown Axios Error',
+      }
+      const mediaStore = useMediaStore()
+      mediaStore.handleMediaError({ mediaType, error })
+      expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
+        'Error fetching audio from API. Unknown Axios error'
+      )
+    })
+
     it('handleMediaError throws a new error on error when server did not respond', async () => {
       const mediaStore = useMediaStore()
 

From 05c07035c49465a3e43fe00532d58bcf675eb01a Mon Sep 17 00:00:00 2001
From: ramadanomar <ramadan.omaarr@gmail.com>
Date: Tue, 30 Aug 2022 16:17:46 +0300
Subject: [PATCH 13/15] updates unit test to include sentry calls

---
 src/stores/media/index.ts                  |  1 +
 test/unit/setup-after-env.js               | 10 +++++++
 test/unit/specs/stores/media-store.spec.js | 34 +++++++---------------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index 2ebe4046fe..e63002f711 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -401,6 +401,7 @@ export const useMediaStore = defineStore('media', {
       this.$nuxt.$sentry.captureEvent({
         message: errorMessage,
         extra: {
+          mediaType,
           error,
         },
       })
diff --git a/test/unit/setup-after-env.js b/test/unit/setup-after-env.js
index c44951a680..91e484b822 100644
--- a/test/unit/setup-after-env.js
+++ b/test/unit/setup-after-env.js
@@ -1 +1,11 @@
+import Vue from 'vue'
 import '@testing-library/jest-dom'
+
+Vue.prototype.$nuxt = {
+  context: {
+    $sentry: {
+      captureException: jest.fn(),
+      captureEvent: jest.fn(),
+    },
+  },
+}
diff --git a/test/unit/specs/stores/media-store.spec.js b/test/unit/specs/stores/media-store.spec.js
index e342c9ce22..4ec1d832e7 100644
--- a/test/unit/specs/stores/media-store.spec.js
+++ b/test/unit/specs/stores/media-store.spec.js
@@ -368,12 +368,14 @@ describe('Media Store', () => {
 
     it('handleMediaError handles 500 error', () => {
       const mediaType = AUDIO
-      const error = { response: { status: 500, message: 'Server error' } }
+      const error = { response: { status: 500 } }
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
-      expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
-        'Error fetching audio from API. Request failed with status code: 500'
-      )
+      expect(mediaStore.$nuxt.$sentry.captureEvent).toHaveBeenCalledWith({
+        message:
+          'Error fetching audio from API. Request failed with status code: 500',
+        extra: { mediaType, error },
+      })
     })
 
     it('handleMediaError handles a 403 error', () => {
@@ -381,29 +383,15 @@ describe('Media Store', () => {
       const error = { response: { status: 403 } }
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
-      expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
-        'Error fetching audio from API. Request failed with status code: 403'
-      )
-    })
-
-    it('handleMediaError handles unknown Axios Error', () => {
-      const mediaType = AUDIO
-      //Error is an Axios error with no response or request property
-      const error = {
-        response: undefined,
-        request: undefined,
-        message: 'Unknown Axios Error',
-      }
-      const mediaStore = useMediaStore()
-      mediaStore.handleMediaError({ mediaType, error })
-      expect(mediaStore.mediaFetchState[mediaType].fetchingError).toEqual(
-        'Error fetching audio from API. Unknown Axios error'
-      )
+      expect(mediaStore.$nuxt.$sentry.captureEvent).toHaveBeenCalledWith({
+        message:
+          'Error fetching audio from API. Request failed with status code: 403',
+        extra: { mediaType, error },
+      })
     })
 
     it('handleMediaError throws a new error on error when server did not respond', async () => {
       const mediaStore = useMediaStore()
-
       const error = new Error('Error fetching audio from API. Unknown error')
       await expect(
         mediaStore.handleMediaError({ mediaType: AUDIO, error })

From fd255b9974ab43b60bc5fc2c70aadefccef26bbe Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 30 Aug 2022 17:34:02 +0300
Subject: [PATCH 14/15] Add more tests for Axios and non-Axios errors

---
 test/unit/specs/stores/media-store.spec.js | 72 ++++++++++++++++++----
 1 file changed, 61 insertions(+), 11 deletions(-)

diff --git a/test/unit/specs/stores/media-store.spec.js b/test/unit/specs/stores/media-store.spec.js
index 4ec1d832e7..ca8806b65e 100644
--- a/test/unit/specs/stores/media-store.spec.js
+++ b/test/unit/specs/stores/media-store.spec.js
@@ -1,3 +1,5 @@
+import { AxiosError } from 'axios'
+
 import { setActivePinia, createPinia } from '~~/test/unit/test-utils/pinia'
 
 import { deepClone } from '~/utils/clone'
@@ -7,11 +9,6 @@ import { useSearchStore } from '~/stores/search'
 import { ALL_MEDIA, AUDIO, IMAGE, supportedMediaTypes } from '~/constants/media'
 import { initialFetchState } from '~/composables/use-fetch-state'
 
-jest.mock('axios', () => ({
-  ...jest.requireActual('axios'),
-  isAxiosError: jest.fn((obj) => 'response' in obj),
-}))
-
 const uuids = [
   '0dea3af1-27a4-4635-bab6-4b9fb76a59f5',
   '32c22b5b-f2f9-47db-b64f-6b86c2431942',
@@ -368,7 +365,13 @@ describe('Media Store', () => {
 
     it('handleMediaError handles 500 error', () => {
       const mediaType = AUDIO
-      const error = { response: { status: 500 } }
+      const error = new AxiosError(
+        '500 server error',
+        'ERR_BAD_RESPONSE',
+        undefined,
+        { path: '/foo' },
+        { status: 500 }
+      )
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
       expect(mediaStore.$nuxt.$sentry.captureEvent).toHaveBeenCalledWith({
@@ -380,7 +383,13 @@ describe('Media Store', () => {
 
     it('handleMediaError handles a 403 error', () => {
       const mediaType = AUDIO
-      const error = { response: { status: 403 } }
+      const error = new AxiosError(
+        '403 error',
+        'ERR_BAD_REQUEST',
+        undefined,
+        { path: '/foo' },
+        { status: 403 }
+      )
       const mediaStore = useMediaStore()
       mediaStore.handleMediaError({ mediaType, error })
       expect(mediaStore.$nuxt.$sentry.captureEvent).toHaveBeenCalledWith({
@@ -388,14 +397,55 @@ describe('Media Store', () => {
           'Error fetching audio from API. Request failed with status code: 403',
         extra: { mediaType, error },
       })
+      expect(mediaStore.mediaFetchState.audio.fetchingError).toEqual(
+        'Error fetching audio from API. Request failed with status code: 403'
+      )
+      expect(mediaStore.mediaFetchState.audio.isFetching).toEqual(false)
     })
 
-    it('handleMediaError throws a new error on error when server did not respond', async () => {
+    it('handleMediaError handles an error when server did not respond', async () => {
       const mediaStore = useMediaStore()
-      const error = new Error('Error fetching audio from API. Unknown error')
+      const mediaType = AUDIO
+      const noResponseAxiosError = new AxiosError(
+        'Unknown error',
+        'ETIMEDOUT',
+        undefined,
+        {
+          path: '/foo',
+        }
+      )
+      await mediaStore.handleMediaError({
+        mediaType,
+        error: noResponseAxiosError,
+      })
+
+      const expectedErrorMessage =
+        'Error fetching audio from API. No response received from the server'
+      expect(mediaStore.mediaFetchState.audio.fetchingError).toEqual(
+        expectedErrorMessage
+      )
+      expect(mediaStore.mediaFetchState.audio.isFetching).toEqual(false)
+      expect(mediaStore.$nuxt.$sentry.captureEvent).toHaveBeenCalledWith({
+        message: expectedErrorMessage,
+        extra: { mediaType, error: noResponseAxiosError },
+      })
+    })
+
+    it('handleMediaError re-throws a non-Axios error', async () => {
+      const mediaStore = useMediaStore()
+      const nonAxiosError = new Error('non-Axios error')
+
+      const expectedErrorMessage =
+        'Error fetching audio from API. Unknown error'
       await expect(
-        mediaStore.handleMediaError({ mediaType: AUDIO, error })
-      ).rejects.toThrow(error.message)
+        mediaStore.handleMediaError({
+          mediaType: AUDIO,
+          error: nonAxiosError,
+        })
+      ).rejects.toThrow(expectedErrorMessage)
+      expect(mediaStore.mediaFetchState.audio.fetchingError).toEqual(
+        expectedErrorMessage
+      )
     })
 
     describe('setMediaProperties', () => {

From 6915b35296528be64f57e770d17fbca037d834ed Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 31 Aug 2022 15:16:41 -0400
Subject: [PATCH 15/15] Update src/stores/media/index.ts

---
 src/stores/media/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stores/media/index.ts b/src/stores/media/index.ts
index e63002f711..94975a6f7c 100644
--- a/src/stores/media/index.ts
+++ b/src/stores/media/index.ts
@@ -371,7 +371,6 @@ export const useMediaStore = defineStore('media', {
 
     // Handles errors for media fetches and sets the fetch state accordingly
     // Reported errors are logged to Sentry
-
     async handleMediaError({
       mediaType,
       error,