这是我参与「第五届青训营」伴学笔记创作活动的第12天。今天开始了有关监控SDK开发方面的学习。

前端监控是什么

前端监控就是尽可能的采集从输入URL到页面展示这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。

为什么需要前端监控

当我们页面有了前端监控能力，可以复现出现问题的过程：

• 打开好慢——页面某个关键资源渲染太慢
• 交互卡顿——页面同步计算任务太重，阻塞渲染
• 资源加载失败——客户端网络状态差，或上游服务节点异常
• 页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等

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

前端监控监控了什么

1. 性能指标

由于传统性能指标只是优化加载速度，用户体验依然很差，因而创立了以用户为中心的性能指标，专注于用户视角下的浏览体验。

用户体验	指标
发生了吗？	FP,FCP
内容有用吗？	FMP,SI,LCP
内容可用吗？	TTI,TBT
令人愉悦吗？	FID,CLS

• TTI越小，用户体验越好
• SI帮助检测页面的加载体验差异
• LCP是最大内容可视化的时间点

2. 异常行为

静态资源错误

在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

HTTP请求状态码异常分类
100-199	信息响应
200-299	成功响应
300-399	重定向消息
400-499	客户端错误响应
500-599	服务端错误响应

对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

状态码0要重点关注

JS错误

在页面运行时发生的JS错误会严重影响页面的正常渲染和交互，是前端监控的重点

白屏异常

• 我们通常通过判断DOM树的结构判断白屏是否发生
• 可能原因：
  • 发生JS错误导致关键资源渲染失败
  • 请求异常或静态资源加载失败
  • 长时间的JS线程繁忙阻塞渲染任务

性能监控指标

• Performance
• PerformanObserver

1. JS错误监控
2. 静态资源错误监控
3. 请求异常监控

3. 用户行为

个人小结

今天的课程中讲述的内容有些复杂，实践部分没能弄透彻，后续还要继续消化巩固。