这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
为什么需要前端监控
通过对页面数据的采集上报，来帮助开发者更快速地对质量差的页面进行分析和归因。 性能不佳的页面会导致糟糕的用户体验，从而引起流量减少、转化率降低等业务负面影响。
监控方向
前端监控主要包括三个方向
- 性能指标
- 异常事件
- 用户行为
性能指标
以用户为中心的性能指标：不拘泥于技术细节，而是从用户能理解能体验到的方面作为性能监控的指标。
加载流：
- FP(First Paint)
- FCP(First Contentful Paint)
- FMP(First Meaningful Paint)非标准化。
- TTI(Time to Interactive) 越小代表用户可以更早操作页面，用户体验也就越好。
LCP: 最大的内容在可视区域内变得可见的时间点。对用户来说更容易理解，更容易计算和上报。
TBT: 量化主线程在空闲前的繁忙程度，因为主线程繁忙时UI线程会被阻塞。
常见异常事件
静态资源错误
Failed to load resource: the server responded with a status of 404
大多数时候是网络异常捏，404 not found😭
请求异常
404、403、500、502
特殊情况： status=0 请求无法执行
JS错误
有各种各样的原因，不少情况都来自于边缘状况的判断不足，使用TS能减少出现的次数。
白屏异常
通常通过判断DOM树结构来粗略判断白屏是否产生。
产生原因：
- JS错误导致关键资源渲染失败
- 资源加载失败
- JS线程过于繁忙
监听SDK实战
获取监控能力
许多性能指标可以通过浏览器自带的API来获取，如：PerformanceObserver、Performance
封装监听器
需要：
- 命名
- 监听能力
- 主动开启
- 上报能力
JS错误监控
监听Error Event即可 unhandledrejection: Promise异常事件
静态资源错误
与JS错误相同使用addEventListener，但需要与JS Error区分。
总结
页面监控提供了快速定位能力，便于优化体验。基于hooks的监控SDK通过前后端联合提供了整套的解决方案。值得注意的是，监控会带来性能的损失，需要在用户体验与开发体验间找到一个平衡。
