fix(webui): more logs in the frontend

komga-webui/src/components/readers/PagedReader.vue

@@ -84,8 +84,9 @@ import {buildSpreads} from '@/functions/book-spreads'
 
 export default Vue.extend({
   name: 'PagedReader',
-  data: () => {
+  data: function () {
     return {
+      logger: 'PagedReader',
       carouselPage: 0,
       spreads: [] as PageDtoWithUrl[][],
     }
@@ -127,11 +128,15 @@ export default Vue.extend({
       },
       immediate: true,
     },
-    currentPage (val) {
+    currentPage(val, old) {
+      this.$logDebug('[watch:currentPage]', `old:${old}`, `new:${val}`)()
       this.$emit('update:page', val)
     },
-    page (val) {
-      this.carouselPage = this.toSpreadIndex(val)
+    page(val, old) {
+      this.$logDebug('[watch:page]', `old:${old}`, `new:${val}`)()
+      const spreadIndex = this.toSpreadIndex(val)
+      this.$logDebug('[watch:page]', `toSpreadIndex:${spreadIndex}`)()
+      this.carouselPage = spreadIndex
     },
     pageLayout: {
       handler(val) {
@@ -174,6 +179,7 @@ export default Vue.extend({
       return this.carouselPage + 1
     },
     currentPage(): number {
+      this.$logDebug('[currentPage]', `carouselPage:${this.carouselPage}`, `spreads.length:${this.spreads.length}`)()
       if (this.carouselPage >= 0 && this.carouselPage < this.spreads.length && this.spreads.length > 0) {
         return this.spreads[this.carouselPage][0].number
       }
@@ -248,6 +254,7 @@ export default Vue.extend({
       }
     },
     toSpreadIndex(i: number): number {
+      this.$logDebug('[toSpreadIndex]', `i:${i}`, `isDoublePages:${this.isDoublePages}`)()
       if (this.spreads.length > 0) {
         if (this.isDoublePages) {
           for (let j = 0; j < this.spreads.length; j++) {

komga-webui/src/main.ts

@@ -20,23 +20,20 @@ import komgaTransientBooks from './plugins/komga-transientbooks.plugin'
 import komgaSse from './plugins/komga-sse.plugin'
 import komgaTasks from './plugins/komga-tasks.plugin'
 import vuetify from './plugins/vuetify'
+import logger from './plugins/logger.plugin'
 import './public-path'
 import router from './router'
 import store from './store'
 import i18n from './i18n'
-import log from 'loglevel'
 
 Vue.prototype.$_ = _
 Vue.prototype.$eventHub = new Vue()
 
-Vue.prototype.$log = log
-if (process.env.VUE_APP_LOG_LEVEL)
-  Vue.prototype.$log.setLevel(process.env.VUE_APP_LOG_LEVEL)
-
 Vue.use(Vuelidate)
 Vue.use(lineClamp)
 
 Vue.use(httpPlugin)
+Vue.use(logger)
 Vue.use(komgaFileSystem, {http: Vue.prototype.$http})
 Vue.use(komgaSeries, {http: Vue.prototype.$http})
 Vue.use(komgaCollections, {http: Vue.prototype.$http})
@@ -68,7 +65,6 @@ declare module 'vue/types/vue' {
   interface Vue {
     $_: LoDashStatic;
     $eventHub: Vue;
-    $log: log.RootLogger;
   }
 }
 

komga-webui/src/plugins/logger.plugin.ts

@@ -0,0 +1,60 @@
+import _Vue from 'vue'
+import log from 'loglevel'
+import _, {isArray, isObject} from 'lodash'
+import {format} from 'date-fns'
+
+export default {
+  install(Vue: typeof _Vue) {
+    if (process.env.VUE_APPlog_LEVEL)
+      log.setLevel(process.env.VUE_APPlog_LEVEL as any)
+
+    Vue.prototype.$logTrace = function (...msg: any[]) {
+      const loggerName = _.get(this, 'logger') || _.get(this, '$options.name')
+      const logger = loggerName ? log.getLogger(loggerName) : log
+      return logger.trace.bind(logger, getPrefix('TRACE', loggerName), ...(stringArgs(msg)))
+    }
+
+    Vue.prototype.$logDebug = function (...msg: any[]) {
+      const loggerName = _.get(this, 'logger') || _.get(this, '$options.name')
+      const logger = loggerName ? log.getLogger(loggerName) : log
+      return logger.debug.bind(logger, getPrefix('DEBUG', loggerName), ...(stringArgs(msg)))
+    }
+
+    Vue.prototype.$logInfo = function (...msg: any[]) {
+      const loggerName = _.get(this, 'logger') || _.get(this, '$options.name')
+      const logger = loggerName ? log.getLogger(loggerName) : log
+      return logger.info.bind(logger, getPrefix('INFO', loggerName), ...(stringArgs(msg)))
+    }
+
+    Vue.prototype.$logWarn = function (...msg: any[]) {
+      const loggerName = _.get(this, 'logger') || _.get(this, '$options.name')
+      const logger = loggerName ? log.getLogger(loggerName) : log
+      return logger.warn.bind(logger, getPrefix('WARN', loggerName), ...(stringArgs(msg)))
+    }
+
+    Vue.prototype.$logError = function (...msg: any[]) {
+      const loggerName = _.get(this, 'logger') || _.get(this, '$options.name')
+      const logger = loggerName ? log.getLogger(loggerName) : log
+      return logger.error.bind(logger, getPrefix('ERROR', loggerName), ...(stringArgs(msg)))
+    }
+  },
+}
+
+function stringArgs(msg: any[]): any[] {
+  return msg.map(m => isObject(m) || isArray(m) ? JSON.stringify(m) : m)
+}
+
+function getPrefix(level: string, loggerName: string): string {
+  const timestamp = format(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS')
+  return `${timestamp} ${level} --- ${loggerName} :`
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $logTrace(...msg: any[]): (...msg: any[]) => void;
+    $logDebug(...msg: any[]): (...msg: any[]) => void;
+    $logInfo(...msg: any[]): (...msg: any[]) => void;
+    $logWarn(...msg: any[]): (...msg: any[]) => void;
+    $logError(...msg: any[]): (...msg: any[]) => void;
+  }
+}

komga-webui/src/views/BookReader.vue

@@ -420,8 +420,7 @@ export default Vue.extend({
     if (screenfull.isEnabled) screenfull.on('change', this.fullscreenChanged)
   },
   async mounted() {
-    this.$log.debug('mounted')
-    this.$log.debug(`route.query:  ${JSON.stringify(this.$route.query)}`)
+    this.$logDebug('[mounted]', 'route.query:', this.$route.query)()
 
     this.readingDirection = this.$store.state.persistedState.webreader.readingDirection
     this.animations = this.$store.state.persistedState.webreader.animations
@@ -454,7 +453,7 @@ export default Vue.extend({
       // route update means either:
       // - going to previous/next book, in this case the query.page is not set, so it will default to first page
       // - pressing the back button of the browser and navigating to the previous book, in this case the query.page is set, so we honor it
-      this.$log.debug(`beforeRouteUpdate, to.query: ${JSON.stringify(to.query)}`)
+      this.$logDebug('[beforeRouteUpdate]', 'to.query:', to.query)()
       this.setup(to.params.bookId, Number(to.query.page))
     }
     next()
@@ -629,7 +628,7 @@ export default Vue.extend({
       this.shortcuts[e.key]?.execute(this)
     },
     async setup(bookId: string, page?: number) {
-      this.$log.debug(`setup bookId:${bookId}, page:${page}`)
+      this.$logDebug('[setup]', `bookId:${bookId}`, `page:${page}`)()
       this.book = await this.$komgaBooks.getBook(bookId)
       this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId)
 
@@ -654,8 +653,7 @@ export default Vue.extend({
       pageDtos.forEach((p: any) => p['url'] = this.getPageUrl(p))
       this.pages = pageDtos as PageDtoWithUrl[]
 
-      this.$log.debug(`pages count: ${this.pagesCount}`)
-      this.$log.debug(`read progress: ${JSON.stringify(this.book.readProgress)}`)
+      this.$logDebug('[setup]', `pages count:${this.pagesCount}`, 'read progress:', this.book.readProgress)()
       if (page && page >= 1 && page <= this.pagesCount) {
         this.goTo(page)
       } else if (this.book.readProgress?.completed === false) {
@@ -736,7 +734,7 @@ export default Vue.extend({
       }
     },
     goTo(page: number) {
-      this.$log.debug(`goTo: ${page}`)
+      this.$logDebug('[goTo]', `page:${page}`)()
       this.page = page
       this.markProgress(page)
     },