feat(error): adds error handling to views data fetch

Author: dvcol

src/services/notification.service.ts

@@ -1,6 +1,27 @@
-import type { useMessage, useNotification } from 'naive-ui';
+import type { NotificationOptions, useMessage, useNotification } from 'naive-ui';
+import type { Mutable } from '~/utils/typescript.utils';
+
+type NotificationApi = ReturnType<typeof useNotification>;
+type MessageApi = ReturnType<typeof useMessage>;
 
 export class NotificationService {
-  static notification: ReturnType<typeof useNotification>;
-  static message: ReturnType<typeof useMessage>;
+  static notification: NotificationApi;
+  static message: MessageApi;
+
+  static error(title: string, error: Error | Response | unknown, duration = 5000) {
+    const option: Mutable<NotificationOptions> = {
+      title,
+      duration,
+    };
+
+    if (error instanceof Response) {
+      option.description = error.status?.toString();
+      option.content = error.statusText;
+    } else if (error instanceof Error) {
+      option.description = error.name;
+      option.content = error.message;
+    }
+
+    this.notification.error(option);
+  }
 }

src/stores/data/activity.store.ts

@@ -4,6 +4,7 @@ import { ref, watch } from 'vue';
 
 import type { TraktSyncActivities } from '~/models/trakt/trakt-sync.model';
 
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { compareDateObject, toDateObject } from '~/utils/date.utils';
@@ -31,6 +32,7 @@ export const useActivityStore = defineStore('data.activity', () => {
       await saveState();
     } catch (error) {
       console.error('Failed to fetch activity', error);
+      NotificationService.error('Failed to fetch activity', error);
       throw error;
     } finally {
       loading.value = false;

src/stores/data/calendar.store.ts

@@ -5,6 +5,7 @@ import type { TraktCalendarMovie, TraktCalendarShow } from '~/models/trakt/trakt
 
 import { type ListScrollItem, type ListScrollItemTag, ListScrollItemType } from '~/models/list-scroll.model';
 
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { DateUtils } from '~/utils/date.utils';
@@ -181,7 +182,8 @@ export const useCalendarStore = defineStore('data.calendar', () => {
         calendar.value = [...calendar.value.filter(c => c.type !== ListScrollItemType.loading), ...spacedData];
       }
     } catch (e) {
-      console.error('Failed to fetch history');
+      console.error('Failed to fetch calendar');
+      NotificationService.error('Failed to fetch calendar', e);
       calendar.value = calendar.value.filter(c => c.type !== ListScrollItemType.loading);
       throw e;
     } finally {

src/stores/data/history.store.ts

@@ -4,6 +4,7 @@ import { ref, watch } from 'vue';
 import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 import type { TraktHistory } from '~/models/trakt/trakt-history.model';
 
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
@@ -81,6 +82,7 @@ export const useHistoryStore = defineStore('data.history', () => {
       history.value = page ? [...history.value.filter(h => h.id >= 0), ...response.data] : response.data;
     } catch (e) {
       console.error('Failed to fetch history');
+      NotificationService.error('Failed to fetch history', e);
       history.value = history.value.filter(h => h.id >= 0);
       throw e;
     } finally {

src/stores/data/list.store.ts

@@ -10,6 +10,7 @@ import type { TraktListItem } from '~/models/trakt/trakt-list.model';
 import type { TraktWatchlist } from '~/models/trakt/trakt-watchlist.model';
 
 import { ListScrollItemType } from '~/models/list-scroll.model';
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
@@ -110,6 +111,7 @@ export const useListsStore = defineStore('data.lists', () => {
       }
     } catch (e) {
       console.error('Failed to fetch lists');
+      NotificationService.error('Failed to fetch lists', e);
       throw e;
     } finally {
       loading.value = false;
@@ -207,6 +209,7 @@ export const useListStore = defineStore('data.list', () => {
       listItems.value = page ? [...listItems.value.filter(l => l.type !== ListScrollItemType.loading), ...newData] : newData;
     } catch (e) {
       console.error('Failed to fetch list');
+      NotificationService.error(`Failed to fetch list '${list}'`, e);
       listItems.value = listItems.value.filter(l => l.type !== ListScrollItemType.loading);
       throw e;
     } finally {

src/stores/data/progress.store.ts

@@ -7,6 +7,7 @@ import type { TraktShow } from '~/models/trakt/trakt-show.model';
 import { getContent, getTags, getTitle } from '~/components/common/list/use-list-scroll';
 import { type ListScrollItem, type ListScrollSourceItem } from '~/models/list-scroll.model';
 import { type ProgressItem } from '~/models/progress.model';
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
 
@@ -96,6 +97,7 @@ export const useProgressStore = defineStore('data.progress', () => {
       }
 
       console.error(error);
+      NotificationService.error('Failed to fetch progress', error);
       throw error;
     } finally {
       clearTimeout(timeout);

src/stores/data/search.store.ts

@@ -7,6 +7,7 @@ import type { TraktSearchResult, TraktSearchType } from '~/models/trakt/trakt-se
 
 import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.model';
 
+import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
@@ -91,7 +92,8 @@ export const useSearchStore = defineStore('data.search', () => {
       pagination.value = response.pagination;
       searchResults.value = page ? [...searchResults.value.filter(s => s.type !== ListScrollItemType.loading), ...data] : data;
     } catch (e) {
-      console.error('Failed to fetch history');
+      console.error('Failed to fetch search query');
+      NotificationService.error('Failed to fetch search query', e);
       searchResults.value = searchResults.value.filter(s => s.type !== ListScrollItemType.loading);
       throw e;
     } finally {

src/utils/typescript.utils.ts

@@ -22,3 +22,5 @@ export type ArrayElement<ArrayType extends readonly unknown[] | undefined> = Arr
 export type RecursiveType<T, R> = {
   [K in keyof T]: T[K] extends object ? RecursiveType<T[K], R> : R;
 };
+
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] };