这是我参与「第五届青训营 」笔记创作活动的第12天。
前言
本节课老师告诉我们要掌握以下内容：
- 了解前端监控的概念
- 了解前端监控的性能指标与异常
- 实战：封装用于监听性能指标与前端异常的监听器
- 实战：封装一个有完整上报能力的 sdk
预习
在上课之前我完成了以下内容的预习
-
了解前端监控是做什么的，做前端监控有什么价值
-
了解 Navigation Timing 和 Navigation Timing 2 的相关字段
-
了解 Performance 与 Performance observer 对象
-
了解 addEventListener 与 removeEventListener 这两个函数
-
了解什么叫做 hook
-
了解什么叫做链式调用
分享要点
- 1.引入前端监控的概念
前端监控
前端监控是什么
前端监控就是尽可能采集浏览器工作过程以及用户交互中产出的性能指标与发生的异常事件并上 报到平台完成消费
为什么需要前端监控
用户：知晓自己当前遭遇什么困境
开发者：明确事故原因，便于后续debug
前端监控通过对页面数据的采集和上报，帮助开发者更快速的对质量差的页面进行分析和归因
- 2.介绍前端监控的性能指标与异常
FCP首次绘制内容的耗时
Loading图标
骨架屏
SSR服务端渲染
TTI页面可交互的时间
核心内容同步加载
非核心内容异步加载
图片懒加载
PageLoad 页面完全加载的时间
异步加载
FPS 前端页面帧率
reactwindow
渲染优化
静态资源及API请求成功率
静态资源能用CDN就用CDN,大幅提高静态资源加载的成功率
域名解析时报可以采用静态资源域名自动切换的方案
HTTPS
收益
通过TP数 TP50,TP90来具体量化技术转化效果
前端常见异常
静态资源错误
请求异常
JS错误
白屏异常
JS错误监控
window.addEventListener的error和unhandledrejection可以监控全局JS错误
window.addEventListener的error可以监控到静态资源错误
请求监控异常，XMLHttpRequest对象和fetch对象
HTTP 状态码
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
分类
信息响应(100–199)
成功响应(200–299)
重定向(300–399)
客户端错误(400–499)
服务器错误(500–599)
-
3.实战：封装一个有完整上报能力的 sdk
1.数据采集
2.组装上报
3.清洗存储
4.数据消费
总结
-
复习实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。
-
复习如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。
-
挑战课程没有提及的用户行为监控。
-
找可靠的小伙伴一起补全 sdk 从监听到上报再到存储与消费的整个链条。
