npm:@doctorwork/wx-report-sdk

README

wx-report-sdk

使用方法：


微信小程序 app.js头部引入sdk

const wxReportSdk = require('@doctorwork/wx-report-sdk');

const monitor = wxReportSdk({
    appId: "xxx",
    env: "dev",
    filterUrls: ['api/xxxx/xx'],
    errcodeReport(res) {
      if (Object.prototype.toString.call(res) === '[object Object]' && res.hasOwnProperty('errcode') && res.errcode !== 0) {
        return { isReport: true, errMsg: res.errmsg,code: res.errcode };
      }
      return { isReport: false };
    },
    isTraceId: true,
    traceIdHeaderName: 'x-trace-id';
})

参数说明

初始化参数	类型	是否必填	默认	用例	描述
appId	String	必填	无	-	小程序的appId
env	String	可选	无	prod \| production , qa , dev , pre	控制domain地址：prod和production都为线上，不同环境内部会走不同接口
domain	String	可选	默认线上环境地址	https://api-dev.doctorwork.com/web-monitor/api/v1/wx/report/wx	定义上报api地址，优先级高于env （推荐使用env）
filterUrls	Array	可选	无	['api/xx']	可以过滤部分接口不对其做上报，比如一些轮训，字符串模糊匹配（尽量保证路径完整，模糊匹配可能会影响到其他接口）
errcodeReport(业务接口异常上报)	Function	可选	无	例子见下方	请求接口，httpstatus为200，业务接口异常通过消息体返回的错误。比如errcode为1代表后端代码异常，此时我们需要上传异常给监控
isTraceId	boolean	可选	false	无	是否开启traceId获取
traceIdHeaderName(服务端响应头返回的traceId字段名)	string	可选	x-qexr-trace-id	无	响应头需要2个字段 access-control-expose-headers: x-qexr-trace-id （允许前端获取）；x-qexr-trace-id:bdDq1a.a123.12

sdk默认会过滤的接口域名

'hm.baidu.com' //百度统计
'ssdata.xrxr.xyz' //神策
'sentry.aihaisi.com/' //sentry

三方统计的请求会造成大量垃圾数据，目前监控不会收集此类接口的数据，如果业务需要过滤部分不需要监控的接口，使用 filterUrls 。

errcodeReport:

  wxReportSdk({
    errcodeReport(res) {
      if (Object.prototype.toString.call(res) === '[object Object]' && res.hasOwnProperty('errcode') && res.errcode !== 0) {
        return { isReport: true, errMsg: res.errmsg,code: res.errcode };
      }
      return { isReport: false };
    }
  });

注意正向和反向判断

我们可能通过fetch或者xmlHttpRequest去请求任何资源比如接口、css、js(也可能是框架发送的请求)，errcodeReport接收的res响应数据，可能是字符串或者对象等多种类型，我们可能需要更加严格的判断来正确的判断是否需要上报业务错误，比如

正向判断res.errcode===1

errcodeReport(res) {
  if (Object.prototype.toString.call(res) === '[object Object]' && res.errcode == 1) {
    return { isReport: true, errMsg: res.errmsg,code: res.errcode };
  }
  return { isReport: false };
}

反向判断res.errcode!==0，如果不使用hasOwnProperty，那不存在errcode属性的接口响应也会被当作错误上报（我们的业务接口有些并不一定是完全规范的）

errcodeReport(res) {
  if (Object.prototype.toString.call(res) === '[object Object]' && res.hasOwnProperty('errcode') && res.errcode !== 0) {
    return { isReport: true, errMsg: res.errmsg,code: res.errcode };
  }
  return { isReport: false };
}

方法

setConfig：设置用户信息

可以只设置任意一个属性

monitor.setConfig({
  p: '1510123131',//电话
  uid: '100017' //用户id
});

addError：手动上报错误信息

let message = 'js add error';
let col = 20;
let line = 20;
let resourceUrl = 'http://www.xxx.com/01.js';

monitor.addError({
  msg: message,
  col: col,
  line: line,
  resourceUrl: resourceUrl
});

addCustom: 自定义埋点

const monitor = wxReportSdk({
    appId: "xxx",
    env: 'dev'
})
//默认立刻执行，如果不需要立刻执行，可以设置reportNow为false，埋点会进队列而后其他地方执行report或者页面切换或者其他接口请求，上报的时候会带上customs队列。
//reportNow默认true，可选参数
monitor.addCustom({
    customName: 'mgStart-getUserInfo',
    customContent: {
      userId: 123,
      system: {
        version: '1.2'
      }
    },
    /*
      非必填字段，自定义筛选条件，必须为对象，否则无效，手动选择部分字段上传。
      监控后台通过增删改filter字段，来筛选自定义的参数。也就是说当前customContent里的内容如果需要后期查询做筛选，需要把字段传入
      注意：customFilter只支持1层对象
    */
    customFilter: {
      userId: 123,
      version: '1.2'
    }
}, reportNow);

remax接入

需要在remax.config.js下plugins中注册 //remax.config.js { plugins:[ { registerRuntimePlugin() { return path.resolve(__dirname, './monitor.js') } } ] }

主要上报以下性能信息

errs 错误信息，包含 js 错误和 ajax 错误信息

markuser 用户标识，可用于做 uv 统计

net 用户的网络类型参考小程序的 wx.getNetworkType 方法

system 用户系统信息参考小程序的 wx.getSystemInfo 方法

loc 用户地理位置信息参考小程序的 wx.getLocation 方法

pages 用户当前浏览器的 path 路径和参数详情

ajaxs 当前 path 路径下 ajax 详细信息

time 上报时间

customs 自定义埋点

Usage no npm install needed!