前端监控方案

总览

前端监控主要分为以下几个方面

1. 性能监控 采集以用户为中心的性能指标

2. 错误监控 捕获代码错误和资源错误

3. 行为监控 采集用户的点击事件、停留时间、ip, 清洗数据，描绘用户画像、pv、uv

4. 数据上报 合适的方式上报数据给服务端

性能监控

主要分为页面性能和资源性能

1. 使用旧的APIwindow.performance
2. requestAnimationFrame测量浏览器帧率
3. PerformanceObserver订阅与性能相关的事件，回调在空闲期间触发
4. 使用elementtiming具体监听某个元素的加载时间

错误监控

1. 资源加载错误；可利用addEventListener('error', callback)采集
2. js执行错误；可利用window.onerror采集
3. promise错误；可利用addEventListener('unhandledrejection', callback)采集
4. react ErrorBoundary
5. Vue.config.errorHandler = function (err) { setTimeout(() => { throw err }) } window.onerror = function (message, url, line, column, error) { console.log(message, url, line, column, error); }

行为监控

1. 路由变化

2. 设备信息：

• 操作系统、分辨率、浏览器
• IP、指纹标识用户
• pv、uv
• document.referrer获取来源地址

3. Referrer

错误上报

性能数据可以在页面加载完成之后采集并上报，尽量不要对页面性能造成影响。或者requestIdleCallback

错误上报一般使用一般采用批量和立即上报2种方式

1. Xhr

2. Image

3. Sendbeacon

window.onload = () => {
// 在浏览器空闲时间获取性能及资源信息
// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
if (window.requestIdleCallback) {
    window.requestIdleCallback(() => {
        monitor.performance = getPerformance()
        monitor.resources = getResources()
    })
} else {
    setTimeout(() => {
        monitor.performance = getPerformance()
        monitor.resources = getResources()
    }, 0)
}
}

window.unload = function() { // 在页面卸载的时候上报错误数据
navigator.sendBeacon('/xxxx', monitor.errors)
}
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
//onunload不要用，移动端有问题
//可以用pagehide来代替

常见问题

1. 为什么用1*1的gif图片

• 没有跨域问题

• 发 POST 请求之后不需要获取和处理数据、服务器也不需要发送数据

• 不会携带当前域名 cookie

• 不会阻塞页面加载，影响用户的体验，只需 new Image 对象

• 相比于 BMP/PNG 体积最小，可以节约 41% / 35% 的网络资源小

• 详见为什么大厂前端监控都在用GIF做埋点？ - 掘金

附录

• https://github.com/mitojs/mitojs

• https://github.com/zzfn/monitor