這篇文章主要為大家分析了小程序中的Log日志系統(tǒng)該如何搭建和使用的相關(guān)知識點，內(nèi)容詳細易懂，操作細節(jié)合理，具有一定參考價值。如果感興趣的話，不妨跟著跟隨小編一起來看看，下面跟著小編一起深入學(xué)習(xí)“小程序中的Log日志系統(tǒng)該如何搭建和使用”的知識吧。
在臨邑等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),臨邑網(wǎng)站建設(shè)費用合理。
通常情況下，日志系統(tǒng)是開發(fā)中重要的一環(huán)。
但出于種種原因，在前端開發(fā)中做日志打印和上報系統(tǒng)卻不常見。
但有些特定情況下，日志系統(tǒng)往往有奇效。
比如一個聊天系統(tǒng)中遇到了以下問題：
語音通話中，用戶聽不到聲音
即時通訊中，部分場景用戶反饋，消息發(fā)送不出去
即時通訊中， A 回復(fù) B 消息時，偶爾對話框不顯示
即時通訊中， A 給 B 連續(xù)發(fā)送兩條消息后， B 接收不到第二條的提示
即時通訊中，發(fā)送語音消息發(fā)送時，用戶以為語音已經(jīng)發(fā)送，但實際上錄音還在繼續(xù)。這時用戶以為是網(wǎng)絡(luò)卡了，最后發(fā)現(xiàn)自己和其他人說話的聲音被錄制進去
但是以上幾種錯誤，在后臺接口中并沒有體現(xiàn)。再加上部分用戶手機型號的問題，導(dǎo)致問題很難被定位。
如果我們這里有 log ，我們就能很快定位到出問題的代碼。
如果不是代碼問題，也更有底氣回復(fù)用戶不是我們系統(tǒng)的問題。
小程序側(cè)提供了兩種小程序 Log 日志接口：
LogManager ( 普通日志)
RealtimeLogManager ( 實時日志)
官方并沒有介紹兩者的具體區(qū)別，只是強調(diào)了 Realtime 的實時性質(zhì)。
在我看來他們的最大區(qū)別就是：
LogManager 可以讓用戶有種心安的感覺，因為 LogManager 是用戶手動反饋的問題。
RealtimeLogManager 則對開發(fā)者更友好，可以在用戶不知情的情況下收集到問題信息，并在用戶無感的情況下對問題進行修復(fù)。
LogManager
小程序提供的 Log 日志接口，通過 wx.getLogManager() 獲取實例。
注意：
最多保存5M的日志內(nèi)容，超過5M后，舊的日志內(nèi)容會被刪除。
對于 小程序，用戶可以通過使用 button 組件的 open-type="feedback" 來上傳打印的日志。
對于 小游戲，用戶可以通過使用 wx.createFeedbackButton 來創(chuàng)建上傳打印的日志的按鈕。
開發(fā)者可以通過小程序管理后臺左側(cè)菜單 反饋管理頁面查看相關(guān)打印日志。
創(chuàng)建 LogManager 實例
你可以通過 wx.getLogManager() 獲取日志實例。
括號中可以傳參 { level: 0 | 1 } 來決定是否寫入 Page 的生命周期函數(shù)， wx 命名空間下的函數(shù)日志。
0： 寫入
1： 不寫入
https://github.com/Kujiale-Mobile/Painter
使用 LogManager 實例
重慶分公司
重慶分公司
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 頁面，單擊 反饋與投訴，在點擊 功能異常進行日志上傳。
開發(fā)者處理用戶反饋及和用戶溝通
開發(fā)者可以在小程序后臺 管理-> 用戶反饋-> 功能異常查看用戶反饋的信息。
開發(fā)者可以在 功能-> 客服下綁定客服微信，綁定后可以在 48小時內(nèi)通過微信和反饋用戶溝通。
注：溝通需要用戶反饋時勾選：允許開發(fā)者在 48 小時內(nèi)通過客服消息聯(lián)系我。
RealtimeLogManager
小程序提供的 實時Log 日志接口，通過 wx.getRealtimeLogManager() 獲取實例。
注意：
wx.getRealtimeLogManager() 基礎(chǔ)庫 2.7.1開始支持
官方給出實時日志每條的容量上限是 5kb
官方對每條日志的定義：在一個頁面 onShow -> onHide 之間，會聚合成一條日志上報
開發(fā)者可從小程序管理后臺： 開發(fā)-> 運維中心-> 實時日志進入小程序端日志查詢頁面
為了定位問題方便，日志是按頁面劃分的，某一個頁面，在onShow到onHide（切換到其它頁面、右上角圓點退到后臺）之間打的日志，會聚合成一條日志上報，并且在小程序管理后臺上可以根據(jù)頁面路徑搜索出該條日志
創(chuàng)建 RealtimeLogManager 實例
你可以通過 wx.getRealtimeLogManager() 獲取實時日志實例。
const logger = wx.getRealtimeLogManager()
使用 RealtimeLogManager 實例
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])查看實時日志
與普通日志不同的是，實時日志不再需要用戶反饋，可以直接通過以下方式查看實例。
登錄小程序后臺
通過路徑 開發(fā)-> 開發(fā)管理-> 運維中心-> 實時日志查看實時日志
如何搭建小程序 Log 日志系統(tǒng)
上面我們知道了小程序的 Log 日志怎么使用，我們當(dāng)然可以不進行封裝直接使用。
但是我們直接使用起來會感覺到十分的別扭，因為這不符合我們程序員單點調(diào)用的習(xí)慣。
那么接下來讓我們對這套 Log 系統(tǒng)進行初步的封裝以及全局的方法的日志注入。
后續(xù)我會在 github 開放源碼，并打包至 npm ，需要的開發(fā)者可自行 install 調(diào)用。
封裝小程序 Log 方法
封裝 Log 方法前，我們需要整理該方法需要考慮什么內(nèi)容：
打印格式：統(tǒng)一打印格式有助于我們更快的定位問題
版本號：方便我們清晰的知道當(dāng)前用戶使用的小程序版本，避免出現(xiàn)舊版本問題在新代碼中找不到問題
兼容性：我們需要考慮用戶小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情況
類型：我們需要兼容 debug 、 log 、 error 類型的 log日志
版本問題
我們需要一個常量用以定義版本號，以便于我們定位出問題的代碼版本。
如果遇到版本問題，我們可以更好的引導(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é)的名稱，我們就可以知道全局注入。
全局注入的意思就是，不通過手動調(diào)用的形式，在方法寫完后自動注入 log ，你只需要在更細節(jié)的地方考慮打印 log 即可。
為什么要全局注入
雖然我們實現(xiàn)了全局 log 的封裝，但是很多情況下，一些新同學(xué)沒有好的打 log 的習(xí)慣，尤其是前端同學(xué)（我也一樣）。
所以我們需要做一個全局注入，以方便我們的代碼書寫，也避免掉手動打 log 會出現(xiàn)遺漏的問題。
如何進行全局注入
小程序提供了 behaviors 參數(shù)，用以讓多個頁面擁有相同的數(shù)據(jù)字段和方法。
需要注意的是，
page級別的behaviors在 2.9.2 之后開始支持
我們可以通過封裝一個通用的 behaviors ，然后在需要 log 的頁面進行引入即可。
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)容可以搜索創(chuàng)新互聯(lián)以前的文章，希望能夠幫助大家答疑解惑，請多多支持創(chuàng)新互聯(lián)網(wǎng)站！
