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

前端监控之前端常见异常

静态资源错误

静态资源：加载页面所需的 html、css 和 js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。

静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

Http 请求状态码分类

• 100 - 199 信息响应
• 200 - 299 成功响应
• 300 - 399 重定向消息
• 400 - 499 客户端错误响应
• 500 - 599 服务端错误响应

请求异常 = 请求响应状态码 >= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

请求成功率 = 请求成功数 / （请求成功数 + 请求失败数）

Js 错误

在页面运行时发生的 Js 错误会严重影响页面的正常渲染于交互，是前端监控的重点。

白屏异常

前面异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。

通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。

白屏异常发生的原因

1. 发生 Js 错误导致关键资源渲染失败
2. 请求异常或静态资源加载失败
3. 长时间的 Js 线程繁忙阻塞渲染任务。

以用户为中心的性能指标

用户体验	指标
发生了吗？	FP（First Paint），FCP（First Contentful Paint）
内容有用吗？	FMP（First Meaningful Paint），SI（Speed Index），LCP（Largest Contentful Paint)
内容可见吗？	TTI（Time to Interactive）,TBT（Total Blocking)
令人愉悦吗？	FID（First input Delay）,CLS（Cumulative Layout Shift)

• LCP：最大的内容在可视区域内变得可见的时间点。

  • 最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。

  • LCP优点：

    1. 容易理解
    2. 给出与 FMP 相似的结果
    3. 容易计算和上报

• TBT：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。

  • 长任务：如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间。
  • 一个页面的 TBT，是从 FCP 到 TTI 之间所有长任务的阻塞时间的总和。

• CLS：量化了在页面加载期间，视口中元素的移动程度。

  • 当我们点击按钮时，突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。