前端错误监控与会话分析：Sentry vs Bugsnag vs Rollbar vs LogRocket

这四个工具都能帮助开发者监控线上问题，但侧重点不同。Sentry 和 Bugsnag 侧重错误堆栈，LogRocket 侧重用户行为回放，Rollbar 侧重错误分组。下面从实际开发角度对比。

🛠️ 初始化配置

Sentry 需要 DSN 和集成配置，支持自动捕获全局错误。

import * as Sentry from "@sentry/browser";
Sentry.init({ 
  dsn: "https://...@sentry.io/123", 
  integrations: [new Sentry.BrowserTracing()] 
});

Bugsnag 使用 API Key 和插件系统，配置项较为直观。

import Bugsnag from "@bugsnag/js";
Bugsnag.start({ 
  apiKey: "YOUR_KEY", 
  appVersion: "1.0.0",
  plugins: [] 
});

Rollbar 需要 Access Token 和环境设置，支持浏览器端直接引入。

import Rollbar from "rollbar";
const rollbar = new Rollbar({ 
  accessToken: "YOUR_TOKEN", 
  environment: "production" 
});

LogRocket 只需要 App ID，启动后自动开始记录会话。

import LogRocket from "logrocket";
LogRocket.init("YOUR_APP_ID", {
  network: { isEnabled: true }
});

🚨 错误捕获

Sentry 自动捕获未处理异常，也可手动上报异常。

try { 
  riskyOperation(); 
} catch (e) { 
  Sentry.captureException(e); 
}

Bugsnag 类似，使用 notify 方法手动发送错误报告。

try { 
  riskyOperation(); 
} catch (e) { 
  Bugsnag.notify(e); 
}

Rollbar 提供 error 方法手动发送，支持附加消息。

try { 
  riskyOperation(); 
} catch (e) { 
  rollbar.error(e, "Failed to load data"); 
}

LogRocket 主要自动记录，也可手动标记错误以便在回放中高亮。

try { 
  riskyOperation(); 
} catch (e) { 
  LogRocket.error(e); 
}

👤 用户身份识别

Sentry 使用 setUser 设置用户信息，关联错误与特定用户。

Sentry.setUser({ 
  id: "123", 
  email: "user@example.com" 
});

Bugsnag 使用 addUser 添加用户，参数顺序固定。

Bugsnag.addUser("123", "user@example.com", "name");

Rollbar 使用 configurePerson 配置，支持更多自定义字段。

rollbar.configurePerson({ 
  id: "123", 
  username: "user" 
});

LogRocket 使用 identify 识别用户，便于筛选特定用户会话。

LogRocket.identify("123", { 
  email: "user@example.com" 
});

🍞 上下文信息 (Breadcrumbs/Metadata)

Sentry 添加面包屑记录用户操作路径，方便回溯。

Sentry.addBreadcrumb({ 
  message: "User clicked button", 
  category: "ui" 
});

Bugsnag 添加 metadata 分组信息，用于过滤和搜索。

Bugsnag.addMetadata("account", { 
  loggedIn: true 
});

Rollbar 添加 custom 数据，随错误一起上报。

rollbar.log("message", { 
  customData: { page: "home" } 
});

LogRocket 自动记录 Console 和网络请求，也可手动 track 事件。

LogRocket.track("Checkout Started", { 
  amount: 100 
});

📼 会话回放与性能

Sentry 提供 Session Replay 功能，可配置采样率录制用户操作。

Sentry.init({
  integrations: [
    new Sentry.Replay({ maskAllText: false })
  ]
});

Bugsnag 侧重会话稳定性，记录崩溃前的操作流，非视频回放。

Bugsnag.start({
  features: { sessionTracking: true }
});

Rollbar 侧重错误发生时的上下文快照，不提供完整视频回放。

rollbar.configure({
  captureUncaught: true
});

LogRocket 核心功能是视频级会话回放，还原点击、输入和网络请求。

LogRocket.init("APP_ID", {
  network: { isEnabled: true }
});

📊 总结对比

💡 选型建议

根据项目需求选择。如果只需要调试用户操作问题，logrocket 最直接。如果关注整体应用健康和性能，sentry 最全面。如果重视错误通知和部署关联，rollbar 很合适。如果追求简单稳定和跨端一致性，bugsnag 是好选择。