前端性能监控

1. 为什么要做前端性能监控？

  • 更快发现问题和解决问题
  • 做产品的决策依据
  • 提升前端工程师的技术广度和打造简历亮点
  • 为业务扩展提供更多可能性

2. 前端监控目标

2.1 稳定性

  • JS 错误 JS 执行错误或 Promise 异常
  • 资源异常 script, link 等资源加载异常
  • 接口错误 网络请求异常
  • 白屏 页面空白

2.2 用户体验

  • 加载时间 各阶段加载时间
  • TTFB
  • FP
  • FCP
  • FMP
  • FID
  • 卡顿 超过 50ms 的长任务

2.3 业务

  • PV
  • UV
  • TP

3. 前端监控流程

埋点 ==> 数据采集 ==> 数据建模存储 ==> 数据传输（实时/批量） ==> 数据统计（分析/挖掘）==> 数据可视化或者预警

3.1 常见埋点方案

3.1.1 代码埋点

  • 嵌入代码的形式进行代码埋点，比如点击事件时保存用户行为发送至服务端
  • 优点是可以任意时刻精准发送或保存数据
  • 缺点是工作量较大

3.1.2 可视化埋点

  • 不需要开发人员参与，一般是通过三方实现，实质时使用系统代替人工代码埋点

3.1.3 无痕埋点

  • 前端任意一个事件都被绑定一个标识，所有的事件都记录下来
  • 通过定期上传文件，配合文件解析，解析出我们想要的数据，并生成可视化报告
  • 优点是采集全面，不会出现漏埋和误埋现象
  • 缺点是给数据传输和服务器增加压力，也无法灵活定制数据结构

4. 脚本编写

4.1 开通日志服务

参考Web Tracking 文档

4.2 监控错误

  • jsError
  • promiseError
  • resourceError

4.3 接口异常采集脚本

4.4 白屏

4.5 加载时间

4.6 性能指标

参考：https://cloud.tencent.com/developer/article/1650831

源码参考：https://github.com/Matthrews/web-monitor

更多