自研前端监控系统总结(SDK篇)-上报方式

对我司自研的前端监控系统的前端SDK进行总结

 上报方式：

当SDK拿到错误的所有信息时需要上报到服务端，有几种方式上报服务端

通过xhr上报

通过xhr上报，如果设置成异步的时候，当用户跳转新页面或者关闭页面时就会丢失当前这个请求，如果设置成同步，又会让页面造成卡顿的现象

Image的形式来发送请求

特点：

1. 没有跨域问题、
2. 发 GET 请求之后不需要获取和处理数据、
3. 服务器也不需要发送数据、
4. 不会携带当前域名 cookie、不会阻塞页面加载，影响用户的体验，只需 new Image 对象、
5. 相比于 BMP/PNG 体积最小，可以节约 41% / 35% 的网络资源小

Navigator.sendBeacon

**MDN：**可用于通过HTTP将少量数据异步传输到Web服务器，统计和诊断代码通常要在 unload 或者 beforeunload 事件处理器中发起一个同步 XMLHttpRequest 来发送数据。同步的 XMLHttpRequest 迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力

特点：

1. 发出的是异步请求，并且是POST请求
2. 发出的请求，是放到的浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好
3. 只能判断出是否放入浏览器任务队列，不能判断是否发送成功
4. Beacon API不提供相应的回调，因此后端返回最好省略response body
5. 兼容性不是很友好

上报时机：

1. 采用 requestIdleCallback延时上报。
2. 在 beforeunload 回调函数里上报。
3. 缓存上报数据，达到一定数量后再上报。

建议将三种方式结合一起上报：

1. 先缓存上报数据，缓存到一定数量后，利用 requestIdleCallback延时上报。
2. 在页面离开时统一将未上报的数据进行上报。

目前我采用的是git+sendBeacon方式进行上报。

优先级高的情况下采用gif，在requestIdleCallback浏览器空闲时进行上报。

优先级不高的情况下采用sendBeacon，在页面离开时或缓存到一定数量后进行上报。