前端埋点SDK插件化监控方案，采集数据经MySQL与RabbitMQ存储处理

方案简介

Heimdallr-SDK 是一套「首创插件化、可插拔的前端埋点 SDK」方案，定位为简单易用、轻量化、插件化的前端监控利器。该方案由浏览器端 SDK（如 @heimdallr-sdk/browser）配合各类插件（错误捕获、Console、DOM、Fetch、XHR、路由、性能指标、页面崩溃检测、录制、自定义事件、Vue 支持等）组成采集端，后端通过 Prisma 操作 MySQL 存储数据，并引入 RabbitMQ 处理上报链路。适合需要在前端项目中接入自建监控/埋点体系、并希望按需插拔功能的前端团队。项目完全开源，采用 monorepo（pnpm workspace）组织，可按包单独构建。

亮点与能力

• 插件化、可插拔的埋点架构，按需启用功能
• 错误捕获、Console、DOM、Fetch、XHR 等多种采集插件
• 页面崩溃检测与性能指标采集
• 录制插件与路由插件
• Vue 框架支持插件
• 自定义事件上报
• 基于 Playwright 的完整 E2E 测试体系
• monorepo 架构，支持按包构建

实施步骤

1. 安装依赖

bash
pnpm i --registry=https://registry.npmmirror.com

2. 准备本地服务

确保本地 MySQL 数据库服务已启动，host 为 localhost，端口为 3306。

3. 初始化数据库

使用 Prisma 初始化，会自动创建名为 test_base 的数据库用于调试：
bash
pnpm run prisma

4. 启动本地服务

bash
pnpm run dev

5. 构建（可选）

构建单个包，例如浏览器包：
bash
pnpm --filter @heimdallr-sdk/browser run build

构建所有包：
bash
pnpm run build

使用与配置要点

跑通后可通过 E2E 测试验证功能完整性。首次设置：
bash
pnpm install
pnpm test:setup
mysql -u root -p -e "CREATE DATABASE IF NOT EXISTS test_base;"

运行全部 E2E 测试：
bash
pnpm test

仅运行测试（跳过 setup，用于 CI）：
bash
pnpm test:e2e

交互模式、调试模式、有头模式与查看报告：
bash
pnpm test:e2e:ui
pnpm test:e2e:debug
pnpm test:e2e:headed
pnpm test:e2e:report

测试覆盖包括 SDK Core & Manager Integration（9）、Error Capture（5）、Console Plugin（4）、Performance Metrics（5）、Vue Plugin（3）等。

注意事项与常见问题

• 本地开发必须先安装并启动 MySQL 与 RabbitMQ，否则服务无法运行
• MySQL 默认要求 localhost:3306
• E2E 测试需数据库 test_base 已存在
• 详细测试文档见 e2e/README.md，完整文档见官网 https://LucivHuang.github.io/heimdallr-sdk/
• 项目持续优化更新中，完全开源免费

优缺点

• ✓ 插件化可插拔，按需接入
• ✓ E2E测试覆盖全面
• ✕ 依赖本地MySQL与RabbitMQ，搭
• ✕ 文档托管于外部站点，README信息薄

出处

本方案挖掘自开源项目 LucivHuang/heimdallr-sdk，方案内容与实施命令均来自其 README 原文。