您好,登錄后才能下訂單哦!
這篇文章主要為大家分析了小程序中的Log日志系統(tǒng)該如何搭建和使用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì)易懂,操作細(xì)節(jié)合理,具有一定參考價(jià)值。如果感興趣的話,不妨跟著跟隨小編一起來看看,下面跟著小編一起深入學(xué)習(xí)“小程序中的Log日志系統(tǒng)該如何搭建和使用”的知識(shí)吧。
通常情況下,日志系統(tǒng)是開發(fā)中重要的一環(huán)。
但出于種種原因,在前端開發(fā)中做日志打印和上報(bào)系統(tǒng)卻不常見。
但有些特定情況下,日志系統(tǒng)往往有奇效。
比如一個(gè)聊天系統(tǒng)中遇到了以下問題:
語音通話中,用戶聽不到聲音
即時(shí)通訊中,部分場(chǎng)景用戶反饋,消息發(fā)送不出去
即時(shí)通訊中, A 回復(fù) B 消息時(shí),偶爾對(duì)話框不顯示
即時(shí)通訊中, A 給 B 連續(xù)發(fā)送兩條消息后, B 接收不到第二條的提示
即時(shí)通訊中,發(fā)送語音消息發(fā)送時(shí),用戶以為語音已經(jīng)發(fā)送,但實(shí)際上錄音還在繼續(xù)。這時(shí)用戶以為是網(wǎng)絡(luò)卡了,最后發(fā)現(xiàn)自己和其他人說話的聲音被錄制進(jìn)去
但是以上幾種錯(cuò)誤,在后臺(tái)接口中并沒有體現(xiàn)。再加上部分用戶手機(jī)型號(hào)的問題,導(dǎo)致問題很難被定位。
如果我們這里有 log
,我們就能很快定位到出問題的代碼。
如果不是代碼問題,也更有底氣回復(fù)用戶不是我們系統(tǒng)的問題。
小程序側(cè)提供了兩種小程序 Log 日志接口:
LogManager ( 普通日志 )
RealtimeLogManager ( 實(shí)時(shí)日志 )
官方并沒有介紹兩者的具體區(qū)別,只是強(qiáng)調(diào)了 Realtime 的實(shí)時(shí)性質(zhì)。
在我看來他們的最大區(qū)別就是:
LogManager
可以讓用戶有種心安的感覺,因?yàn)?LogManager
是用戶手動(dòng)反饋的問題。
RealtimeLogManager
則對(duì)開發(fā)者更友好,可以在用戶不知情的情況下收集到問題信息,并在用戶無感的情況下對(duì)問題進(jìn)行修復(fù)。
LogManager
小程序提供的 Log
日志接口,通過 wx.getLogManager()
獲取實(shí)例。
注意:
最多保存5M的日志內(nèi)容,超過5M后,舊的日志內(nèi)容會(huì)被刪除。
對(duì)于 小程序 ,用戶可以通過使用 button
組件的 open-type="feedback"
來上傳打印的日志。
對(duì)于 小游戲 ,用戶可以通過使用 wx.createFeedbackButton
來創(chuàng)建上傳打印的日志的按鈕。
開發(fā)者可以通過小程序管理后臺(tái)左側(cè)菜單 反饋管理 頁面查看相關(guān)打印日志。
創(chuàng)建 LogManager 實(shí)例
你可以通過 wx.getLogManager()
獲取日志實(shí)例。
括號(hào)中可以傳參 { level: 0 | 1 }
來決定是否寫入 Page
的生命周期函數(shù), wx
命名空間下的函數(shù)日志。
0: 寫入
1: 不寫入
https://github.com/Kujiale-Mobile/Painter
使用 LogManager 實(shí)例
const logger = wx.getLogManager({ level: 0 }) logger.log({str: 'hello world'}, 'basic log', 100, [1, 2, 3]) logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3]) logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3]) logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])
用戶反饋上傳 LogManager 記錄的日志
當(dāng)日志記錄后, 用戶可以在小程序的 profile
頁面,單擊 反饋與投訴 ,在點(diǎn)擊 功能異常 進(jìn)行日志上傳。
開發(fā)者處理用戶反饋及和用戶溝通
開發(fā)者可以在小程序后臺(tái) 管理 -> 用戶反饋 -> 功能異常 查看用戶反饋的信息。
開發(fā)者可以在 功能 -> 客服 下綁定客服微信,綁定后可以在 48小時(shí) 內(nèi)通過微信和反饋用戶溝通。
注:溝通需要用戶反饋時(shí)勾選:允許開發(fā)者在 48 小時(shí)內(nèi)通過客服消息聯(lián)系我。
RealtimeLogManager
小程序提供的 實(shí)時(shí)Log
日志接口,通過 wx.getRealtimeLogManager()
獲取實(shí)例。
注意:
wx.getRealtimeLogManager()
基礎(chǔ)庫 2.7.1 開始支持
官方給出實(shí)時(shí)日志每條的容量上限是 5kb
官方對(duì)每條日志的定義:在一個(gè)頁面 onShow -> onHide 之間,會(huì)聚合成一條日志上報(bào)
開發(fā)者可從小程序管理后臺(tái): 開發(fā) -> 運(yùn)維中心 -> 實(shí)時(shí)日志 進(jìn)入小程序端日志查詢頁面
為了定位問題方便,日志是按頁面劃分的,某一個(gè)頁面,在onShow到onHide(切換到其它頁面、右上角圓點(diǎn)退到后臺(tái))之間打的日志,會(huì)聚合成一條日志上報(bào),并且在小程序管理后臺(tái)上可以根據(jù)頁面路徑搜索出該條日志
創(chuàng)建 RealtimeLogManager 實(shí)例
你可以通過 wx.getRealtimeLogManager()
獲取實(shí)時(shí)日志實(shí)例。
const logger = wx.getRealtimeLogManager()
使用 RealtimeLogManager 實(shí)例
const logger = wx.getRealtimeLogManager() logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3]) logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3]) logger.error({str: 'hello world'}, 'error log', 100, [1, 2, 3]) logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])
查看實(shí)時(shí)日志
與普通日志不同的是,實(shí)時(shí)日志不再需要用戶反饋,可以直接通過以下方式查看實(shí)例。
登錄小程序后臺(tái)
通過路徑 開發(fā) -> 開發(fā)管理 -> 運(yùn)維中心 -> 實(shí)時(shí)日志 查看實(shí)時(shí)日志
如何搭建小程序 Log 日志系統(tǒng)
上面我們知道了小程序的 Log
日志怎么使用,我們當(dāng)然可以不進(jìn)行封裝直接使用。
但是我們直接使用起來會(huì)感覺到十分的別扭,因?yàn)檫@不符合我們程序員單點(diǎn)調(diào)用的習(xí)慣。
那么接下來讓我們對(duì)這套 Log 系統(tǒng)進(jìn)行初步的封裝以及全局的方法的日志注入。
后續(xù)我會(huì)在 github 開放源碼,并打包至 npm ,需要的開發(fā)者可自行 install 調(diào)用。
封裝小程序 Log 方法
封裝 Log 方法前,我們需要整理該方法需要考慮什么內(nèi)容:
打印格式:統(tǒng)一打印格式有助于我們更快的定位問題
版本號(hào):方便我們清晰的知道當(dāng)前用戶使用的小程序版本,避免出現(xiàn)舊版本問題在新代碼中找不到問題
兼容性:我們需要考慮用戶小程序版本不足以支持 getLogManager
、 getRealtimeLogManager
的情況
類型:我們需要兼容 debug
、 log
、 error
類型的 log日志
版本問題
我們需要一個(gè)常量用以定義版本號(hào),以便于我們定位出問題的代碼版本。
如果遇到版本問題,我們可以更好的引導(dǎo)用戶
const VERSION = "1.0.0" const logger = wx.getLogManager({ level: 0 }) logger.log(VERSION, info)
打印格式
我們可以通過 [version] file | content
的統(tǒng)一格式來更快的定位內(nèi)容。
const VERSION = "1.0.0" const logger = wx.getLogManager({ level: 0 }) logger.log(`[${VERSION}] ${file} | `, ...args)
兼容性
我們需要考慮用戶小程序版本不足以支持 getLogManager
、 getRealtimeLogManager
的情況
const VERSION = "0.0.18"; const canIUseLogManage = wx.canIUse("getLogManager"); const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null; const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null; export function RUN(file, ...args) { console.log(`[${VERSION}]`, file, " | ", ...args); if (canIUseLogManage) { logger.log(`[${VERSION}]`, file, " | ", ...args); } realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args); }
類型
我們需要兼容 debug
、 log
、 error
類型的 log日志
export function RUN(file, ...args) { ... } export function DEBUG(file, ...args) { ... } export function ERROR(file, ...args) { ... } export function getLogger(fileName) { return { DEBUG: function (...args) { DEBUG(fileName, ...args) }, RUN: function (...args) { RUN(fileName, ...args) }, ERROR: function (...args) { ERROR(fileName, ...args) } } }
完整代碼
以上都做到了,就完成了一套 Log
系統(tǒng)的基本封裝。
const VERSION = "0.0.18"; const canIUseLogManage = wx.canIUse("getLogManager"); const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null; const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null; export function DEBUG(file, ...args) { console.debug(`[${VERSION}] ${file} | `, ...args); if (canIUseLogManage) { logger.debug(`[${VERSION}]`, file, " | ", ...args); } realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args); } export function RUN(file, ...args) { console.log(`[${VERSION}]`, file, " | ", ...args); if (canIUseLogManage) { logger.log(`[${VERSION}]`, file, " | ", ...args); } realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args); } export function ERROR(file, ...args) { console.error(`[${VERSION}]`, file, " | ", ...args); if (canIUseLogManage) { logger.error(`[${VERSION}]`, file, " | ", ...args); } realtimeLogger && realtimeLogger.error(`[${VERSION}]`, file, " | ", ...args); } export function getLogger(fileName) { return { DEBUG: function (...args) { DEBUG(fileName, ...args) }, RUN: function (...args) { RUN(fileName, ...args) }, ERROR: function (...args) { ERROR(fileName, ...args) } } }
全局注入 Log
通過該章節(jié)的名稱,我們就可以知道全局注入。
全局注入的意思就是,不通過手動(dòng)調(diào)用的形式,在方法寫完后自動(dòng)注入 log
,你只需要在更細(xì)節(jié)的地方考慮打印 log
即可。
為什么要全局注入
雖然我們實(shí)現(xiàn)了全局 log
的封裝,但是很多情況下,一些新同學(xué)沒有好的打 log
的習(xí)慣,尤其是前端同學(xué)(我也一樣)。
所以我們需要做一個(gè)全局注入,以方便我們的代碼書寫,也避免掉手動(dòng)打 log
會(huì)出現(xiàn)遺漏的問題。
如何進(jìn)行全局注入
小程序提供了 behaviors
參數(shù),用以讓多個(gè)頁面擁有相同的數(shù)據(jù)字段和方法。
需要注意的是,
page
級(jí)別的behaviors
在 2.9.2 之后開始支持
我們可以通過封裝一個(gè)通用的 behaviors
,然后在需要 log
的頁面進(jìn)行引入即可。
import * as Log from "./log-test"; export default Behavior({ definitionFilter(defFields) { console.log(defFields); Object.keys(defFields.methods || {}).forEach(methodName => { const originMethod = defFields.methods[methodName]; defFields.methods[methodName] = function (ev, ...args) { if (ev && ev.target && ev.currentTarget && ev.currentTarget.dataset) { Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, event dataset = `, ev.currentTarget.dataset, "params = ", ...args); } else { Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, params = `, ev, ...args); } originMethod.call(this, ev, ...args) } }) } })
關(guān)于“小程序中的Log日志系統(tǒng)該如何搭建和使用”就介紹到這了,更多相關(guān)內(nèi)容可以搜索億速云以前的文章,希望能夠幫助大家答疑解惑,請(qǐng)多多支持億速云網(wǎng)站!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。