ddd-monitor-sdk

1.1.6 • Public • Published

前端监控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: '', // 入参
}

Package Sidebar

Install

npm i ddd-monitor-sdk

Weekly Downloads

1

Version

1.1.6

License

ISC

Unpacked Size

98.2 kB

Total Files

5

Last publish

Collaborators

  • hhd15147218548