前端性能监控

TL:DR; #

本文尝试分析前端场景下的性能监控应该实现的目标,并尝试进行系统设计。本文侧重于架构层面的设计,代码实现方面会另外开一篇文章。

问题 #

目的是监控前端代码在全链路的性能表现情况

是真正的问题吗? #

探索解决办法 #

前端获取性能数据的方法

对用户体验强相关的数据指标

系统指标。能够支撑多大的并发量、存储成本。

如何设计系统架构 #

初版架构图 #

这里添加一个架构图

SDK 接入方式 #

数据抓取 #

数据上报 #

数据存储、清洗 #

数据分析 #

报表呈现 #

最终的架构图 #

性能评估、优化 #

系统性能评估方法 #

能够承受多大的并发?

能够存储多少用户量的性能、存储时间

优势劣势分析 #

扩展能力 #

跟其他监控系统整合 #

比如和错误监控、埋点日志等整合起来,形成一个统一的用户数据分析大盘。此时能够做到以下系统独立时难以做到的事情:

  1. 在错误监控系统中排查问题时,能够看到报错时的性能问题,可以更好地观察排查问题。

接入小程序端的性能监控 #

价值。小程序后台中也有性能监控,但是存在以下问题:

  1. 在维护多个小程序时操作比较繁琐。每个小程序需要逐一扫码登录查看,操作比较繁琐
  2. 性能指标等不够精细,不能集中体现重点。

注意:

  1. 可能部分数据只有微信官方才能拿到
  2. 可能有数据遗失的问题。因为实际上是在小程序运行时内部上报,可能因为运行环境不稳定等问题导致没有上报性能数据。

工作量评估 #

总结 #