feat(logger): rework logger service & bump common utils

Author: dvcol

package.json

@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@dvcol/base-http-client": "^1.10.0",
-    "@dvcol/common-utils": "^1.4.0",
+    "@dvcol/common-utils": "^1.7.0",
     "@dvcol/tmdb-http-client": "^1.2.3",
     "@dvcol/trakt-http-client": "^1.4.5",
     "@dvcol/tvdb-http-client": "^1.1.3",

pnpm-lock.yaml

@@ -2,6 +2,7 @@
 import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
 
 import { createTab } from '@dvcol/web-extension-utils/chrome/tabs';
+
 import { NAvatar, NDropdown, NEllipsis, NFlex, NIcon } from 'naive-ui';
 
 import { computed, defineProps, h, ref } from 'vue';
@@ -20,10 +21,10 @@ import IconLightBulb from '~/components/icons/IconLightBulb.vue';
 import IconLogOut from '~/components/icons/IconLogOut.vue';
 
 import { Route } from '~/models/router.model';
+import { Logger } from '~/services/logger.service';
 import { TraktService } from '~/services/trakt.service';
 import { ExternaLinks } from '~/settings/external.links';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
-import { logger } from '~/stores/settings/log.store';
 import { useLogout } from '~/stores/settings/use-logout';
 import { defaultUser, useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 
@@ -40,7 +41,7 @@ const username = computed(() => userSetting.value?.user?.username);
 
 const fallback = ref<boolean>(!chromeRuntimeId);
 const onAvatarError = (event: Event) => {
-  logger.error('Failed to fetch avatar', event);
+  Logger.error('Failed to fetch avatar', event);
   fallback.value = true;
 };
 
@@ -122,7 +123,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
       if (typeof label === 'string' && key.startsWith('user-')) {
         return loadUser(label);
       }
-      logger.error('Unknown key:', key);
+      Logger.error('Unknown key:', key);
   }
 };
 </script>

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { wait } from '@dvcol/common-utils/common/promise';
 import { NProgress, NSkeleton, NSpin } from 'naive-ui';
 
 import {
@@ -15,7 +16,6 @@ import AnimatedNumber from './AnimatedNumber.vue';
 
 import { Rating } from '~/models/rating.model';
 import { debounce } from '~/utils/debounce.utils';
-import { wait } from '~/utils/promise.utils';
 
 const props = defineProps({
   from: {

src/components/common/numbers/ProgressNumber.vue

@@ -31,11 +31,11 @@ import { useRoute, useRouter } from 'vue-router';
 import GridBackground from '~/components/common/background/GridBackground.vue';
 import IconClipboard from '~/components/icons/IconClipboard.vue';
 import LoginCard from '~/components/views/login/LoginCard.vue';
+import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useLinksStore } from '~/stores/settings/links.store';
-import { logger } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('login');
@@ -70,7 +70,7 @@ const onSignIn = async () => {
       prompt: !useSession.value,
     });
   } catch (error) {
-    logger.error('Error:', error);
+    Logger.error('Error:', error);
   }
 };
 
@@ -85,8 +85,8 @@ const getCodes = async () => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define -- recursive call
     await polling();
   } catch (error) {
-    logger.error('Failed to login with Trakt.tv');
-    logger.error(error);
+    Logger.error('Failed to login with Trakt.tv');
+    Logger.error(error);
   }
 };
 
@@ -120,8 +120,8 @@ const polling = async () => {
     const traktAuth = await poll.value;
     await TraktService.device.login(traktAuth);
   } catch (error) {
-    logger.error('Failed to login with Trakt.tv');
-    logger.error(error);
+    Logger.error('Failed to login with Trakt.tv');
+    Logger.error(error);
     if (error instanceof TraktPollingExpiredError) await getCodes();
   }
 };

src/components/views/login/LoginComponent.vue

@@ -8,7 +8,7 @@ import ProgressNumber from '~/components/common/numbers/ProgressNumber.vue';
 
 import TextField from '~/components/common/typography/TextField.vue';
 import { RatingLabel } from '~/models/rating.model';
-import { logger } from '~/stores/settings/log.store';
+import { Logger } from '~/services/logger.service';
 import { useI18n } from '~/utils/i18n.utils';
 
 const props = defineProps({
@@ -47,7 +47,7 @@ const _scoreLabel = computed(() => {
   try {
     return RatingLabel[score.value];
   } catch (e) {
-    logger.error('RatingLabel', e);
+    Logger.error('RatingLabel', e);
     return 'not_rated';
   }
 });

src/components/views/panel/PanelScore.vue

@@ -10,9 +10,9 @@ import TextField from '~/components/common/typography/TextField.vue';
 import IconAccount from '~/components/icons/IconAccount.vue';
 
 import IconLogOut from '~/components/icons/IconLogOut.vue';
+import { Logger } from '~/services/logger.service';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useLinksStore } from '~/stores/settings/links.store';
-import { logger } from '~/stores/settings/log.store';
 import { useLogout } from '~/stores/settings/use-logout';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 
@@ -48,7 +48,7 @@ const joinDate = computed(() => {
 });
 
 const onAvatarError = (event: Event) => {
-  logger.error('Failed to fetch avatar', event);
+  Logger.error('Failed to fetch avatar', event);
   fallback.value = true;
 };
 

src/components/views/settings/SettingsAccount.vue

@@ -7,11 +7,11 @@ import { reactive, ref } from 'vue';
 import IconRestore from '~/components/icons/IconRestore.vue';
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 
+import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { useImageStore } from '~/stores/data/image.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
-import { logger } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('settings', 'cache');
@@ -32,7 +32,7 @@ const onClick = async (fn: () => unknown, index: number) => {
     await fn();
     NotificationService.message.success(i18n('evict_success'));
   } catch (error) {
-    logger.error('Failed to evict cache.', error);
+    Logger.error('Failed to evict cache.', error);
     NotificationService.error(i18n('evict_failure'), error);
   } finally {
     loading[index] = false;

src/components/views/settings/SettingsCache.vue

@@ -13,6 +13,7 @@ import IconDownload from '~/components/icons/IconDownload.vue';
 import IconLoadingDots from '~/components/icons/IconLoadingDots.vue';
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 
+import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import {
@@ -22,7 +23,6 @@ import {
   type ListTypes,
   useListsStoreRefs,
 } from '~/stores/data/list.store';
-import { logger } from '~/stores/settings/log.store';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils/i18n.utils';
 
@@ -63,7 +63,7 @@ const getOnClick = (scope: ExportScope, index: number) => async () => {
       }
     }
   } catch (error) {
-    logger.error(`Failed to export '${scope.name}'.`, error);
+    Logger.error(`Failed to export '${scope.name}'.`, error);
     NotificationService.error(`${scope.name} ${i18n('export_failure')}`, error);
   } finally {
     cancelled[index] = false;

src/components/views/settings/SettingsExport.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import { LogLevel } from '@dvcol/common-utils/common/logger';
 import { NSelect } from 'naive-ui';
 
 import { ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
-import { LogLevel, useLogStoreRefs } from '~/stores/settings/log.store';
+import { useLogStoreRefs } from '~/stores/settings/log.store';
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('settings', 'logs');

src/components/views/settings/SettingsLogs.vue

@@ -4,13 +4,12 @@ import { createRouter as createVueRouter, createWebHashHistory, type LocationQue
 import { isLoginAuthResponseSuccess } from '~/models/login/login-auth-response';
 import { Route } from '~/models/router.model';
 import { routes } from '~/router/routes';
+import { Logger } from '~/services/logger.service';
 import { TraktService } from '~/services/trakt.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useRouterStore, useRouterStoreRefs } from '~/stores/router.store';
-
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useExtensionSettingsStore, useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
-import { logger } from '~/stores/settings/log.store';
 
 export type RouterOptions = { baseName?: string; baseUrl?: string };
 export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions) => {
@@ -62,8 +61,8 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
       try {
         await TraktService.login(query.code);
       } catch (error) {
-        logger.error('Failed to login with Trakt.tv');
-        logger.error(error);
+        Logger.error('Failed to login with Trakt.tv');
+        Logger.error(error);
       }
     }
 

src/router/create-router.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue';
 
 import type { useLoadingBar } from 'naive-ui';
 
-import { logger } from '~/stores/settings/log.store';
+import { Logger } from '~/services/logger.service';
 
 export class LoadingBarService {
   private static instance: ReturnType<typeof useLoadingBar>;
@@ -17,21 +17,21 @@ export class LoadingBarService {
   }
 
   static start() {
-    if (!this.instance?.start) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.start) Logger.warn('LoadingBarService instance is not initialized');
     this.instance.start();
     this.loading.value = true;
   }
 
   static finish() {
     if (!this.isLoading) return;
-    if (!this.instance?.finish) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.finish) Logger.warn('LoadingBarService instance is not initialized');
     this.instance.finish();
     this.loading.value = false;
   }
 
   static error() {
     if (!this.isLoading) return;
-    if (!this.instance?.error) logger.warn('LoadingBarService instance is not initialized');
+    if (!this.instance?.error) Logger.warn('LoadingBarService instance is not initialized');
     this.instance.error();
     this.loading.value = false;
   }

src/services/loading-bar.service.ts

@@ -0,0 +1,31 @@
+import { ProxyLogger } from '@dvcol/common-utils/common/logger';
+
+import { useLogStore } from '~/stores/settings/log.store';
+
+export class Logger {
+  static logger = new ProxyLogger({
+    logLevel: () => useLogStore().logLevel,
+  });
+
+  static colorize = ProxyLogger.colorize;
+
+  static get timestamp() {
+    return ProxyLogger.timestamp();
+  }
+
+  static get debug() {
+    return this.logger.debug;
+  }
+
+  static get info() {
+    return this.logger.info;
+  }
+
+  static get warn() {
+    return this.logger.warn;
+  }
+
+  static get error() {
+    return this.logger.error;
+  }
+}