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

关于前端监控

什么是前端监控

尽可能从输入URL到页面展示这一过程、后续用户交互中产出的性能指标以及发生异常的事件，将它们采集与上报

为什么需要前端监控

通过对页面数据的采集和上报。前端监控帮助开发者更快地对问题进行分析与归因，从而提高网页性能和用户体验

监控什么

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

性能指标

传统的性能指标

• Navigation Timing(2)
• 专注于技术细节，仅对加载速度进行优化
• 对于用户来说过于复杂

以用户为中心的性能指标

• 是否发生？
  • FP ❗（First Paint）首次渲染时间点，该点之前用户看到的是没有任何内容的白色屏幕
  • FCP ❗（First Contentful Paint) 首次内容渲染时间点
• 是否有用？
  • FMP（First Meaningful Paint）首次绘制有意义的内容
  • SI （Speed Index）衡量页面可视区域加载速度，帮助检测页面的加载体验，难以解释和计算
  • LCP ❗（Largest Contenful Paint）最大绘制内容变得可见的时间点，易于理解，容易计算和上报
• 是否可用？
  • TTI（Time to Interactive）测量从页面开始加载到可视化呈现并且能够快速可靠地响应用户输入所需的时间，TTI值越小，代表用户可以越早操作页面，用户体验越好
  • TBT（Total blocking time）总阻塞时间，测量FCP和TTI之间的总时间，量化主线程在空闲之前的繁忙程度（长任务50ms）
• 是否令人愉悦？
  • FID ❗（First Input Delay）测量用户第一次与页面交互直到浏览器对交互做出响应能够开始处理事件所用的时间
  • CLS（Cumulative layout shift）累计布局偏移，量化了页面加载期间，视口中元素的偏移

常见异常

静态资源错误

在拉取和加载静态资源的过程中发生了预期之外的错误，无法将其正常渲染到页面上。比如图片无法加载、视频加载失败等

请求异常

• 请求响应状态码>=400 或为0
• 异步请求拉取静态资源出现的错误
• 请求成功率 = 成功数/请求总数

JS错误

• 控制台报错

白屏异常

• 没有标准化监听方法
• 通常可以通过判断DOM树的结构进行粗略判断

监控方法

性能指标

• Performane
• PerformanceObserver

JS错误监控

• EventTarget.addEventListener() 监听window的error event
• unhandledrejection

静态资源错误监控

• EventTarget.addEventListener() 监听window的error event
• 区分JS错误：url方式不同

请求异常监控

• hook xhr
• fetch

SDK监控

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

转为前端监控打造的请求函数Navigator.sandBeacon()