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

一、本堂课重点内容：

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

二、详细知识点介绍：

开篇：为什么我们要聊前端监控

什么是前端监控

前端监控就是尽可能地采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费

为什么需要前端监控

前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因 研究表明，性能不佳会对业务目标产生负面影响

前端监控监控了什么

1. 性能指标
2. 异常事件
3. 用户行为

概述：前端监控之常用性能指标

• 传统性能指标主要依赖Navigation Timing或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能好十，以加载速度来衡量性能

• 以用户为中心的性能指标，因为传统性能指标只是衡量技术的细节，要专注于用户的使用体验

  • 发生了吗 FP，FCP
  • 内容有用吗 FMP，SI
  • 内容可用吗 TTI
  • 令人愉悦吗 FID
  • LCP与FMP对比， LCP优点：容易理解，给出与FMP相似的结果，容易计算和上报
  • TBT 量化了主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
  • CLS 量化了在页面加载期间，视口中元素移动程度

概述：前端监控之前端常见异常

• 静态资源错误 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
• 请求异常 请求状态码>=400时
• JS错误 在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
• 白屏异常 没有标准化的监听方法，更考验前端监控开发者的功底

封装一个通用的SDK

流程概述

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

请求函数：Navigator.sendBeacon()