前端监控三日志数据的上报

背景

之前为了实时地上传日志数据，我们使用以下方法

1. 发起一个同步 XMLHttpRequest 来发送数据。或者是一个GET请求或head请求
2. 创建一个 img 元素并设置 src，大部分用户代理会延迟卸载（unload）文档以加载图像。
3. 创建一个几秒的 no-op 循环。

之前项目中经常使用img上报数据

1. 没有跨域的限制，可以直接发送跨域的GET请求，不用做特殊处理；
2. 兼容性好，一些静态页面可能禁用了脚本，这时script标签就不能使用了；
3. img标签的优点是不需要将其append到文档，只需设置src属性便能成功发起请求。

Navigator.sendBeacon() 推荐使用

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon

相较于图片的src，这种方式的更有优势：

1. 不会和主要业务代码抢占资源，而是在浏览器空闲时去做发送；
2. 并且在页面卸载时也能保证请求成功发送，不阻塞页面刷新和跳转；
3. 现在的埋点监控工具通常会优先使用sendBeacon，但由于浏览器兼容性，还是需要用图片的src兜底。

localStorage暂存

也可以通过localStorage暂存数据，等到浏览器空闲的时候上传，上传成功删除本地数据

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods