这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
本堂课课程大纲
- 引入前端监控的概念
- 介绍前端监控的性能指标与异常
- 实战：封装用于监听性能指标与前端异常的监听器
- 实战：封装一个有完整上报能力的 sdk
详细知识点
什么是前端监控
从一个经典面试题聊起：
在浏览器里，从输入URL到页面展示，这中间发生了什么?
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
当我们的网页有了前端监控的能力
- 打开好慢——页面某个关键资源渲染太慢。
- 交互卡顿——页面同步计算任务太重，阻塞渲染。
- 资源加载失败——客户端网络状态差，或上游服务节点异常。
- 页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等。
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。✔
前端监控到底监控了什么
常用性能指标
-
传统性能指标 传统的性能指标主要依赖Navigation Timing 或者NavigationTiming 2，🚩通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
-
以用户为中心的性能指标 传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。 如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。 这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
用户体验 指标 发生了吗? FP (First Paint ) , FCP (First Contentful Paint ) 内容有用吗? FMP (First Meaningful Paint ) , SI (Speed Index) 内容可用吗? TTI (Time to Interactive ) 令人愉悦吗? FID (First Input Delay )
常见前端错误
-
静态资源错误
静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
-
请求异常
请求异常=请求响应状态码>= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
状态码=0的情况：
请求成功率=请求成功数/ (请求成功数 +请求失败数)
- Js错误 在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点。
4. 白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底💪
通常我们可以通过判断DOM树的结构（渲染）来粗略的判断白屏是否发生。
监听到白屏发生后，我们还需要对白屏的发生进行归因。
通常导致白屏发生的原因可能有如下几点:
- 发生Js错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败。
- 长时间的Js线程繁忙阻塞渲染任务。
监控前端性能与异常
性能指标监控
利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据
封装一个monitor（监听器）：
//名字、监听能力、主动开启（start函数）、上报能力（高阶函数）
function createPerfMonitor(report: ({ name: string, data: any }) => void) {
const name = 'performance';
const entryTypes = ['paint', 'largest-contentful-paint', 'first-input']
function start() {
const p = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
report({ name, data: entry });
}
})
p.observe({ entryTypes });
}
return { name, start }
}
Js错误监控
利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误。
