web监控数据上报方案

前端行为监控（埋点）、异常监控、性能监控收集到的数据需要上报给服务端，目前较为常用的方案为三种。

1. 传统XHR请求

• 优点：可以灵活地设置请求头属性，post请求可以发送大体量数据，满足特定场景的埋点需求。

• 缺点：数据量大的请求占用带宽资源多，增加服务器压力。页面销毁时的监控埋点大概率上报失败。

2. Image 对象

利用图标对象的src属性发送get请求上报数据

const image = new Image()
image.src = 'https://monitor.cn/abc.png'

• 优点：上报数据的请求不需要接收响应，可灵活跨域，src请求体量小，速度快，页面销毁时的监控埋点会等上报请求发送完毕，再执行页面卸载。

• 缺点：无法发送大体量数据，页面销毁时有监控埋点会让页面关闭速度变慢，影响用户体验。

3. Beacon API

Beacon api 是w3c新引入的补充性api，就是用来解决web页面在触发卸载销毁事件unload期间会中断所有异步xhr请求的问题。

这个API给navigator对象增加了一个sendBeacon()方法。

这个方法接收一个URL和一个数据有效载荷参数，并会发送一个POST请求。

可选的数据有效载荷参数有ArrayBufferView、Blob、DOMString、FormData实例。

它会保证页面在已经关闭的情况下也会发送请求。

document.onunload = function () {
  navigator.sendBeacon('https://monitor.cn/report', data)
}

不过它也有缺点：

只支持post请求，并且发送的数据量不会像正常xhr的post数据量那么大，最大数据量大小是由客户端（用户浏览器）版本决定的，chrome@70版本测试大概15MB左右。
因为是新补充的api，会存在浏览器兼容性问题，如图：

总结

• 上报轻量级的数据时可以采取image src属性进行上报
• 特定场景需要采集大量级的数据可以改用普通post请求方式
• 在需要监测用户关闭浏览器时上报数据，首选采用beaconApi方式，若用户的当前浏览器不支持该方法，可降级为image方案。目前很多大厂已采用这种混合式埋点方案。

————————————————
版权声明：本文为CSDN博主「清晨细雨霏」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34929433/article/details/123115601