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

一、本堂课重点内容：

前端监控SDK，什么是前端监控？为什么需要前端监控？前端监控到底监控了什么？如何通过代码实现前端监控SDK。

二、详细知识点介绍：

1.什么是前端监控

所谓前端监控就是尽可能的采集用户从浏览器输入URL到页面展示这一过程和后续用户交互中产生的性能指标与发生的异常事件并上报到平台完成消费。

2.为什么需要前端监控

因为页面可能会出现一些异常情况，例如：页面加载慢、资源加载不出来、白屏以及一些影响用户体验的页面切换或元素位置变更，而前端监控通过对页面数据进行采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

3.前端监控到底监控了什么

1. 可交互性：包含卡顿监控和请求性能
2. 服务器稳定性：主要是计算请求成功率
3. 加载速度：主要监控首屏性能
4. 可用性：包含渲染错误/白屏、请求错误、JS错误、静态资源错误
5. 业务数据：包含PV/UV、自定义事件/打点

4.常用性能指标

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

1. FP:首屏渲染的时间点，FP时间点之前，用户看到的都是没有任何信息的白屏。
2. FCP：首次有内容渲染的时间点。
3. FMP：首次绘制有意义内容的时间点。
4. TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间。TTI反映页面可用性的重要指标，TTI值越小，代表用户可以更早的操作页面，用户体验就更好。
5. SI：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
6. FID：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够处理事件时处理程序所经过的时间。
7. LCP：最大的内容在可视区域内变的可见的时间点。
8. TBT：量化主线程在空闲之前的繁忙时间程度，有助于理解在加载时间，页面无法响应用户输入的时间有多久。
9. CLS：量化了在页面加载期间，视口中元素的移动速度。

5.监控前端性能与异常

1. 利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据。
2. 利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误。
3. 利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分。
4. 通过hook xhr和fetch对象来监听请求时发生的错误。
5. 最后可以封装成一个通用的SDK。