Handle API errors better

src/components/NGErrorHandler.vue

@@ -0,0 +1,16 @@
+<template>
+    <v-alert v-if="error" color="error" prominent text>
+        <span v-if="errorIsJSON === false">{{ $t(error) }}</span>
+        <JSONViewer v-else :value="error" />
+    </v-alert>
+</template>
+
+<script>
+export default {
+	name: 'NGErrorHandler',
+	props: ['error', 'errorIsJSON'],
+	components: {
+		JSONViewer: () => import('vue-json-viewer')
+	}
+}
+</script>

src/routes/FeedPage.vue

@@ -12,10 +12,7 @@
 
     <v-divider class="my-4" />
 
-    <v-alert v-if="error" color="error" prominent text>
-      <span v-if="!errorIsJSON">{{ $t(error) }}</span>
-      <JSONViewer v-else :value="error" />
-    </v-alert>
+    <NGErrorHandler :error="error" :errorIsJSON="errorIsJSON" />
     <div v-for="(row, rowId) in splitIntoRows" :key="rowId" :class="$vuetify.breakpoint.mdAndUp ? 'grid' : undefined">
       <VideoItem :video="video" v-for="(video, videoId) in row" :key="videoId" :class="columnClass" />
     </div>
@@ -27,6 +24,7 @@ import { chunk as _chunk } from 'lodash-es'
 import axios from 'axios'
 
 import VideoItem from '@/components/VideoItem.vue'
+import NGErrorHandler from '@/components/NGErrorHandler'
 
 let lastAbortController = new AbortController()
 
@@ -124,8 +122,8 @@ export default {
 		}
 	},
 	components: {
-		VideoItem,
-		JSONViewer: () => import('vue-json-viewer')
+		NGErrorHandler,
+		VideoItem
 	}
 }
 </script>

src/routes/WatchVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
+  <NGErrorHandler :error="error" v-if="error != null" />
   <v-progress-linear indeterminate v-else-if="!loaded" />
   <div v-else>
     <Player
@@ -98,7 +98,7 @@ import { LibPiped } from '@/tools/libpiped'
 
 import Player from '@/components/Player.vue'
 import VideoItem from '@/components/VideoItem.vue'
-import ErrorHandler from '@/components/ErrorHandler.vue'
+import NGErrorHandler from '@/components/NGErrorHandler'
 import VideoComment from '@/components/VideoComment'
 import { addWatchedVideo, updateWatchedVideoProgress, findLastWatch } from '@/store/watched-videos-db'
 import SubscriptionButton from '@/components/SubscriptionButton'
@@ -112,6 +112,7 @@ export default {
 			video: {
 				title: 'Loading ...'
 			},
+			error: null,
 			sponsors: null,
 			selectedAutoLoop: false,
 			showDesc: true,
@@ -210,11 +211,19 @@ export default {
 			return LibPiped.addCommas(...args)
 		},
 
-		fetchVideo () {
-			return this.$store.dispatch('auth/makeRequest', {
-				method: 'GET',
-				path: '/streams/' + this.videoId
-			})
+		async fetchVideo () {
+			try {
+				return await this.$store.dispatch('auth/makeRequest', {
+					method: 'GET',
+					path: '/streams/' + this.videoId
+				})
+			} catch (e) {
+				if (e.isAxiosError) {
+					this.error = e.response.data
+				} else {
+					throw e
+				}
+			}
 		},
 
 		async getSponsors () {
@@ -326,7 +335,7 @@ export default {
 		VideoComment,
 		Player,
 		VideoItem,
-		ErrorHandler
+		NGErrorHandler
 	}
 }
 </script>