前端监控系统的搭建

UI自动化测试库

1. puppeteer：https://zhuanlan.zhihu.com/p/524254998 - google出品

2. cypress - 据说比puppeteer好用

前端监控体系

性能监控

异常监控

行为监控：埋点体系

主动监控

被动监控

前端性能数据捕获：

1. 打点方式，结束时间 - 开始时间
2. window.performance Api提供的能力 参考链接
   • 性能指标：首屏时间、最慢加载时长

---

异常监控

异常监控核心问题

• 异常采集 - 数据采集、数据上报
• 数据存储
• 统计分析
• 报告告警

异常采集：

• 性能和信息全面性之间做出取舍
• 自动化采集，不遗漏任何一处报错
• 如何选择上报的时机、收集异常日志等

采集内容：

异常捕获：
try-catch无法捕获异步错误
window.onerror捕获不到跨域的错误、网络异常错误

数据上报：
当页面卸载或者跳转的时候，请求容易被浏览器cancel掉，那这种情况异常信息就上报不了了，如何解决？navigator.sendBeacon可以解决。

1. 传统方式：请求一个非常小的参数，上面带上异常信息的参数
2. navigator.sendBeacon Api
   

---

• 前端有哪些异常？
  • JavaScript运行错误
  • 网络加载错误
  • http请求错误
• 如何捕获异常？
• 异常如何上报？
• 为什么要SourceMap？
• SourceMap怎么用？

---

数据存储：数据库选型

---

sentry

sentry功能架构：

---

美团监控体系

多维分析

针对异常噪声大，可以在报警的时候进行过滤或者降低级别。

---

珠峰

开发一个sdk

27分钟处

数据上报：

Navigator.sendBeacon()这个API有以下几个特点:

1. 异步发送数据:当用户离开页面时,使用sendBeacon()发送的数据会在后台继续发送,不会阻塞页面的关闭。这对于统计用户行为很有帮助。

2. 不受跨域限制:sendBeacon()可以跨域发送数据,不受同源策略的限制。

3. 数据大小限制:每次发送的数据大小一般不能超过64KB。

4. 可靠性:即使网络断开,sendBeacon()也会尽量确保数据被发送到服务器。

5. 简单易用:使用起来非常简单,只需要一行代码即可。

总之,Navigator.sendBeacon()是一个非常实用的API,可以帮助开发者在用户离开页面时可靠地发送一些统计数据。对于一些小型的异步数据,使用这个API会比传统的AJAX请求更加高效和可靠。

Navigator.sendBeacon()能在后台持续发送数据的关键在于其异步非阻塞的特性。具体实现如下:

1. 请求发送方式不同于常规AJAX:

   • sendBeacon()使用HTTP POST方式发送数据,而不是常规的AJAX GET/POST。
   • 数据会以表单编码的形式发送,不需要手动设置请求头。

2. 请求独立于页面生命周期:

   • 当用户关闭页面时,sendBeacon()请求会继续在后台独立执行,不会被页面的关闭而中断。
   • 浏览器会维护这个独立的请求,直到数据成功发送或者达到最大重试次数。

3. 浏览器内部机制:

   • 浏览器会将sendBeacon()发送的数据缓存在内部队列中。
   • 当页面关闭时,浏览器会尝试在后台异步发送这些缓存的数据。
   • 即使网络中断,浏览器也会在网络恢复时继续尝试发送。

4. 不受跨域限制:

   • 由于sendBeacon()请求是异步的,不会受到同源策略的限制,可以跨域发送数据。

总之,sendBeacon()的异步机制和浏览器内部的缓存处理,确保了即使在页面关闭的情况下,数据也能可靠地发送到服务器,而不会被页面的生命周期所中断。这使得它非常适合用于统计和分析等场景。