前端监控｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

1. 前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

2. 网页性能会影响到业务

3. 监控目标

   • 性能指标
   • 异常事件
   • 用户行为

4. 以用户为中心的性能指标 主要上报LCP

   • FP first paint FCP first contentful paint
   • FMP first meaningful paint SL speed index LCP largest
   • TTI time to interactive
   • FID first input delay
   • TBT total blocking time
   • cls 元素偏移

5. 前端常用异常

   • 静态资源错误 加载失败
   • 请求异常 使用fetch拉取的资源错误 400-599
   • js错误
   • 白屏异常

6. 利用Performance 和 PerformanceObserver 监听性能指标

7. 监听window错误事件和promise全局rejection

8. target有值就说明可能是静态资源错误 error type有值就说明是js错误

9. 通过原型链和tagName区分是哪个元素发生错误

10. navigator.sendBeacon() 适合上报的请求函数

11. Performance.navigation 提供了对navigation操作的相关信息

12. Performance.timing 包含了延迟相关的信息

13. Performance.memory 包含了内存使用情况

14. 用window.performance获取Performance对象