sdk-web-monitor v1.0.0
前端监控插件 sdk-web-monitor
sdk-web-monitor 是通过TypeScript编写和Rollup工具打包来实现的一个前端监控SDK插件——使用方便、易扩展，目前已实现页面性能监控、异常监控、Http网络请求监控、用户行为监控的数据采集与上报至监控后台等基本功能。
✨功能介绍
1.页面性能监控
页面性能监控主要是采集网站前端页面性能数据，并进行上报。如FP、FCP、DOMReady、DNS等页面性能数据。
DNS、DomReady、Load性能参数根据Navigation timing获取。window.performance.getEntriesByType("navigation")，Navigation timing时间精度可以达毫秒的小数点好几位，精度比performance.timing高，但兼容性差。FP 和 FCP 通过
new PerformanceObserver(性能监视器)方法获取。entryTypes(入口类型)为 paint 的元素渲染。
2.异常监控
异常监控主要是采集网站的异常情况数据，并进行上报。如JS异常数据、资源加载异常数据、Promise异常数据、Console异常数据。
- JS异常： 通过
window.onerror采集JS的异常数据并上报 - 资源加载异常：通过
window.addEventListener监听error事件，window.onerror和addEventlistener('error', handler, true)都会监控到JS异常，所以资源异常监控要判断是否存在src/image属性过滤 - Promise异常：监听
unhandledrejection事件 - Console异常：对
console.error重写，保存原方法并通过call调用 - 异常错误的上报用
Set去重
3.Http网络请求监控
Http网络请求监控主要是采集网站的所有网络请求数据（包括xhr和fetch两种请求方式），并进行上报。如Http成功请求的响应时间、Http失败请求的数据等，以及可以设置监控请求的url过滤。
Http请求异常：对xhr的
open和send方法，window.fetch方法进行重写，实现了请求url过滤（用户可自定义过滤url），在过滤列表内的url地址不会对其监听，以及手动new Error().stack抛出错误堆栈。劫持是怎么实现的？ 劫持send方法，通过
this.addEventlistener监听xhr实例的readystatechange事件，在事件监听的回调中判断状态码并对数据处理（比如发送的延时、持续时间、状态码、请求的类型、响应内容）并上报。
4.用户行为监控
用户行为监控主要是采集网站用户行为数据，并进行上报。如路由切换数据，并以此为基础可以计算出PV、UV、浏览器使用占比统计、页面访问情况统计等。
PV：用户每次进入页面时上报即可，需要注意
SPA单页面应用要结合路由跳转UV：服务端根据
cookie判断PV的第一次上报即为一次UV
5.数据上报
原理：将以上监控数据带上时间缓存在队列里，分批发送给后端，因为一个个发送太耗费通信资源。同时，为了不影响页面性能，将发送数据这个动作放在requestIdleCallback函数里，这个函数是趁着页面刷新间隙执行的，这段时间浏览器是空闲的。
数据上报采用
requestIdleCallback（帧的空闲发送）和Navigator.sendBeacon负责维护一个缓存
队列，按照一定的队列长度和缓存时间间隔来聚合上报数据，会开放一些方法自定义缓存队列长度和缓存间隔时间用户自定义配置项：用户可自定义缓存队列长度、缓存间隔时间、请求过滤url地址
快速上手
1.安装项目依赖
npm i sdk-web-monitor -S # 或者 yarn add sdk-web-monitor2.导入
import { initMonitor } from 'sdk-web-monitor'3.初始化
用户可以自定义配置：
以下都为可选值
- 上报给监控后台的url
- 请求池大小
- 请求时间间隔
- 请求过滤url
initMonitor({//初始化
setsetEmitUrl: 'http://localhost:3000/', //发送给监控后台的url地址
setEmitLen: 5 , //请求池的大小
setEmitTime: 5000 , //请求时间间隔/ms
setUrlIgnoreList: ['apifox.com'] //请求过滤url，即发送给apifox.com的请求不会对其监控
})1 year ago