monitor-fe

电商前端监控器

介绍

前端项目运行在客户端（比如小程序、公众号、手机浏览器、pc电脑上等），运行情况我们是不可知的，当出现错误和问题时我们无法第一时间知晓，等客户反馈以后再处理会有很大的延迟，可能对客户造成巨大的经济损失。为了解决这个问题，我们开发了此项目：前端监控器。可以实时搜集错误信息生成日志上报到企业微信群中，方便及时修复问题。

特性

• 快捷引入，使用npm管理包
• 内部自动捕获浏览器抓取的报错、promise抛出的报错、vue语法报错(需要在初始化配置表设置vue为true)
• 可自定义各接入项目的名称
• 支持自定义延迟合并上报间隔时间（会自动对高频错误进行去重合并，并延时上报）
• 支持白名单过滤
• 白名单支持正则匹配
• 支持小程序接入
• 支持自定义任意数据，会自动合并上报到更多信息中
• 支持自定义上报请求方法，比如在小程序中使用wx.request上报
• 支持自定义设备信息，可以自己实现浏览器信息收集

安装

使用npm:

$ npm install monitor-fe -S

引入

import webMonitor from 'monitor-fe'

初始化

window.webMonitor = new WebMonitor({
  systemName: 'your-system-name',  //【必填】接入方系统名称，一般为git名称
  reportUrl: (process.env.NODE_ENV === 'prod' ? 'https://xxx.xxx.cn' : 'https://test-xxx.xxx.cn') + '/web-monitor/web/monitor', // 【必填】上报接口地址
  userId: 362386428743, //【非必填】用户id
  shopId: 2, //【非必填】店铺id
  delayTime: 10000, //【非必填】延迟合并去重上报间隔
  vue: false, //【必填】是否需要引入vue
  mini: false, //【非必填】是否是小程序接入：默认是在小程序环境里，为了兼容小程序老代码
  wx: wx,  //【非必填】微信对象,只有小程序接入才需要配置此项且配置为 wx 即可
  ajax: (reportData) => { //【非必填】外部传入的ajax方法，可以在接入方覆写上报请求
    wx.request({
      url: '...', 
      method: 'post', 
      data: reportData
    })
  }, 
  getUserAgent: () => { //【非必填】外部传入的设备数据方法，可在接入方覆写获取设备数据或浏览器信息方法
    return '这是自己获取的设备信息'
  } 
})

初始化时同步设置自定义参数

window.webMonitor = new WebMonitor({
  ... 上述各种参数,
  key1: value1,
  key2: value2,
  key3: value3,
  zhangsan: 111,
  lisi: [1,2,3,4,5],
  wangwu: {
    aaa:'uuuu',
    bbb:'ggggg'
  }
})

任意时刻异步设置自定义参数

window.webMonitor && window.webMonitor.setOption({
  key1: value1,
  key2: value2,
  key3: value3,
  zhangsan: 111,
  lisi: [1,2,3,4,5],
  wangwu: {
    aaa:'uuuu',
    bbb:'ggggg'
  }
})

发送自定义错误事件

错误类型为httpError时

使用axios：

window.webMonitor && window.webMonitor.emit({
  type: 'httpError',
  error: response //使用axios响应拦截器里的返回对象即可
})

自己实现axios中的数据结构

window.webMonitor && window.webMonitor.emit({
  type: 'httpError',
  error: {
    config: {
      method: 'get',
      data: {
        id: '875983275892739'
      },
      headers: {
        'Content-type': 'application/json'
      }
    },
    request: {
      responseURL: 'https://xxx.xxx.cn/api/demo'
    }
  }
})

错误类型tryCatchError时

在try catch语句中调用：

window.webMonitor && window.webMonitor.emit({
  type: 'tryCatchError',
  error: error
})

错误类型为其他时

window.webMonitor && window.webMonitor.emit({
  type: 'yuanyuanError',
  error: 'this is a error message!'
})

或者

window.webMonitor && window.webMonitor.emit({
  type: 'yuanyuanError',
  error: new Error('this is a error message!')
})

维护白名单

在自己部署的静态资源库仓库 http://xxx.xxx.cn/common-static 中，修改monitor-white-list.json文件

白名单正则表达式写法

示例：

"239": "<TimePicker> at packages/date-picker/src/panel/time.vue",
"240": "$$【^, {}$】【g】",
"241": "$$【^https://xxx.xxx.cn/cp/static/js/app.】",
"242": "$$【^Unhandled promise rejection, {}$】, 【g】"

说明： $$为正则语句标识符，【】括号也是边界符， 第一个参数为表达式， 第二个参数为匹配范围。