### [聊聊小程序中的 Log 日志系统，看看怎么搭建和使用](https://www.prosaas.cn/article/16313)

**Published:** 2022-01-21T02:26:20

**Author:** 5201314

**Excerpt:** 本篇文章带大家聊聊小程序中的 Log 日志系统，介绍一下如何使用小程序 Log 日志系统，以及如何搭建小程序 …

本篇文章带大家聊聊小程序中的 Log 日志系统，介绍一下如何使用小程序 Log 日志系统，以及如何搭建小程序 Log 日志系统，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/61ea194a81551603.jpg)

通常情况下，日志系统是开发中重要的一环。

但出于种种原因，在前端开发中做日志打印和上报系统却不常见。  
但有些特定情况下，日志系统往往有奇效。

比如一个聊天系统中遇到了以下问题：

-   语音通话中，用户听不到声音
-   即时通讯中，部分场景用户反馈，消息发送不出去
-   即时通讯中， 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 日志系统，看看怎么搭建和使用的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** Error, github, npm, 命名空间, 封装, 常量, 接口

**Categories:** 后端开发

---