前端监控选型指南：Sentry, LogRocket, New Relic 等六大工具深度解析

在生产环境中，代码出错是不可避免的。当用户报告“页面白了”或者“按钮没反应”时，作为开发者，我们最需要的是两样东西：现场录像和事故报告。本文对比的六款工具（logrocket, newrelic, raygun, rollbar, sentry, trackjs）正是为了解决这些问题而生，但它们的侧重点和解决思路截然不同。

🎥 核心差异：会话回放 vs 错误堆栈

这是选择工具时首先要考虑的分水岭。你是更需要看到用户操作的“视频”，还是更需要详细的代码报错“堆栈”？

logrocket 的核心卖点是会话回放。它记录 DOM 变化、用户输入和网络请求，让你能像看视频一样重放用户的操作过程。这对于复现 UI 错位、状态不同步等非致命但影响体验的 Bug 极其有效。

// logrocket: 初始化并记录会话
import LogRocket from 'logrocket';

LogRocket.init('your-app-id');

// 它可以自动记录点击、输入和控制台日志，无需额外代码
// 你可以在后台直接观看用户出错前的操作录像

sentry, rollbar, raygun, trackjs 和 newrelic 则主要关注错误堆栈和性能指标。它们捕获异常对象，解析堆栈信息，并聚合相同的错误。虽然部分工具（如 Sentry）也开始集成回放功能，但它们的核心优势依然在于对代码错误的深度分析和聚合。

// sentry: 捕获异常并发送
import * as Sentry from "@sentry/browser";

Sentry.init({ dsn: "your-dsn" });

try {
  throw new Error("Something broke");
} catch (err) {
  Sentry.captureException(err);
}

// rollbar: 类似的全局捕获
import Rollbar from 'rollbar';

const rollbar = new Rollbar({
  accessToken: 'your-token',
  captureUncaught: true,
  captureUnhandledRejections: true
});

rollbar.error("Something broke");

// raygun: 初始化并附加用户信息
import Raygun from 'raygun4js';

Raygun.init('your-api-key').attach();

Raygun.send(new Error("Critical failure"));

// trackjs: 初始化追踪器
import { Tracker } from 'trackjs';

Tracker.init({ token: 'your-token' });

// TrackJS 会自动捕获未处理的异常

// newrelic: 浏览器代理初始化
import { nr } from 'newrelic-browser-agent'; // 示意代码，实际通常通过 Script Tag 注入

// New Relic 通常通过全局脚本注入，自动捕获页面加载和错误
window.NREUM.init({
  licenseKey: 'your-key',
  applicationID: 'your-app-id'
});

📊 上下文数据：谁提供的信息更丰富？

当错误发生时，光有堆栈往往不够。我们需要知道用户当时在做什么，网络状况如何，以及应用的状态。

sentry 在上下文捕获方面做得非常深入。它允许你添加“面包屑”（Breadcrumbs），即错误发生前的一系列事件（如路由跳转、HTTP 请求、用户点击）。

// sentry: 添加面包屑
Sentry.addBreadcrumb({
  category: 'ui.click',
  message: 'User clicked Submit button',
  level: 'info',
});

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

trackjs 提出了“时间线”（Timeline）的概念，它将控制台日志、网络请求、用户操作和错误自动按时间轴排列。你不需要手动添加面包屑，它默认记录一切。

// trackjs: 自动记录时间线，也可手动标记
import { Tracker } from 'trackjs';

Tracker.track('Checkout Started', { cartTotal: 100 });
// 错误发生时，你会在时间线上看到这个标记点

newrelic 的优势在于全链路数据。如果你的后端也用了 New Relic，你可以直接从前端错误追溯到后端的慢查询或数据库锁，这是其他纯前端工具难以做到的。

// newrelic: 添加自定义属性以便后端关联
window.NREUM.setCustomAttribute('userId', '12345');
window.NREUM.setCustomAttribute('transactionId', 'tx-999');

rollbar 和 raygun 也支持附加上下文，但更侧重于错误本身的分组和去重，确保你不会收到成千上万条相同的邮件通知。

// rollbar: 配置自定义数据
rollbar.configure({
  payload: {
    environment: 'production',
    custom: { order_id: '555' }
  }
});

// raygun: 附加用户信息
Raygun.user({ email: 'user@example.com' }).send(error);

⚙️ 性能监控 (APM)：不仅仅是报错

现代监控工具不仅要告诉你“错了”，还要告诉你“慢了”。

newrelic 是这方面的老牌强者。它提供极细粒度的性能分析，包括资源加载时间、AJAX 请求耗时、以及长期的性能趋势对比。适合对性能指标有严格 SLA 要求的团队。

// newrelic: 标记关键事务
window.NREUM.interaction().setName('Checkout Process').end();

sentry 的性能监控（Performance Monitoring）近年来进步巨大。它基于分布式追踪理念，可以展示事务（Transaction）的跨度（Spans），帮你找出渲染瓶颈。

// sentry: 启动一个事务
const transaction = Sentry.startTransaction({ name: 'Search Query' });
const span = transaction.startChild({ op: 'db.query' });

// ... 执行搜索 ...

span.finish();
transaction.finish();

logrocket 的性能分析更多是结合在会话回放中的。你可以看到用户在卡顿时的具体操作，以及当时的网络请求瀑布流，非常直观，但缺乏长期的统计图表。

raygun, rollbar, trackjs 也提供基础的性能指标（如页面加载时间），但在深度分析和可视化方面，通常不如 Sentry 和 New Relic 强大。

🛠️ 开发者体验与工作流集成

工具好不好用，很大程度上取决于它能否融入你的日常工作流。

sentry 拥有最丰富的生态系统。它与 GitHub, GitLab, Jira, Slack 等工具的集成非常深度。例如，它可以直接在 PR 评论中显示该代码引入的新错误。

// sentry: 设置 Release 版本以关联代码提交
Sentry.setContext('release', { version: 'v1.2.3' });

rollbar 以其“部署追踪”功能闻名。你可以在部署脚本中调用 Rollbar API，它会自动标记时间点，并告诉你哪个部署导致了错误率飙升。

# rollbar: 在 CI/CD 中通知部署完成
curl https://api.rollbar.com/api/1/deploy/ \
  -F access_token=YOUR_TOKEN \
  -F environment=production \
  -F revision=v1.2.3

raygun 和 trackjs 同样提供强大的警报功能，支持通过邮件、Slack 或 Webhook 实时通知。它们的配置通常比 Sentry 更简单，适合想要“开箱即用”的团队。

logrocket 的工作流更多是“复现 - 修复”。它生成的回放链接可以直接分享给产品经理或设计师，沟通成本极低。

📉 相似之处：共同的基础能力

尽管侧重点不同，这六款工具在基础能力上有很多重叠：

1. 全局错误捕获

所有工具都能自动捕获 window.onerror 和 unhandledrejection。

// 所有工具都隐式处理此类错误
window.onerror = function(msg, url, line) { /* 工具会自动拦截 */ };

2. 用户标识

都支持设置用户 ID，以便按用户筛选错误。

// Sentry
Sentry.setUser({ id: 'user_1' });
// Raygun
Raygun.user({ identifier: 'user_1' });
// Rollbar
rollbar.configure({ payload: { person: { id: 'user_1' } } });

3. 源码映射 (Source Maps)

都支持上传 Source Maps，将压缩后的代码堆栈还原为原始代码。

# 通用 CLI 上传示例 (以 Sentry 为例)
sentry-cli releases files upload-sourcemaps ./dist
# 其他工具也有类似的 API 或 CLI 工具

4. 环境区分

都允许区分开发、测试和生产环境，避免开发噪音污染生产警报。

// 通用模式
init({ environment: 'production' });

📊 总结对比表

💡 最终建议

没有绝对的“最好”，只有最适合你当前痛点的工具。

• 如果你的团队每天都在为**“怎么复现这个 Bug”**而头疼，不要犹豫，直接上 logrocket。它能节省大量的沟通成本。
• 如果你需要一个**“瑞士军刀”，既能看错误，又能看性能，还能做发布健康度分析，且团队有较强的技术定制能力，sentry** 是行业标准的选择。
• 如果你已经在用 newrelic 监控后端，为了数据打通和统一账单，前端直接用 New Relic 是最理性的选择。
• 如果你非常关注CI/CD 流程，想知道每次上线是否引入了新 Bug，rollbar 的部署追踪功能会是你最好的助手。
• 如果你想要最简单的设置，只想尽快收到错误通知，raygun 或 trackjs 能让你在几分钟内完成集成并开始接收警报。

在实际的大型项目中，我们甚至经常看到 sentry (负责错误和性能) + logrocket (负责会话回放) 的组合使用方案，取长补短，构建最完善的监控体系。