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

祛毒a
98 阅读6分钟

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

以下为今日课上笔记内容

一.为什么我们要聊前端监控

1.什么是前端监控

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

869fc8298163ac0c4a14fcf054f23a5.png

2.为什么需要前端监控 当我们的网页有了前端监控的能力

  • 打开好慢 - 页面某个关键资源染太慢
  • 交互卡顿 -- 页面同步计算任务太重，阻塞染
  • 资源加载失败客户端网络状态差，或上游服务节点异常
  • 页面白屏页面脚本执行失败、关键资源加载失败、请求失败等

前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因

3.监控页面质量为什么那么重要?

1）缤趣(图片社交分享网站) 将感知等待时间减少了 40%，这将搜索引擎流量和注册量增加了 15%

2）COOK (冷冻速食订购网站) 将页面平均加载时间减少了 850 毫秒，从而将转化次数提高了 7%，将跳出率降低了 7%，并将每个会话的页面增加了 10%。

研究还表明，性能不佳会对业务目标产生负面影响。例如，BBC 发现他们的网站加载时间每增加一秒，他们就会失去 10% 的用户。

4.前端监控到底监控了什么

1）性能指标

2）异常事件

3）用户行为

二. 前端监控之常用性能指标

1.web 性能标准的诞生

早期网页是纯静态的，但随着Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能、改善用户体验

因此，2010 年 8 月，W3C 成立了 Web 性能工作组，由来自 Google 和 Microsoft 的工程师担任主席，目标是制定衡量 Web 应用性能的方法和 API

随后，Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征

39b8b82843e8477631c0b6999dd5993.png

2.传统的性能指标

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

fff1c226497ecf0e349491102679e04.png

be0438c01c8a7184727ec6219257b1f.png

d969ea9cd438bd53138ae8f6ed4bca5.png

3.以用户为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差.

这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验

709f4b0b9afd9b4e32f8cf1450cebe5.png

5caa1b2673d8e2550cdaae3b8797752.png

  • FP (First Paint): 首次染的时间点。 FP 时间点之前，用户看到的都是没有任何内容的白色屏幕

  • FCP (First Contentful Paint) : 首次有内容染的时间点

  • FMP (First Meaningful Paint) : 首次绘制有意义内容的时间点

cc7fd3bd9e005f5717ede48d6f34003.png

  • TTI (Time to lnteractive) : 测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间

  • TTI 反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好

  • SI(Speed Index) : 衡量页面可视区域加载速度，帮助检测页面的加载体验差异

de9cd6ed827fe33166fa0769acd757b.png

A 和 B 的首次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好

  • FID (First Input Delay) : 测量从用户第一次与页面交互 (比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间

e400addc688ca574cb056505b3d7cac.png

  • LCP (Largest Contentful Paint) : 最大的内容在可视区域内变得可见的时间点

72c520447f86657e1e76330b0916290.png

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

8b4d5fa4a4f17f11d7e34499652dd41.png

  • CLS(Cumulative Layout Shift) :量化了在页面加载期间，视口中元素的移动程度

f646e45e5fd35b021cd8fe9d7b408d9.png

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

1aba42d7673f8d0eb0ad05d613ccf52.png

三.前端监控之前端常见异常

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

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

2.请求异常

Http 请求状态码分类

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

请求异常 = 请求响应状态码 >= 400

对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

状态码 0 是什么?

9be4c8e2773c08cfd9fc25c8e6163b7.png

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

3.Js 错误

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

d54a89731fe2e22a4002a4f43fb0bf4.png

4.白屏异常

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

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

196a4b8b6b0814c9b7b82155dc9998f.png

四. 监控前端性能与异常

1.性能指标监控

146e488424a03e173f6a36c5c73caa8.png

4bad8d761e91931112ce5e9b759d4ee.png

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

225614803878597aa28594f8232ca2e.png

2.Js 错误监控

3515c751b962c49dba9a46301dd9b5c.png

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

31d644cb6b833585ff92512ec90af91.png

1160eca156a79eec8c0c979667b1ef9.png

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

c018833b518287d4cd754483e53e805.png

3.请求异常监控

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

cf605ffec3de326b8e05155b0fae317.png

cc78869fe1d9acf5a430a65614a66c3.png

f091350f462d001285e0730ec61e87e.png

五. 封装一个通用的 sdk

1.前端监控流程概述

sdk 主要完成前两步，后两步需要后端服务和平台的支持，其中前面的章节已经完成了数据采集以及简单的数据组装

42888db8e925e589d997cbe30c9fce0.png

2.临门一脚: 数据上报

封装一个用于给监控器上报已收集数据的上报函数

ef9c366d8f18da22710ac4c60bc2370.png

3eef8e0468ba4db352c56ecd7a0ad5d.png

专为前端监控打造的请求函数 Navigator.sendBeacon(0)

3.按需加载监控能力

58be7cc93423fba20419a672fc2cf48.png

六. 让你的 sdk 更健壮

1.关注请求性能

请求异常除了请求错误外，我们还关注慢请求，你可以参考Performance Resource Timing 来获取请求各阶段耗时，找出所有慢请求

b14665a70ea8e417f39a914bbc2e410.png

2.数据存储与消费

e639b84d5a58f9dd159cef4eaf7c842.png

avatar
文章
阅读
粉丝