前端监控 SDK 的渐进设计

前端监控的目标有很多，包括性能、错误、用户行为、测速等。其实质功能可以归纳为数据收集和数据上报。然而，在设计这些功能时，需要考虑的细节非常多。

我曾经深入研究过前端监控，并编写过相关的 SDK。随着业务的深入，发现之前的 SDK 架构设计存在诸多问题。主要是所有信息高度耦合，每次新增或修改某个功能时，代码都会相互影响。因此，在经历几次 SDK 开发后，我产生了一个想法：每增加一个信息收集功能，不需要修改原有代码，而是通过新增代码以插件的形式插入到已有代码中。于是，一个基于插件系统的架构应运而生。

之前的架构设计

改进后的架构设计

改造后的优势

改造后的架构将 SDK 分为三部分：

1. Core：核心类，在不同生命周期阶段调用不同插件来执行特定任务。Core 本身不处理具体功能，而是起到管理和协调作用。
2. Service：前端后台服务，负责对插件收集到的数据进行分类、处理和上报。
3. Plugins：负责日志和其他数据的收集。在不同生命周期阶段，Core 会调用相关插件执行数据收集任务，并将数据发送到 Service 进行进一步处理。

用智能家居来举例

• Core：类似于智能家居的控制中心，负责启动和管理整个系统，并在不同时间点（如早晨、晚上）调用不同设备（插件）。
• Plugins：类似智能家居中的各种传感器和设备，如温度传感器、摄像头等。这些设备负责收集环境数据（如温度、湿度或监控视频）。如果想要收集空气质量数据，则需要增加一个空气质量检测器（插件）。
• Service：相当于数据处理中心，接收来自传感器的数据，进行分类和处理，然后将处理后的信息发送给其他系统。

工作流程

1. 在 Core 初始化时，整合自身和插件的参数，然后启动服务执行 serve()。
2. 在 Core 启动（serve()）时，同时启动 Service 数据服务。
3. 在 Core 执行不同生命周期时，调用不同插件的收集功能。

设计优势

1. 插件自定义开发：利用生命周期，只需将插件收集的数据按照规范提交给 Service 即可。
2. 数据处理便捷：Service 中的数据处理更方便，可结合 worker、idle 任务节省主线程性能。
3. 解耦主要流程：便于拓展和维护。

这种设计大大增强了系统的灵活性和可维护性，同时为未来的扩展提供了便利。