refactor(webui): simplify logger

This commit is contained in:
Gauthier Roebroeck 2021-09-21 22:31:04 +08:00
parent 6bb7135088
commit 3cdd1e6177
5 changed files with 47 additions and 53 deletions

View file

@ -15,7 +15,6 @@
"js-file-downloader": "^1.1.22",
"language-tags": "^1.0.5",
"lodash": "^4.17.21",
"loglevel": "^1.7.1",
"qs": "^6.10.1",
"screenfull": "^5.1.0",
"vue": "^2.6.14",
@ -13986,6 +13985,7 @@
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
"integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
"dev": true,
"engines": {
"node": ">= 0.6.0"
},
@ -32809,7 +32809,8 @@
"loglevel": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
"integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw=="
"integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
"dev": true
},
"loose-envify": {
"version": "1.4.0",

View file

@ -17,7 +17,6 @@
"js-file-downloader": "^1.1.22",
"language-tags": "^1.0.5",
"lodash": "^4.17.21",
"loglevel": "^1.7.1",
"qs": "^6.10.1",
"screenfull": "^5.1.0",
"vue": "^2.6.14",

View file

@ -129,13 +129,13 @@ export default Vue.extend({
immediate: true,
},
currentPage(val, old) {
this.$logDebug('[watch:currentPage]', `old:${old}`, `new:${val}`)()
this.$debug('[watch:currentPage]', `old:${old}`, `new:${val}`)
this.$emit('update:page', val)
},
page(val, old) {
this.$logDebug('[watch:page]', `old:${old}`, `new:${val}`)()
this.$debug('[watch:page]', `old:${old}`, `new:${val}`)
const spreadIndex = this.toSpreadIndex(val)
this.$logDebug('[watch:page]', `toSpreadIndex:${spreadIndex}`)()
this.$debug('[watch:page]', `toSpreadIndex:${spreadIndex}`)
this.carouselPage = spreadIndex
},
pageLayout: {
@ -179,7 +179,7 @@ export default Vue.extend({
return this.carouselPage + 1
},
currentPage(): number {
this.$logDebug('[currentPage]', `carouselPage:${this.carouselPage}`, `spreads.length:${this.spreads.length}`)()
this.$debug('[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
}
@ -254,7 +254,7 @@ export default Vue.extend({
}
},
toSpreadIndex(i: number): number {
this.$logDebug('[toSpreadIndex]', `i:${i}`, `isDoublePages:${this.isDoublePages}`)()
this.$debug('[toSpreadIndex]', `i:${i}`, `isDoublePages:${this.isDoublePages}`)
if (this.spreads.length > 0) {
if (this.isDoublePages) {
for (let j = 0; j < this.spreads.length; j++) {

View file

@ -1,60 +1,54 @@
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)
let isDebug = false
if (process.env.VUE_APP_LOG_LEVEL || window.localStorage['loglevel'])
isDebug = true
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)))
}
Object.defineProperty(Vue.prototype, '$debug', {
get: function () {
// eslint-disable-next-line no-console
return isDebug ? console.log.bind(console, timestamp(), 'DEBUG ---') : noop
},
})
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)))
}
Object.defineProperty(Vue.prototype, '$info', {
get: function () {
// eslint-disable-next-line no-console
return isDebug ? console.log.bind(console, timestamp(), 'INFO ---') : noop
},
})
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)))
}
Object.defineProperty(Vue.prototype, '$warn', {
get: function () {
// eslint-disable-next-line no-console
return isDebug ? console.warn.bind(console, timestamp(), 'WARN ---') : noop
},
})
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)))
}
Object.defineProperty(Vue.prototype, '$err', {
get: function () {
// eslint-disable-next-line no-console
return isDebug ? console.error.bind(console, timestamp(), 'ERROR ---') : noop
},
})
},
}
function stringArgs(msg: any[]): any[] {
return msg.map(m => isObject(m) || isArray(m) ? JSON.stringify(m) : m)
function timestamp() {
return format(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS')
}
function getPrefix(level: string, loggerName: string): string {
const timestamp = format(new Date(), 'yyyy-MM-dd HH:mm:ss.SSS')
return `${timestamp} ${level} --- ${loggerName} :`
function noop() {
}
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;
$debug(...msg: any[]): void;
$info(...msg: any[]): void;
$warn(...msg: any[]): void;
$err(...msg: any[]): void;
}
}

View file

@ -420,7 +420,7 @@ export default Vue.extend({
if (screenfull.isEnabled) screenfull.on('change', this.fullscreenChanged)
},
async mounted() {
this.$logDebug('[mounted]', 'route.query:', this.$route.query)()
this.$debug('[mounted]', 'route.query:', this.$route.query)
this.readingDirection = this.$store.state.persistedState.webreader.readingDirection
this.animations = this.$store.state.persistedState.webreader.animations
@ -453,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.$logDebug('[beforeRouteUpdate]', 'to.query:', to.query)()
this.$debug('[beforeRouteUpdate]', 'to.query:', to.query)
this.setup(to.params.bookId, Number(to.query.page))
}
next()
@ -628,7 +628,7 @@ export default Vue.extend({
this.shortcuts[e.key]?.execute(this)
},
async setup(bookId: string, page?: number) {
this.$logDebug('[setup]', `bookId:${bookId}`, `page:${page}`)()
this.$debug('[setup]', `bookId:${bookId}`, `page:${page}`)
this.book = await this.$komgaBooks.getBook(bookId)
this.series = await this.$komgaSeries.getOneSeries(this.book.seriesId)
@ -653,7 +653,7 @@ export default Vue.extend({
pageDtos.forEach((p: any) => p['url'] = this.getPageUrl(p))
this.pages = pageDtos as PageDtoWithUrl[]
this.$logDebug('[setup]', `pages count:${this.pagesCount}`, 'read progress:', this.book.readProgress)()
this.$debug('[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) {
@ -734,7 +734,7 @@ export default Vue.extend({
}
},
goTo(page: number) {
this.$logDebug('[goTo]', `page:${page}`)()
this.$debug('[goTo]', `page:${page}`)
this.page = page
this.markProgress(page)
},