前端监控插件 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-monitor

2.导入

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的请求不会对其监控
})