前端监控SDK| 青训营笔记

63 阅读2分钟

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

为什么要聊前端监控

什么是前端监控

从一个经典的面试题聊起,在浏览器里,从输入URL到页面展示,这中间发生了什么?

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

为什么需要前端监控

用户在浏览网页中可能遇到的问题:

  • 网页打开缓慢
  • 网页卡顿
  • 网页中图片显示不出
  • 网页加载失败

从开发人员回答(没有前端监控的错误归因):

  • 打开慢:用户使用的系统和浏览器版本过低
  • 交互卡顿:电脑配置太差
  • 资源加载失败:用户网络状态差
  • 页面白屏:在我这可以,应该是偶发事故

从开发人员回答(有前端监控的正确归因):

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

当网页拥有了前端监控的能力后,前端监控通过对页面数据的采集与上报,来帮助开发者更快速地对质量差的页面进行分析和归因。

还有研究表明,性能提升将减少用户的等待成本能有效提高用户的留存率,而性能不佳会对业务目标产生负面影响。

前端监控监控的是什么

  1. 性能指标 image (4).png
  2. 异常事件
  3. 用户行为

前端监控常用性能指标

性能标准的诞生

传统性能指标

以用户为中心的性能指标