小程序中的Log日志系统该如何搭建和使用
这篇文章主要为大家分析了小程序中的Log日志系统该如何搭建和使用的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“小程序中的Log日志系统该如何搭建和使用”的知识吧。
在临邑等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站建设 网站设计制作按需开发,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,成都外贸网站建设,临邑网站建设费用合理。
通常情况下,日志系统是开发中重要的一环。
但出于种种原因,在前端开发中做日志打印和上报系统却不常见。
但有些特定情况下,日志系统往往有奇效。
比如一个聊天系统中遇到了以下问题:
语音通话中,用户听不到声音
即时通讯中,部分场景用户反馈,消息发送不出去
即时通讯中, A 回复 B 消息时,偶尔对话框不显示
即时通讯中, A 给 B 连续发送两条消息后, B 接收不到第二条的提示
即时通讯中,发送语音消息发送时,用户以为语音已经发送,但实际上录音还在继续。这时用户以为是网络卡了,最后发现自己和其他人说话的声音被录制进去
但是以上几种错误,在后台接口中并没有体现。再加上部分用户手机型号的问题,导致问题很难被定位。
如果我们这里有 log
,我们就能很快定位到出问题的代码。
如果不是代码问题,也更有底气回复用户不是我们系统的问题。
如何使用小程序 Log 日志系统
小程序侧提供了两种小程序 Log 日志接口:
LogManager ( 普通日志)
RealtimeLogManager ( 实时日志)
官方并没有介绍两者的具体区别,只是强调了 Realtime 的实时性质。
在我看来他们的最大区别就是:
LogManager
可以让用户有种心安的感觉,因为LogManager
是用户手动反馈的问题。RealtimeLogManager
则对开发者更友好,可以在用户不知情的情况下收集到问题信息,并在用户无感的情况下对问题进行修复。
LogManager
小程序提供的 Log
日志接口,通过 wx.getLogManager()
获取实例。
注意:
最多保存5M的日志内容,超过5M后,旧的日志内容会被删除。
对于 小程序,用户可以通过使用
button
组件的open-type="feedback"
来上传打印的日志。对于 小游戏,用户可以通过使用
wx.createFeedbackButton
来创建上传打印的日志的按钮。开发者可以通过小程序管理后台左侧菜单 反馈管理页面查看相关打印日志。
创建 LogManager 实例
你可以通过 wx.getLogManager()
获取日志实例。
括号中可以传参 { level: 0 | 1 }
来决定是否写入 Page
的生命周期函数, wx
命名空间下的函数日志。
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 记录的日志
当日志记录后, 用户可以在小程序的 profile
页面,单击 反馈与投诉,在点击 功能异常进行日志上传。
开发者处理用户反馈及和用户沟通
开发者可以在小程序后台 管理-> 用户反馈-> 功能异常查看用户反馈的信息。
开发者可以在 功能-> 客服下绑定客服微信,绑定后可以在 48小时内通过微信和反馈用户沟通。
注:沟通需要用户反馈时勾选:允许开发者在 48 小时内通过客服消息联系我。
RealtimeLogManager
小程序提供的 实时Log
日志接口,通过 wx.getRealtimeLogManager()
获取实例。
注意:
wx.getRealtimeLogManager()
基础库 2.7.1开始支持官方给出实时日志每条的容量上限是
5kb
官方对每条日志的定义:在一个页面 onShow -> onHide 之间,会聚合成一条日志上报
开发者可从小程序管理后台: 开发-> 运维中心-> 实时日志进入小程序端日志查询页面
为了定位问题方便,日志是按页面划分的,某一个页面,在onShow到onHide(切换到其它页面、右上角圆点退到后台)之间打的日志,会聚合成一条日志上报,并且在小程序管理后台上可以根据页面路径搜索出该条日志
创建 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])
查看实时日志
与普通日志不同的是,实时日志不再需要用户反馈,可以直接通过以下方式查看实例。
登录小程序后台
通过路径 开发-> 开发管理-> 运维中心-> 实时日志查看实时日志
如何搭建小程序 Log 日志系统
上面我们知道了小程序的 Log
日志怎么使用,我们当然可以不进行封装直接使用。
但是我们直接使用起来会感觉到十分的别扭,因为这不符合我们程序员单点调用的习惯。
那么接下来让我们对这套 Log 系统进行初步的封装以及全局的方法的日志注入。
后续我会在 github 开放源码,并打包至 npm ,需要的开发者可自行 install 调用。
封装小程序 Log 方法
封装 Log 方法前,我们需要整理该方法需要考虑什么内容:
打印格式:统一打印格式有助于我们更快的定位问题
版本号:方便我们清晰的知道当前用户使用的小程序版本,避免出现旧版本问题在新代码中找不到问题
兼容性:我们需要考虑用户小程序版本不足以支持
getLogManager
、getRealtimeLogManager
的情况类型:我们需要兼容
debug
、log
、error
类型的log日志
版本问题
我们需要一个常量用以定义版本号,以便于我们定位出问题的代码版本。
如果遇到版本问题,我们可以更好的引导用户
const VERSION = "1.0.0" const logger = wx.getLogManager({ level: 0 }) logger.log(VERSION, info)
打印格式
我们可以通过 [version] file | content
的统一格式来更快的定位内容。
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
系统的基本封装。
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
通过该章节的名称,我们就可以知道全局注入。
全局注入的意思就是,不通过手动调用的形式,在方法写完后自动注入 log
,你只需要在更细节的地方考虑打印 log
即可。
为什么要全局注入
虽然我们实现了全局 log
的封装,但是很多情况下,一些新同学没有好的打 log
的习惯,尤其是前端同学(我也一样)。
所以我们需要做一个全局注入,以方便我们的代码书写,也避免掉手动打 log
会出现遗漏的问题。
如何进行全局注入
小程序提供了 behaviors
参数,用以让多个页面拥有相同的数据字段和方法。
需要注意的是,
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) } }) } })
关于“小程序中的Log日志系统该如何搭建和使用”就介绍到这了,更多相关内容可以搜索创新互联以前的文章,希望能够帮助大家答疑解惑,请多多支持创新互联网站!
文章题目:小程序中的Log日志系统该如何搭建和使用
分享网址:http://myzitong.com/article/gssepg.html