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

什么是前端监控？

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

为什么需要前端监控？

• 网页打开好慢 页面某个关键资源渲染太慢
• 网页会卡 页面同步计算任务重，阻塞渲染
• 网页图片会裂开 客户端网络差，上游服务节点异常
• 网页白花花一片 页面脚本执行失败，关键资源加载失败，请求失败

前端监控监控了什么？

性能指标（FP，FCP，FMP，SI，TTI，FID）

以用户为中心的性能指标：不拘泥于技术细节，而是从用户能理解能体验到的方面作为性能监控的指标。 加载流：

• FP(First Paint)首次渲染的时间点，FP之前，用户看不到任何内容。
• FCP(First Contentful Paint)首次有内容渲染时间点。
• FMP(First Meaningful Paint)首次绘制有意义的时间点
• TTI(Time to Interactive) 测量页面从开始加载到主要子资源完成渲染。越小代表用户可以更早操作页面，用户体验也就越好。
• SI(Speed Index)衡量页面可视区域加载速度。
• FID(First Input Delay)测量用户第一次与页面交互并响应时间。
• LCP(Largest Contentful Paint): 最大的内容在可视区域内变得可见的时间点。对用户来说更容易理解，更容易计算和上报。
• TBT(Total Blocking Time): 量化主线程在空闲前的繁忙程度，因为主线程繁忙时UI线程会被阻塞。

常见异常事件

静态资源错误

• Failed to load resource: the server responded with a status of 404

• 404 not found

• 请求异常

http请求状态码

• 100-199 信息响应
• 200-299 成功响应
• 300-399 重定向消息
• 400-499 客户端错误响应
• 500-599 服务端错误响应
• 请求异常=请求响应状态码>=400
• 请求成功率=请求成功数/请求总数

JS错误

有各种各样的原因，不少情况都来自于边缘状况的判断不足，使用TS能减少出现的次数。

白屏异常

通常通过判断DOM树结构来粗略判断白屏是否产生。 产生原因：

• JS错误导致关键资源渲染失败
• 资源加载失败
• JS线程过于繁忙

监听SDK实战

获取监控能力 许多性能指标可以通过浏览器自带的API来获取，如：PerformanceObserver、Performance 封装监听器 需要：

• 命名
• 监听能力
• 主动开启
• 上报能力

JS错误监控

监听Error Event即可

unhandledrejection: Promise异常事件

静态资源错误

与JS错误相同使用addEventListener，但需要与JS Error区分。