我从0到1开源一个前端智能监控项目 Rewind：Session Replay + AI 分析，让生产 Bug “看得见、找得到”

x29
0 阅读4分钟

摘要：
线上 Bug 最痛苦的不是“报错了”，而是“不知道用户到底干了啥”。我最近开源了 Rewind —— 一个专注行为录制 + 智能定位的前端监控平台。本文深度分享项目定位、整体架构、SDK 插件化设计思路、核心数据流和开发心得，目前处于基础采集阶段，欢迎 Star & 共建！

大家好，我是 X29。

作为前端开发者，你最烦的线上问题是什么？
对我来说，是复现不了、定位不了。Sentry 能告诉我报错堆栈，但用户到底点了什么按钮、走了什么路径、发了哪些接口请求？完全是黑盒。

于是我开启了开源项目 Rewind，目标是：让每一个错误都有完整可回放的轨迹，并用 AI 帮助快速分析原因。

项目地址：github.com/X29w/rewind （目前早期阶段，欢迎 Star 支持！）

🎯 项目核心价值：从“猜”到“看”

传统监控 vs Rewind：

维度传统方案（如 Sentry）Rewind 的目标
错误信息堆栈 + 基本字段堆栈 + 操作时间线 + 完整 Session Replay
定位效率手动猜测复现路径一键回放 + AI 自动总结上下文
相似错误处理人工或简单归类智能指纹算法，归并准确率 >95%
白屏/性能问题较弱双重检测 + 行为关联

一句话：Rewind 不只是监控工具，更是问题定位工作台。

🏗️ 整体架构设计

采用 Turborepo + pnpm Monorepo 结构，清晰且扩展性强：

rewind/
├── packages/
│   ├── shared/      # 共享 TS 类型
│   ├── sdk/         # 前端采集 SDK（gzip <15KB）
│   ├── server/      # NestJS + Prisma + Redis + BullMQ
│   └── dashboard/   # React 18 + Vite + Ant Design
├── docs/            # 多语言文档（中/英/繁/日）
└── docker-compose.yml

核心数据流（关键设计）：

image.png

🔌 SDK 插件化架构设计（重头戏）

设计原则：

  • 零依赖、轻量：核心 gzip <10KB，全量 <15KB
  • 插件化 + Tree-shaking：核心引擎只做基础采集，其余功能通过插件按需引入
  • 不影响宿主：全局 try-catch 保护，SDK 崩溃不影响业务
  • 隐私优先：不录制敏感输入内容，配置化录制范围

插件化架构思路：

核心引擎负责：初始化、事件总线、上报队列、基础错误捕获。

插件示例：

  • blankScreenPlugin：FCP 超时 + DOM 采样双重检测
  • apiMonitorPlugin：劫持 XHR/Fetch
  • performancePlugin：Web Vitals 采集
  • 未来更多插件...

关键代码结构思路（简化示例）：

// 核心引擎
class RewindCore {
  private plugins: Plugin[] = [];
  private breadcrumbs: Breadcrumb[] = []; // 环形缓冲区

  use(plugin: Plugin) {
    this.plugins.push(plugin);
    plugin.install(this);
  }

  captureError(err: Error, context?: any) {
    const event = this.buildEvent(err, context);
    this.send(event);
  }
}

// 初始化示例
init({
  dsn: '...',
  breadcrumbsLimit: 30,           // 环形缓冲区
  enableBlankScreen: true,
  plugins: [blankScreenPlugin(), apiMonitorPlugin()]
});

行为录制（核心竞争力）：

  • 使用环形缓冲区（固定 30 条），内存恒定
  • 记录点击、路由、输入（脱敏）、接口等
  • 错误发生时直接快照当前缓冲区，随错误事件一起上报（避免单独存大量行为数据）

白屏检测（亮点设计）：

  1. FCP 超时（默认 3s）
  2. DOM 采样（视口中心 + 四角 5 个点，若均为 html/body 则判定白屏）

💡 开发中的一些思考与决策

  1. 为什么行为录制默认开启？
    因为这是定位问题的关键上下文。没有轨迹，再多堆栈也没用。

  2. Monorepo 选择 Turborepo：轻量、缓存高效，适合这个规模的项目。

  3. AI 定位：目前在 P1 阶段，已设计好 LLM Provider 抽象层，支持多种模型接入。AI 不是炫技，而是真正帮开发者“整理线索”。

  4. 隐私与性能：所有敏感字段可配置脱敏，上报采用批量 + 压缩，尽量降低对宿主页面的影响。

🗓️ 当前进展 & 下一步

P0-a（基础采集）：In Progress（文档、Monorepo、SDK 核心、Server 接收、Dashboard 基础布局已完成）

接下来：

  • P0-b：错误指纹 + SourceMap + 问题定位工作台
  • P1：AI 增强分析（我最期待的部分！）

🤝 欢迎一起参与

项目完全 MIT 开源，非常早期，欢迎各种贡献：

  • Star / Fork
  • 提 Issue / Feature
  • 贡献插件、Dashboard 组件、文档翻译
  • 产品建议

GitHub：github.com/X29w/rewind

后续我计划持续输出系列文章：

  • SDK 插件化实现细节
  • 错误指纹算法实践
  • AI 在前端监控中的应用

如果你也在做监控相关、或者对 Session Replay / AI + 前端 感兴趣，欢迎评论区交流！

一起把 Rewind 打造成中文开发者好用的智能监控方案！

avatar
文章
阅读
粉丝