ddd-monitor-sdk

前端监控SDK (Front-end monitor SDK)

简介

这款前端监控SDK提供了一系列功能来帮助开发者监控前端应用的稳定性、性能和用户行为，并及时发现和解决问题。SDK支持js报错监控、资源加载错误监控、 接口请求异常监控、白屏监控、性能指标测量、业务分析依据、用户埋点统计和数据上报等功能。开发者可以根据自己的需求使用这些功能，以便及时捕获并解决问题。 该文档提供了尽可能详细的安装和配置说明，以及API参考，方便开发者使用和扩展。

测试说明

该SDK目前已经完成单元测试和集成测试，覆盖率以及兼容性待进一步完成测试，如各位开发者在使用中遇到问题或建议随时受教；

安装和初始化说明

安装

npm install ddd-monitor-sdk --save

监控数据初始化

// 已vue为例： main.js文件中注入配置
import { initMonitor } from 'ddd-monitor-sdk';

initMonitor({
    appId: 'vue-credit', // 系统id （区分不同的项目）
    userId: '000000001', // 用户id
    reportType: '', // 上报方式 fetch(默认)，img，sendBeacon, imgSendBeacon(两种方式合并）
    reportUrl: 'http://......front_error_log', // 服务端上报地址(必填）
    reportUrlImg: '', // // 如何采用了两种方式合并，需多串一个img上传地址，推荐1*1px git图片
    delay: 0, // 延迟和合并上报的功能
    routerType: 'hash', // 路由类型 hash 或 history  默认hash
    stabilityReport: false, // 是否开启稳定性监控（js,promise,资源加载，xhr（默认监控异常），fetch(只监控异常）, 白屏）
    isHideResourceError: false, // 是否关闭资源错误上报 默认false 
    xhrType: 'error', // xhr监控类型 all,load,abort,error ; 默认只监控 error
    autoTrackerReport: false, // 自动埋点是否开启
    pageTrackerReport: false, // 是否开启用户停留及pv上报
    timingReport: false, // 是否开启性能指标监控
    longTaskReport: false, // 是否开启长任务监控(卡顿)
});


// 原生js引用方法
// 1.下载ddd-monitor-sdk.min.js包
<script src="../ddd-monitor-sdk.min.js"></script>
window.dddMonitorSdk.initMonitor({
    // ...
})

初始化配置说明

配置项	说明	可选值	数据类型	默认值	是否必填
appId	系统id，用于区分不同的项目	无	字符串	无	否
userId	用户id	无	字符串	无	否
reportType	上报方式	fetch, img, sendBeacon, imgSendBeacon	字符串	fetch	否
reportUrl	服务端上报地址	无	字符串	无	是
reportUrlImg	imgSendBeacon上报方式时需要单独配置图片地址，推荐1X1像素git图片	无	字符串	无	否
delay	延迟上报时间（单位毫秒）	无	数字	0	否
routerType	路由类型	hash, history	字符串	hash	否
stabilityReport	是否开启稳定性监控	true, false	布尔型	false	否
isHideResourceError	是否关闭资源错误上报	true, false	布尔型	false	否
xhrType	xhr监控类型	all, load, abort, error	字符串	error	否
autoTrackerReport	是否开启自动埋点	true, false	布尔型	false	否
pageTrackerReport	是否开启用户停留及PV上报	true, false	布尔型	false	否
timingReport	是否开启性能指标监控	true, false	布尔型	false	否
longTaskReport	是否开启长任务监控(卡顿)	true, false	布尔型	false	否

注：reportType 推荐最优上报方式为：imgSendBeacon, 及 img 上报和 sendBeacon 兼容的方式， 如果浏览器支持 sendBeacon 则使用 sendBeacon 上报， 如果浏览器不支持，降级使用 img 上报，采用 imgSendBeacon 上报，在配置 reportUrl 为 sendBeacon 的上报地址后吗，还需要为 img 上报单独配置 reportUrlImg 图片地址； 也需要后端对此上报方式做对应的处理；

手动上报

手动捕获异常上报

import { errorCatcher } from 'ddd-monitor-sdk';

// errorCatcher(errorTitle, message)
errorCatcher('高德地图加载异常捕获', '地图加载量单日超限')

埋点手动上报

import { actionTracker } from 'ddd-monitor-sdk';

// actionTracker(actionType, data)
actionTracker('click', '首页按钮点击')

上报数据类型说明

公共数据

{
  appId, // 项目的appId
  userId, // 用户id
  type, // 上报类型：error/action/visit/user
  title: '', // 当前页title
  url: '', // 当前页url
  timestamp: '', // 当前时间戳
  userAgent: '', // 当前浏览器信息
}

稳定性监控

资源加载异常

{
    type: 'error', // 上报类型
    kind: 'stability', // 大类型：稳定性指标
    errorType: 'resourceError', // 错误类型
    filename: '', // 报错文件
    tagName: '', // 标签名
    selector: ''// 代表最后一个操作的元素
}

js加载错误

{
    type: 'error', // 上报类型
    kind: 'stability', // 大类型：稳定性指标
    errorType: 'jsError', // 错误类型
    message: '', // 报错信息
    filename: '', // 报错文件
    position: '', // 报错位置 行：列
    stack: '', // 堆栈信息 哪个方法调用哪一块儿
    selector: ''// 代表最后一个操作的元素
}

promise错误

{
    type: 'error', // 上报类型
    kind: 'stability', // 大类型：稳定性指标
    errorType: 'promiseError', // 错误类型
    message: '', // 报错信息
    filename: '', // 报错文件
    position: '', // 报错位置 行：列
    stack: '', // 堆栈信息 哪个方法调用哪一块儿
    selector: ''// 代表最后一个操作的元素
}

手动上报异常

{
    type: 'error', // 上报类型
    message: '', // 异常信息
    error: '', // 异常标题
    errorType: 'catchError'
}

XHR 请求监控

{
    type: 'xhr', // 上报类型
    kind: "stability", // 大类型：稳定性指标
    eventType: '',  // load, error, abort 请求类型
    pathname: '', // 请求路径
    status: '', // 状态码
    duration, // 持续时间
    response: '', // 响应体
    params:'', // 入参
}

fetch 请求监控

{
    type: 'fetch', // 上报类型
    kind: "stability", // 大类型：稳定性指标
    eventType: '', // 响应类型：loadError（连接错误），error（解析错误）
    pathname: '', // 请求地址url
    status: '', // 状态码
    duration, // 耗时
    response: '', // 响应体
    method, // 请求方式
    params: '', // 入参
}