这是我参与「第五届青训营 」伴学笔记创作活动的第12天。
一、本堂课重点内容
- 引入前端监控的概念
- 前端监控之常用的性能指标
- 前端监控之前端常见异常
- 监控前端性能与异常
- 封装一个通用的SDK
二、详细知识点介绍
1、引入前端监控的概念
什么是前端监控
前端监控技术尽可能的采集这一个过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行归因
前端监控了什么
- 性能指标
- 异常事件
- 用户行为
2、前端监控之常用的性能指标
web性能标准的诞生
传统的性能指标
传统的性能指标主要依赖Navigation Timing或者Navigation Timing2,通过记录个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
- FP:首屏渲染的时间点，FP时间点之前，用户看到的都是没有任何信息的白屏。
- FCP：首次有内容渲染的时间点。
- FMP：首次绘制有意义内容的时间点。
- TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间。TTI反映页面可用性的重要指标，TTI值越小，代表用户可以更早的操作页面，用户体验就更好。
- SI：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
- FID：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够处理事件时处理程序所经过的时间。
- LCP：最大的内容在可视区域内变的可见的时间点。
- TBT：量化主线程在空闲之前的繁忙时间程度，有助于理解在加载时间，页面无法响应用户输入的时间有多久。
- CLS：量化了在页面加载期间，视口中元素的移动速度。
3、前端监控之前端常见异常
静态资源错误
在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常
- 100 -199----------------> 信息响应
- 200 - 299 ----------------> 成功响应
- 300 - 399 ----------------> 重定向消息
- 400 - 499----------------> 客户端错误响应
- 500 - 599------------> 服务端错误响应 请求响应状态码>= 400 就是请求异常。对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
JS错误
在页面运行时发生的Js错误会严重影响页面的正常渲染与交互是前端监控的重点。通常打开 f12 调试工具可以看到他们以红色 error 的形式展现
白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法,所以更考验前端监控开发者的功底。
通常我们可以通过判断 DOM树的结构来粗略的判断白屏是否发生。
通常导致白屏发生的原因可能有如下几点:
- 发生Js错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败。
- 长时间的Js线程繁忙阻塞渲染任务。
4、监控前端性能与异常
性能指标监控
利用Performance和PerformanceObserver可以监控到些标准的渲染性能数据
Js错误监控
利用window.addEventListener的error unhandledrejection可以监控到全局的js错误
静态资源错误监控
利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error 进行区分。
请求异常监控
通过hook xhr和fetch对象来监听请求时发生的错误
5、封装一个通用的SDK
前端监控流程概述
数据上报
专为前端监控打造的请求函数Navigator.sendBeacon()
按需加载监控能力
三、课后个人总结
本节课学习了前端监控SDK，第一次接触了前端监控，更能理解页面性能问题。
