前端监控

监控，埋点，数据分析 Sentry

前端监控简单来说就是我们在前端程序中记录一些信息并上报，可以分为异常（错误）监控、性能监控、用户行为监控。

• 错误监控：可以了解一下 Sentry，原理简单来说就是通过 window.onerror 和 window.addEventListener('unhandledrejection', ...) 去分别捕获同步和异步错误，然后通过错误信息和 sourceMap 来定位到源码

• 性能监控：我们可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标，除此之外，还需要关注接口的响应时间

  • 性能分析：speedscope （优先推荐）、chrome://tracing

• 最后，收集到信息之后，还要考虑数据上报的方案，比如使用 navigator.sendBeacon 还是 Fetch、AJAX？是批量上报，实时上报，还是延迟上报？上报的数据格式等。

常见埋点行为

1. 页面交互：点击事件等
2. 页面停留时间
3. 各种错误：网络、js、内容可见
4. 性能指标

数据上报

前端埋点上报常使用 img（GIF），navigator.sendBeacon，ajax（存在跨域）

使用 img 而不是其他 html 标签是因为 img 不用插入到 DOM 就可以发起请求