微信 小程序 js 错误监控

前言

线上错误一直是一个敏感且严重的问题，所以我们在前端错误监控方面要做好做全。今天将介绍微信小程序自己提供的日志和api 来完成错误的捕获。

web分析 – js分析

微信平台有自己的监控系统和上报日志，我们可以在 小程序后台 --> web分析 --> 性能质量 --> js 分析 里面查看分析 账号得有 数据分析者（基础分析）权限才能有web分析入口。具体操作步骤参考 sourceMap 匹配调试

• 当前日志和错误分析使用微信原生代码开发的，没有问题；能准确的找出错误。
• 如果是使用框架，uniapp 或者 taro 代码经过了webpack 打包，做过代码混析。

undefined is not an object (evaluating \'n.replace\')
K@https://usr//appservice.app.js:6091:265496
@https://usr//appservice.app.js:6091:169381
value@https://usr//appservice.app.js:6095:110759
trigger@https://usr//appservice.app.js:6091:262544
@https://usr//cashbook/record-worktime/personal/index.appservice.js:63:7566
d@https://usr//appservice.app.js:6097:165541
@https://usr//appservice.app.js:6097:166899
r@https://usr//appservice.app.js:6097:159387
a@https://usr//appservice.app.js:6097:159591

• 定位到的报错变量是n，这已经是taro 打包后的代码，已经不能使用该方法来定位到错误位置。
• 这时候我们需要另辟蹊径，换一种方式来实现

实时日志 + 错误捕获api

• wx.onError(function listener)：监听小程序错误事件。如脚本错误或 API 调用报错等 参考地址
• wx.getRealtimeLogManager() : 上传实时日志，开发者可通过提供的接口打印日志，日志汇聚并实时上报到小程序后台。开发者可从小程序管理后台We分析 - 性能质量 - 实时日志进入小程序端日志查询页面。参考地址

import Taro from "@tarojs/taro"

/**
 * @description 微信日志打印
 */
class CreateWxLogs {
  static log: Taro.RealtimeLogManager

  static create() {
    if (Taro.getRealtimeLogManager) {
      this.log = Taro.getRealtimeLogManager()
    }
  }

  static info(info: string) {
    if (!this.log) return
    this.log.info(info)
  }

  static warn(warn: string) {
    if (!this.log) return
    this.log.warn(warn)
  }

  static error(err: string) {
    if (!this.log) return
    this.log.error(err)
  }

  static setFilterMsg(msg: string) { // 从基础库2.7.3开始支持
    if (!this.log || !this.log.setFilterMsg) return
    if (typeof msg !== 'string') return
    this.log.setFilterMsg(msg)
  }

  static addFilterMsg(msg: string) { // 从基础库2.8.1开始支持
    if (!this.log || !this.log.addFilterMsg) return
    if (typeof msg !== 'string') return
    this.log.addFilterMsg(msg)
  }

  /** 捕获到错误信息后，把日志传给微信后台 */
  static getError() {
    Taro.onError((err) => this.error(err))
  }
}

CreateWxLogs.create()

export default CreateWxLogs

• CreateWxLogs.getError() 在页面调用后，错误信息就会在日志里面。和开发者工具的console效果是一样的。可以看到源码的报错变量，和报错方法。注意：上报实时日志只在真机上生效，模拟器上不会有错误上报。