前端监控系统的构建之路——（上）

俗话说，没有业务场景的系统设计，就是耍流氓。我构想设计这个系统，也是基于业务背景的。所在公司的产品既面向 C 端，也面向 B 端。在开发落地业务时，我们经常遇到一类非常头疼的问题：

• 缺乏统一的前端错误收集和问题回溯机制，导致在排查问题时需要花费大量时间在错误日志中查找问题。
• 缺乏前端性能监控机制，无法及时发现和修复前端性能瓶颈，导致用户体验下降。
• 缺乏前端用户体验监控机制，无法及时发现和修复前端用户体验问题，导致用户满意度下降。

为了解决这些问题，我决定动手撸一个监控系统，用来解决错误收集和问题回溯，以及前端性能和用户体验的监控。

系统架构

系统架构如下图所示：

[图片]

系统由以下几个组件组成：

• 前端监控代理: 收集前端应用的错误、性能和用户体验数据，并将数据发送到后端服务。
• 后端服务: 存储和分析前端应用的数据，并提供有关前端应用性能和用户体验的报告。
• 可视化界面: 提供前端应用的性能和用户体验数据的可视化界面，方便开发人员查看和分析数据。

前端监控代理

前端监控代理是一个 JavaScript 库，它可以嵌入到前端应用中。当前端应用发生错误、性能瓶颈或用户体验问题时，前端监控代理会收集相关数据，并将数据发送到后端服务。

后端服务

后端服务是一个 Node.js 应用，它负责存储和分析前端应用的数据。后端服务会将数据存储在 MySQL 数据库中，并提供有关前端应用性能和用户体验的报告。

可视化界面

可视化界面是一个 React 应用，它提供前端应用的性能和用户体验数据的可视化界面。可视化界面会从后端服务获取数据，并将数据以图表和表格的形式展示出来。

系统功能

系统提供了以下几个功能：

• 错误收集: 收集前端应用中的错误，并提供有关错误的详细信息，包括错误类型、错误信息、错误堆栈和错误发生时的环境信息。
• 问题回溯: 提供错误的调用栈信息，帮助开发人员快速定位错误的原因。
• 性能监控: 监控前端应用的性能，并提供有关前端应用性能的数据，包括页面加载时间、资源加载时间、DOM 解析时间、JavaScript 执行时间和网络请求时间等。
• 用户体验监控: 监控前端应用的用户体验，并提供有关前端应用用户体验的数据，包括页面加载时间、资源加载时间、DOM 解析时间、JavaScript 执行时间和网络请求时间等。
• 稳定性监控: 监控前端应用的稳定性，并提供有关前端应用稳定性的数据，包括错误率、崩溃率和宕机率等。
• 可靠性监控: 监控前端应用的可靠性，并提供有关前端应用可靠性的数据，包括可用性和响应时间等。
• 可用性监控: 监控前端应用的可用性，并提供有关前端应用可用性的数据，包括在线时间和宕机时间等。

系统优势

系统具有以下几个优势：

• 统一的前端监控平台: 系统提供了一个统一的前端监控平台，可以收集和分析前端应用的错误、性能和用户体验数据。
• 丰富的监控功能: 系统提供了丰富的监控功能，包括错误收集、问题回溯、性能监控、用户体验监控、稳定性监控、可靠性监控和可用性监控等。
• 可视化的数据展示: 系统提供了可视化的数据展示界面，方便开发人员查看和分析数据。
• 易于扩展: 系统易于扩展，可以根据需要添加新的监控功能。