feat(errors): consolidate errors in service

Author: dvcol

src/components/AppComponent.vue

@@ -5,6 +5,7 @@ import { RouterView, useRouter } from 'vue-router';
 
 import { NavbarComponent } from '~/components/common';
 import GridBackground from '~/components/common/background/GridBackground.vue';
+import DebugProvider from '~/components/common/debug/DebugProvider.vue';
 import PageLoading from '~/components/common/loading/PageLoading.vue';
 import IconChevronLeft from '~/components/icons/IconChevronLeft.vue';
 import IconClose from '~/components/icons/IconClose.vue';
@@ -105,6 +106,7 @@ const onBack = () => {
         </NDrawer>
       </RouterView>
     </aside>
+    <DebugProvider />
   </RouterView>
 </template>
 

src/components/common/debug/DebugProvider.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { ErrorService } from '~/services/error.service';
+import { TraktService } from '~/services/trakt.service';
+
+const debugProvider = ref<HTMLDivElement>();
+
+onMounted(() => {
+  console.info('DebugProvider mounted', debugProvider.value);
+  Object.defineProperty(debugProvider.value, 'trakt', {
+    value: TraktService,
+  });
+  Object.defineProperty(debugProvider.value, 'error', {
+    value: ErrorService,
+  });
+});
+</script>
+
+<template>
+  <div id="debug-provider" ref="debugProvider" hidden />
+</template>

src/services/error.service.ts

@@ -0,0 +1,45 @@
+import { isReactive, isRef, toRaw } from 'vue';
+
+import type { RecursiveRecord } from '@dvcol/common-utils/common';
+
+const toRawDeep = (obj: RecursiveRecord): RecursiveRecord => {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => {
+      if (Object.values(value).some(v => isRef(v) || isReactive(v))) return [key, toRawDeep(value)];
+      return [key, toRaw(value)];
+    }),
+  );
+};
+
+export class ErrorService {
+  private static _dictionaries: RecursiveRecord = {};
+  private static _errors: Array<{ date: Date; error: unknown; meta: RecursiveRecord }> = [];
+
+  static retention = 30;
+
+  static get dictionaries() {
+    return toRawDeep(this._dictionaries);
+  }
+
+  static get errors() {
+    return this._errors;
+  }
+
+  static get lastError() {
+    return this._errors[this._errors.length - 1];
+  }
+
+  static registerDictionary(name: string, dictionary: RecursiveRecord) {
+    if (this._dictionaries[name]) throw new Error(`Dictionary ${name} already exists`);
+    this._dictionaries[name] = dictionary;
+  }
+
+  static registerError(error: unknown, ...rest: unknown[]) {
+    if (this._errors.length >= this.retention) this._errors.shift();
+    this._errors.push({ date: new Date(), error, meta: { ...rest } });
+  }
+
+  static since(date: Date) {
+    return this._errors.filter(({ date: errorDate }) => errorDate > date);
+  }
+}

src/services/trakt.service.ts

@@ -42,6 +42,7 @@ import type { TvdbApiResponse } from '@dvcol/tvdb-http-client/models';
 import type { ProgressItem } from '~/models/progress.model';
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 
+import { ErrorService } from '~/services/error.service';
 import { LoadingBarService } from '~/services/loading-bar.service';
 import { tmdbUsedApi } from '~/services/tmdb.used.api';
 import { traktUsedApi } from '~/services/trakt-used.api';
@@ -186,6 +187,7 @@ export class TraktService {
       LoadingBarService.finish();
     } catch (error) {
       LoadingBarService.error();
+      ErrorService.registerError(error);
     } finally {
       clearTimeout(timeout);
     }
@@ -207,6 +209,11 @@ export class TraktService {
 
     this.tvdbClient.onCall(async call => {
       logger.debug('TvdbClient.onCall', call);
+      try {
+        await call.query;
+      } catch (error) {
+        ErrorService.registerError(error);
+      }
     });
 
     this.tmdbClient.onAuthChange(async _auth => {
@@ -215,6 +222,11 @@ export class TraktService {
 
     this.tmdbClient.onCall(async call => {
       logger.debug('TmdbClient.onCall', call);
+      try {
+        await call.query;
+      } catch (error) {
+        ErrorService.registerError(error);
+      }
     });
   }
 

src/stores/data/calendar.store.ts

@@ -5,6 +5,7 @@ import type { TraktCalendarMovie, TraktCalendarQuery, TraktCalendarShow } from '
 
 import { type ListScrollItem, type ListScrollItemTag, ListScrollItemType } from '~/models/list-scroll.model';
 
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -58,6 +59,7 @@ export const useCalendarStore = defineStore(CalendarStoreConstants.Store, () =>
   const filter = ref('');
 
   const calendarErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('calendar', calendarErrors);
 
   const clearState = (date: Date = new Date()) => {
     calendar.value = [];

src/stores/data/history.store.ts

@@ -5,6 +5,7 @@ import type { TraktClientPagination, TraktHistory, TraktHistoryGetQuery } from '
 
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -31,6 +32,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const threshold = ref(10);
 
   const historyErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('history', historyErrors);
 
   const saveState = async () =>
     storage.local.set(HistoryStoreConstants.Store, {

src/stores/data/image.store.ts

@@ -5,6 +5,7 @@ import { computed, reactive, type Ref, ref } from 'vue';
 
 import type { TmdbConfiguration, TmdbImage } from '@dvcol/tmdb-http-client/models';
 
+import { ErrorService } from '~/services/error.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
 import { localCache, storage } from '~/utils/browser/browser-storage.utils';
@@ -61,7 +62,7 @@ type ImagePayload = {
   profiles?: TmdbImage[]; // profiles
 };
 
-const EmptyImageStore = {
+const emptyImageStore = {
   movie: {},
   show: {},
   season: {},
@@ -89,9 +90,10 @@ const localArrayMax = (
 
 export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const tmdbConfig = ref<TmdbConfiguration>();
-  const images = reactive<ImageStore>(EmptyImageStore);
+  const images = reactive<ImageStore>(emptyImageStore);
 
-  const imageErrors = reactive<ImageStoreErrors>(EmptyImageStore);
+  const imageErrors = reactive<Partial<ImageStoreErrors>>({});
+  ErrorService.registerDictionary('image', imageErrors);
 
   const saveState = debounce(
     (_images = images) =>
@@ -137,14 +139,15 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const queueRequest = async ({ key, type }: { key: string; type: ImageQuery['type'] }, request: () => Promise<ImagePayload>) => {
     try {
       if (!(key in queue)) queue[key] = request();
-      delete imageErrors[type][key];
+      const response = await queue[key];
+      delete imageErrors[type]?.[key];
+      return response;
     } catch (error) {
       logger.error('Failed to queue image request', { key, type });
       if (!imageErrors[type]) imageErrors[type] = {};
-      imageErrors[type][key] = ErrorCount.fromDictionary(imageErrors[type], key, error);
+      imageErrors[type]![key] = ErrorCount.fromDictionary(imageErrors[type]!, key, error);
       throw error;
     }
-    return queue[key];
   };
 
   const getKeyAndType = ({ id, season, episode, type }: ImageQuery): { key: string; type: ImageQuery['type'] } => {

src/stores/data/list.store.ts

@@ -20,6 +20,7 @@ import IconGrid from '~/components/icons/IconGrid.vue';
 import IconHeart from '~/components/icons/IconHeart.vue';
 import IconList from '~/components/icons/IconList.vue';
 import { ListScrollItemType } from '~/models/list-scroll.model';
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useActivityStore } from '~/stores/data/activity.store';
@@ -96,6 +97,7 @@ export const useListsStore = defineStore(ListsStoreConstants.Store, () => {
   const activeList = ref<ListEntity>(DefaultLists.Watchlist);
 
   const listsErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('lists', listsErrors);
 
   const saveState = async () =>
     storage.local.set(ListsStoreConstants.Store, {
@@ -229,6 +231,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
   const listDictionaryLoading = reactive<ListDictionaryLoading>({});
 
   const listErrors = reactive<ListErrorDictionary>({});
+  ErrorService.registerDictionary('list', listErrors);
 
   const saveState = async () => storage.local.set(ListStoreConstants.LocalPageSize, pageSize.value);
   const restoreState = async () => {

src/stores/data/movie.store.ts

@@ -4,6 +4,7 @@ import { computed, reactive, ref, watch } from 'vue';
 
 import type { TraktMovieExtended } from '@dvcol/trakt-http-client/models';
 
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -27,6 +28,7 @@ export const useMovieStore = defineStore('data.movie', () => {
   const loadingCollected = ref(false);
 
   const movieErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('movie', movieErrors);
 
   const clearProgressState = () => {
     clearProxy(moviesWatched);

src/stores/data/person.store.ts

@@ -6,7 +6,9 @@ import type { TraktPersonExtended } from '@dvcol/trakt-http-client/models';
 
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
+
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
 import { ErrorCount } from '~/utils/retry.utils';
@@ -20,6 +22,7 @@ export const usePersonStore = defineStore('data.person', () => {
   const loading = reactive<LoadingDictionary>({});
 
   const peopleErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('person', peopleErrors);
 
   const clearState = () => {
     clearProxy(people);

src/stores/data/search.store.ts

@@ -7,8 +7,9 @@ import type { TraktClientPagination, TraktSearch, TraktSearchResult, TraktSearch
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
 import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.model';
-
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
+
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
@@ -37,6 +38,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
   const search = ref('');
 
   const searchErrors = reactive<ErrorDictionary>({});
+  ErrorService.registerDictionary('search', searchErrors);
 
   const pageSize = ref(100);
   const pagination = ref<TraktClientPagination>();

src/stores/data/show.store.ts

@@ -13,6 +13,7 @@ import type {
 } from '@dvcol/trakt-http-client/models';
 
 import { type ShowProgress, ShowProgressType } from '~/models/list-scroll.model';
+import { ErrorService } from '~/services/error.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -92,6 +93,15 @@ export const useShowStore = defineStore('data.show', () => {
   const showWatchedProgressError = reactive<ErrorDictionary>({});
   const showCollectionProgressError = reactive<ErrorDictionary>({});
 
+  ErrorService.registerDictionary('show', {
+    shows: showsError,
+    seasons: showsSeasonsError,
+    seasonEpisodes: showsSeasonEpisodesError,
+    episodes: showsEpisodesError,
+    watched: showWatchedProgressError,
+    collected: showCollectionProgressError,
+  });
+
   const clearProgressState = () => {
     clearProxy(showsWatchedProgress);
     clearProxy(showsCollectionProgress);

src/utils/retry.utils.ts

@@ -6,12 +6,21 @@ export type ErrorDictionary = Record<ErrorDictionaryKey, ErrorCount>;
 export class ErrorCount {
   last: Date;
   count: number;
-  error?: unknown;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- necessary for unknown error types
+  error?: any;
 
   constructor(last: Date, count: number, error?: unknown) {
     this.last = last;
     this.count = count;
-    this.error = error;
+
+    if (error instanceof Response) {
+      this.error = { response: error.clone(), content: 'pending' };
+      this.error.response.json().then((json: unknown) => {
+        this.error.content = json;
+      });
+    } else {
+      this.error = error;
+    }
   }
 
   static fromDictionary<T extends ErrorDictionary>(dictionary: T, key: ErrorDictionaryKey, error?: unknown) {