当前位置： 代码网 > 移动>腾讯>微信 > 聊聊小程序中的 Log 日志系统，看看怎么搭建和使用

聊聊小程序中的 Log 日志系统，看看怎么搭建和使用

2025年03月31日 • 微信 •我要评论
本篇文章带大家聊聊小程序中的 log 日志系统，介绍一下如何使用小程序 log 日志系统，以及如何搭建小程序 log 日志系统，希望对大家有所帮助！通常情况下，日志系统是开发中重要的一环。但出于种种原

本篇文章带大家聊聊小程序中的 log 日志系统，介绍一下如何使用小程序 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)
      }
    })
  }
})
登录后复制

总结

连着开发带整理，林林总总的也有了 2000+ 字，耗费了三天的时间，整体感觉还是比较值得的，希望可以带给大家一些帮助。

也希望大家更重视前端的 log 一点。这基于我自身的感觉，尤其是移动端用户。
在很多时候由于 手机型号 、 弱网环境 等导致的问题。
在没有 log 时，找不到问题的着力点，导致问题难以被及时解决。

后续我会在 github 开放源码，并打包至 npm ，开发者后续可自行 install 调用。
后续 源码地址 及 npm安装方法 将会在该页面更新。
开放时间基于大家需求而定。

【相关学习推荐：小程序开发教程】

以上就是聊聊小程序中的 log 日志系统，看看怎么搭建和使用的详细内容，更多请关注代码网其它相关文章！

赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com