这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
为什么我们要聊前端监控
什么是前端监控
从一个经典面试题聊起： 在浏览器里，从输入URL到页面展示，这中间发生了什么？
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
让我们从用户的视角来抛出一些使用时遇到的问题：
让我们再从开发者的视角来回答用户抛出问题：
当我们的网页有了前端监控的能力
案例分析：监控页面质量为什么那么重要？
前端监控到底监控了什么？
- 性能指标
- 异常事件
- 用户行为
前端监控之常用性能指标
web性能标准的诞生
传统的性能指标
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反映出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
TTI的值越小，用户体验越好
LCP
LCP优点：容易理解；给出与FMP相似的结果；容易计算和上报
TBT
CLS
前端监控之前端常见异常
静态资源错误
请求异常
状态码0是什么？
JS错误
白屏异常
监听到白屏发生后，我们还需要对白屏的发生进行归因。通常导致白屏发生的原因可能有如下几点：
- 发生JS错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务
小试牛刀：监控前端性能与异常
性能指标监控
JS错误监控
请求异常监控
渐入佳境：封装一个通用的sdk
前端监控流程概述
数据上报
关注请求性能
更安全和稳定的Hook函数
在实现请求错误监控时，我们实现了一个很简易的hook函数，这个hook函数缺少很关键的unhook能力，即将被hook的函数还原的能力。你能补全这一能力并写出更安全和稳定的hook函数吗？
