前端监控SDK开发 | 青训营笔记

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

前端监控

前端监控是什么

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

为什么需要前端监控

• 用户：知晓自己当前遭遇什么困境
• 开发者：明确事故原因，便于后续debug

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

前端监控的内容

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

前端监控常用性能指标

• 传统性能指标

  通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度衡量其性能

  • 问题在于，传统指标更专注于容易衡量的技术细节，但其很难反映出用户真正关心的内容，一味的提升加载速度并不能对应的提高用户的体验

• 以用户为中心的性能指标

  用户体验	指标
  发生了什么？	FP (First Paint), FCP (First Contentful Paint)
  内容有用吗？	FMP (First Meaningful Paint),SI (Speed Index)
  内容可用吗？	TTI (Time To Interactive)
  令人愉快吗？	FID (First Input Delay)

  • FP：首次渲染时间点
  • FCP：首次有内容渲染的时间点
  • FMP：首次绘制有意义内容的时间点
  • TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需要的时间
  • SI：衡量页面可视区域加载速度，帮助检测页面的加载体验
  • FID：测量从用户第一次与页面交互（触发事件）直到浏览器对交互做出响应，能够开始处理事件时处理程序所经过的时间
  • LCP：最大的内容在可视区域内变得可见的时间点

前端常见异常

• 静态资源错误
• 请求异常
• JS错误
• 白屏异常

JS错误监控

1. window.addEventListener的error和unhandledrejection可以监控全局JS错误

2. window.addEventListener的error可以监控到静态资源错误
3. 请求监控异常，XMLHttpRequest对象和fetch对象

封装一个通用的SDK

流程概述

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

请求函数：Navigator.sendBeacon()