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

课程大纲

1. 引入前端监控的概念
2. 介绍前端监控的性能指标与异常
3. 实战：封装用于监听性能指标与前端异常的监听器
4. 实战：封装一个有完整上报能力的 sdk

课前预习

1. 了解前端监控是做什么，做前端监控有什么价值
2. 了解 Navigation Timing 和 Navigation Timing 2 的相关字段
3. 了解 Performance 与 Performance observer 对象
4. 了解 addEventListener 与 removeEventListener 这两个函数
5. 了解什么叫做 hook
6. 了解什么叫做链式调用

课中讲义

1. 知道前端监控的意义与前世今生。
2. 从用户的视角思考我们监控的性能指标与前端异常给用户带来的影响。
3. 学会监听部分性能指标与前端异常，并封装成一个通用的监听器。
4. 学会将监听器封装到 sdk 中，以及按需加载和链式调用的一些小技巧。

什么是前端监控

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

课后温习与拓展

1. 复习实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。
2. 复习如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。
3. 挑战课程没有提及的用户行为监控。
4. 找可靠的小伙伴一起补全 sdk 从监听到上报再到存储与消费的整个链条。