2021 前端监控-技术分享稿

2021 前端监控-技术分享稿

大纲

1. 序言
2. 架构图
3. 技术选型
4. 实现和结果
5. 总结

PS：插图

架构图
流程图
思维导图

数据上报方式

如何将收集的数据发送给服务端

监控统计应该在尽量不影响主流程的逻辑和页面性能的前提下进行

1. 使用 img 标签 get 请求(1px gif 图片)
   不存在 AJAX 跨域问题，可做跨源的请求
   img 标签，没有浏览器兼容性问题

const img = new Image();

img.onload = img.onerror = img.onabort = function () {
  img = img.onload = img.onerror = img.onabort = null;
}

img.src = url;

2. Beacon API

navigator.sendBeacon

大部分现代浏览器都支持 navigator.sendBeacon方法。这个方法可以用来发送一些统计和诊断的小量数据，特别适合上报统计的场景。

数据可靠，浏览器关闭请求也照样能发
异步执行，不会影响下一页面的加载
API 使用简单

window.addEventListener('beforeunload', () => {
    navigator.sendBeacon("/log", analyticsData);
}, false);

最终方案

当浏览器支持 sendBeacon 方法，优先使用该方法，使用 img 方式降级上报。

try...catch

if (navigator.sendBeacon) {
   // navigator.sendBeacon, POST, JSON, FormData, Blob
} else {
  // 1px gif, GET, QueryString, FormData,
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---