前端监控SDK | 青训营笔记

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

什么是前端监控

当用户访问网页到服务器呈现网页给用户这期间，会有一系列的数据和性能指标或者异常事件（如：图片裂开、网页白屏等）。而前端监控就是尽可能将这期间以及后续用户交互中产生的性能指标、异常事件和采集页面数据上报平台，帮助开发者更快地对异常情况进行分析和归因。

前端性能指标

传统指标

传统的性能指标主要依赖Navigation Timing或者 Navigation Timing ,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

以用户为中心的性能指标

• FP(First Paint):首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。
• FCP (First Contentful Paint):首次有内容渲染的时间点。
• FMP (First Meaningful Paint):首次绘制有意义内容的时间点。
• TTI (Time to Interactive):测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。
• -----TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。
• SI (Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
• FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间
• LCP (Largest Contentful Paint):最大的内容在可视区域内变得可见的时间
• ……

前端监控之前端常见异常

1. 静态资源错误
2. 请求异常
3. js错误
4. 白屏异常 通常导致白屏发生的原因可能有如下几点:

• 1.发生Js错误导致关键资源渲染失败。
• 2.请求异常或静态资源加载失败。
• 3.长时间的Js线程繁忙阻塞渲染任务。

前端监控流程