[前端监控 SDK 实战|青训营笔记]

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

一、视频课笔记：

1.本堂课重点内容：

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

2.详细知识点介绍：

掘金学员手册：

课前预习:

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 从监听到上报再到存储与消费的整个链条。

作者：青训营官方账号

链接：juejin.cn/post/719438…

课程内容:

1. 引入前端监控的概念:

为什么需要前端监控

前端监控监控了什么

2. 介绍前端监控的性能指标与异常:

web性能标准

传统性能标准

以用户为中心的性能标准

3.实战：封装用于监听性能指标与前端异常的监听器

静态资源错误

请求异常

js异常

白屏异常

性能指标监控

Js错误监控

静态资源错误监控

请求异常监控

4.实战：封装一个有完整上报能力的 sdk

前端监控流程

数据上报

按需加载监控能力

3.个人思考与总结：

1.前端监控十分重要，关乎到用户使用体验，前端监控SDK技术非常值得深入学习和掌握。