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

realian
113 阅读6分钟

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

课堂笔记

视频地址 「前端监控 SDK 开发」第五届字节跳动青训营 - 前端专场 (juejin.cn)

ppt地址 ‌​‌⁤⁤‬‌‍‍⁢‌​​⁡‬⁣‍‌​​⁢‬​⁤‬​​⁡‌​⁢​⁡‬‌‍​‌⁤⁢‍‌‍‍⁢‌‬‍‌前端监控SDK实战.pptx - 飞书云文档 (feishu.cn)

课程大纲

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

课前预习

  1. 了解前端监控是做什么，做前端监控有什么价值
  2. 了解 Navigation Timing 和 Navigation Timing 2 的相关字段
  3. 了解 Performance 与 Performance observer 对象
  4. 了解 addEventListener 与 removeEventListener 这两个函数
  5. 了解什么叫做 hook
  6. 了解什么叫做链式调用

课中讲义

  1. 知道前端监控的意义与前世今生。
  2. 从用户的视角思考我们监控的性能指标与前端异常给用户带来的影响。
  3. 学会监听部分性能指标与前端异常，并封装成一个通用的监听器。
  4. 学会将监听器封装到 sdk 中，以及按需加载和链式调用的一些小技巧。

一、本堂课重点内容：

前端监控的背景与概念
前端监控之常用性能指标
前端监控之前端常见异常
监控前端性能与异常
封装一个通用的sdk

二、详细知识点介绍：

为什么我们要聊前端监控

什么是前端监控

image.png

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

为什么需要前端监控

当我们的网页有了前端监控的能力
打开好慢——页面某个关键资源渲染太慢
交互卡顿——页面同步计算任务太重，阻塞渲染
资源加载失败——客户端网络状态差，或上游服务节点异常
页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因

前端监控到底监控了什么

1.性能指标

image.png

2.异常事件
3.用户行为

前端监控之常用性能指标

web性能标准的诞生

早期网页是纯静态的，随着web爆发式发展，2010年8月，W3C成立web性能工作组，目标是指定衡量web应用性能的方法和API，应用到桌面和移动浏览器以及其他环境中，帮助web开发人员评估和理解应用的性能特征。

传统的性能指标

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

以用户为中心的性能指标

传统的性能指标很难反映出用户真正关心的是什么。而以用户为中心的性能指标专注于用户视角下的浏览体验

发生了吗?
FP（First Paint）：首次渲染的时间点
FCP（First Contentful Paint）：首次有内容渲染的时间点

内容有用吗？
FMP（First Meaningful Paint）：首次绘制有意义内容的时间点
SI（Speed Index）：衡量页面可视区域加载速度，帮助检测页面的加载体验差异
LCP（Largest Contentdul Paint）：最大的内容在可视区域内变得可见的时间点，容易理解，给出与FMP相似的结果，容易计算和上报

内容可用吗？
TTI（Time to Interactive）：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI值越小，代表用户可以更早地操作页面，用户体验就更好
TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久，一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和

令人愉悦吗？
FID（First Input Delay）：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够开始处理事件时处理程序所经过的时间
CLS（Cumulative Layout Shift）：量化了在页面加载期间，视口中元素的移动程度。例如当我们点击按钮时，突然出现了一块内容，无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。

前端监控之前端常见异常

静态资源错误

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

请求异常

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

js错误

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

白屏异常

通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生
监听到白屏发生后，我们还需要对白屏的发生进行归因
通常导致白屏发生的原因可能有如下几点：
1.发生JS错误导致关键资源渲染失败
2.请求异常或静态资源渲染失败
3.长时间的JS线程繁忙阻塞渲染任务

监控前端性能与异常

性能指标监控

利用Performance和PerformanceObserver可以监控到一些标砖的渲染性能数据

image.png

JS错误监控

利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误

image.png

静态资源错误监控

利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分

image.png

请求异常监控

通过hook xhr和 fetch对象来监听请求时发生的错误

image.png

image.png

封装一个通用的sdk

前端监控流程概述

数据采集->组装上报->清洗存储->数据消费
sdk主要完成前两步，后两步需要后端服务和平台的支持

临门一脚：数据上报

封装一个用于给监控器上报已收集数据的上报函数
Navigator.sendBeacon()

按需加载监控能力

将监控器按需加载到sdk中，从而封装成一个完整的sdk

image.png

三、引用参考：

李俊安老师的前端监控SDK实战课程

四、课后温习与拓展

  1. 复习实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。

  2. 复习如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。

  3. 挑战课程没有提及的用户行为监控。

  4. 找可靠的小伙伴一起补全 sdk 从监听到上报再到存储与消费的整个链条。

avatar
文章
阅读
粉丝