@doctorwork/web-report-sdk NPM

引入方式

npm install @doctorwork/web-report-sdk --save

import webReportSdk from '@doctorwork/web-report-sdk';
const monitor = webReportSdk({
    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 。

使用域名判断env

import webReportSdk, { utils } from '@doctorwork/web-report-sdk';
const monitor = webReportSdk({
    appId: "xxx",
    env: utils.getEnvByDomain(),
})

目前支持的域名枚举

const orgins = [
  {
    domain: 'xingrengo.com',
    env: 'dev',
  },
  {
    domain: 'web-dev.doctorwork.com',
    env: 'dev',
  },
  {
    domain: 'web-qa.doctorwork.com',
    env: 'qa',
  },
  {
    domain: 'aihaisi.com',
    env: 'qa',
  },
  {
    domain: 'xingrenys.com',
    env: 'pre',
  },
  {
    domain: 'web-pre.doctorwork.com',
    env: 'pre',
  },
  {
    domain: 'webprod.doctorwork.com',
    env: 'prod',
  },
  {
    domain: 'xrxr.xyz',
    env: 'prod',
  },
  {
    domain: 'xingren.com',
    env: 'prod',
  },
];

errcodeReport:

  webReportSdk({
    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 = webReportSdk({
    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);

浏览器页面直接引用资源方式(不推荐)：

1、下载 dist/web-report-default.min.js 到本地
2、使用 script 标签引入到 html 的头部（备注：放到所有 js 资源之前）
3、调用初始化方法

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../dist/default.min.js" crossorigin></script>
    <script>
      dta.init({
        env: 'qa',
        appId: 'xxxx',
      });
    </script>
  </head>
</html>

跨域获取不到错误信息问题

当我们引入跨域的script资源并且此script内部有js报错的时候，sdk全局window.onerror将无法捕获到详细报错，只会获取到一个msg：Script error. 解决的方法就是给跨域的script标签使用crossorigin属性，并且需要服务器为当前资源设置cors

SDK 主要上报以下性能信息

url 上报页面地址
preUrl 来访上一页面 URL
performance 页面性能数据详情，字段含义详情请参考后面内容
errorList 页面错误信息详情，包含 js,img,ajax,fetch 等所有错误信息，字段含义详情请参考后面内容
resoruceList 页面性能数据详情，当前页面所有资源性能详情信息，字段含义详情请参考后面内容
markUv 统计 uv 标识
markUser 从用户进入网站开始标识，直到用户离开销毁，可以用来做用户漏斗分析
time 当前上报时间
screenwidth 屏幕宽度
screenheight 屏幕高度
isFristIn 是否是某次会话的第一次进入
type 上报类型 1:页面级性能上报 2:页面 ajax 性能上报 3：页面内错误信息上报