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

用户2161734947844
74 阅读5分钟

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

本堂课主要讲了

  • 什么是前端监控
  • 为什么需要前端监控
  • 前端监控到底监控了什么
  • 前端监控常用性能指标

什么是前端监控

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

为什么需要前端监控

  • 首先我们要确定，异常是不可控的，并不能确定什么时候或者什么场景会发生异常，但它却会实实在在的影响用户体验。所以，我们非常有必要去做这样一件事情，去了解用户的行为，以用户数据为基础，来指导我们产品的优化方向。

前端监控到底监控了什么

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

前端监控常用的性能指标

WEB性能标准的诞生

  • 早期网页是纯静态的，但随着Web 爆发发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能、改善用户体验 因此，2010 年 8 月，W3C 成立了 Web 性能工作组，由来自 Google 和 Microsoft 的工程师担任主席，目标是制定衡量 Web 应用性能的方法和 API。 随后， Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征。

传统的性能指标

image.png

以用户为中心的性能指标

  • 传统的性能指标专注于容易衡量的技术细节，但是他们很难反应出用户所真正关的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。这就是创建以用户为中心的性能指标的原因，他们专注于用户视角下的浏览体验。
用户体验指标
发生了什么？FP(First Paint)，FCP(First Contentful Paint)
内容有用吗？FMP(First Meaningful Paint)，SI(Speed Index)
内容可用吗？TTI(Time to Interactive)
令人愉悦吗？FID(First Inout Delay)
  • FP(First Paint):首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。
  • FCP(First Contentful Paint):首次有内容渲染的时间点。
  • FMP(First Meaningful Paint):首次绘制有意义内容的时间点。
  • TTI(Tiem to Interactive):测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
  • TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。
  • SI(Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
  • FID(First Input Delay):测量从用户第一次与页面交互(比如当他们点击链接、点按按钮等等)知道浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间

前端监控常见异常

静态资源错误

image.png

  • 静态资源:加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
  • 静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

  • 100 - 199 -------------------> 信息响应
  • 200 - 299 -------------------> 成功响应
  • 300 - 399 -------------------> 重定向消息
  • 400 - 499 -------------------> 客户端错误响应
  • 500 - 599 -------------------> 服务端错误响应
  • 请求异常 = 请求响应状态码 >= 400
    • 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

JS错误

image.png

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

白屏异常

image.png

  • 前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化监听方法，所以更考验前端监控开发者的功底。
  • 通常我们可以通过判断DOM数的结构来粗略的判断白屏是否发生。
  • 通常导致白屏发生的原因可能有如下几点：
    • 发生JS错误导致关键资源渲染失败。
    • 请求异常或静态资源加载失败。
    • 长时间的JS线程繁忙阻塞渲染任务。

Performance

  • Performance接口可以获取到当前页面中与性能相关的信息。它是High Resolution Time API的一部分，同时也融合了Performance Timeline API、Navigation Timing API、User Timing API和Resource Timing API。
    • 该类型的对象可以通过调用只读属性 Window.performance 来获得。

JS错误监控

  • EventTarget.addEventListener()

总结

页面监控提供了快速定位能力，便于优化体验。基于hooks的监控SDK通过前后端联合提供了整套的解决方案。值得注意的是，监控会带来性能的损失，需要在用户体验与开发体验间找到一个平衡。

avatar
文章
阅读
粉丝