前端监控SDK学习 | 青训营笔记

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

今天跟随课程学习了前端监控SDK，主要是从前端监控的目的、前端监控的性能指标、前端常见的异常以及如何监控的角度对本次课程进行总结。

1、前端监控概述

1. 前端监控是什么？

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

2. 前端监控监控什么？

• 性能指标
• 异常事件
• 用户行为

2、监控的常用性能指标

性能指标的衡量一般是以用户的体验为中心。

基本性能指标

1. FP：首次渲染时间点
2. FCP：首次有内容渲染的时间点
3. FMP：首次绘制有意义内容的时间点
4. TTl：测量页面从开始加载到主要子资源完成渲染、并能够快速、可靠的响应用户输入所需时间
5. SI：衡量页面可视区域加载速度
6. FID：衡量用户第一次与页面交互至浏览器响应时间。

**衡量用户体验过程的性能指标

1. LCP：最大的内容在可视区域变得可见的时间点。
2. TBT：衡量主线程空闲之前的繁忙程度
3. CLS：量化在页面在加载期间，视口中元素移动程度

3、前端监控常见异常

1. 静态资源异常——和加载静态资源的过程中发生预期之外的错误，如网络异常等，导致静态资源无法正常渲染到网页。

静态资源：加载页面所需要的HTML、CSS、JS等文件，和其它媒体文件，如：视频、图片等

2. 请求异常——请求响应状态码>=400（注：400-99：客户端错误响应、500~599：服务端错误响应）

3. JS错误——页面运行时JS发生错误，严重时可能导致页面正常渲染与交互。

4. 白屏异常——白屏没有标准的监听方式，可通过DOM树结构粗略判断。

4、监控方法

• 性能监控——利用Performance和PerformanceObserve检测
• JS错误监控——利用Window.addEventListener和err和unhandledrejection
• 静态资源错误监控——利用window.addEventLister的error事件监听
• 请求异常监控——通过hook xhr和fetch对象来监听

前端监控的流程：

数据采集=>组装上报=>清洗存储=>数据消费

总结

通过这堂课学习了前端监控的必要性以及前端监控监控什么？和如何衡量指标等方面的知识。任何一个网页都有可能会出现漏洞，前端监控异常可以快速定位错误位置和总结错误原因。