这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天 关于前端监控系统的一些分析记录。

为什么要做前端监控系统

• 更快地发现问题
• 做产品决策依据
• 提升前端开发的技术深度和广度
• 为业务扩展提供更多可能性

解决了什么问题

首先，用户在使用产品过程中很可能会发生一些问题：

• 白屏
• 无响应
• 卡顿
• 服务异常
• bug无法复现
• 等等

面对这些问题，我们需要先知道用户在使用时到底发生了什么，我们不可能一直去依赖用户的主动反馈，那显然是远远不够的，于是我们可以想到：

• 收集异常：解决异常、兼容性等问题
• 收集性能：解决慢查询、慢加载等问题
• 收集接口：发现接口错误、打通服务端监控
• 收集多方面辅助信息，综合多方面分析，提高产品价值

为了实现这些，我们需要前端监控系统的存在，可以让我们在第一时间收集数据、处理数据、存储数据、查询数据。

基本构成

• 监控上报SDK：数据收集
• 服务端：数据处理
• 数据库：数据建模存储
• 管理台：数据可视化展示

为了实现前端监控系统，我们首先需要开发封装一个统一的SDK实现自动收集、上报数据。

服务端将收集到的数据进行一些处理后，我们需要存储关键数据到数据库之中。（也可以使用redis做数据缓存）。

最后我们需要一个管理平台，实现数据的可视化展示，提供可视化查询界面。

数据分类

主要有三个指标：

• 稳定性指标
  • 异常监控，包括接口错误、js异常、资源加载异常、白屏异常等
• 用户体验指标/性能监控
  • FP、FCP、DOMReady、DNS等
• 用户行为指标
  • PV、UV、页面停留时间等