终极武器：如何用 Sentry 监控线上错误？

Sentry 是什么？

Sentry 是一个开源的实时错误监控平台，帮助开发者快速发现、诊断和修复线上问题。它支持多种编程语言和框架，包括 JavaScript、React、Vue、Angular 等前端技术栈。Sentry 的核心功能是捕获异常、记录错误上下文，并提供详细的错误报告，让开发者能够快速定位问题。

为什么需要 Sentry？

线上环境复杂多变，用户设备、网络状况、浏览器版本等因素都可能导致难以复现的 bug。传统的 console.log 或 try/catch 无法覆盖所有场景，而 Sentry 提供了以下优势：

1. 实时监控：错误发生后立即通知，无需用户反馈
2. 丰富上下文：记录用户操作轨迹、设备信息、网络状态等
3. 错误聚合：相同错误自动归类，避免重复报警
4. 版本追踪：关联错误与代码版本，方便定位问题代码

如何集成 Sentry

基础安装

以 React 项目为例，通过 npm 安装 Sentry：

npm install @sentry/react @sentry/tracing

然后在应用入口文件初始化：

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_DSN_HERE",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
  release: "your-project-name@" + process.env.REACT_APP_VERSION,
});

捕获错误示例

Sentry 会自动捕获未处理的异常，也可以手动捕获：

try {
  riskyOperation();
} catch (err) {
  Sentry.captureException(err, {
    extra: {
      userId: currentUser.id,
      operationState: getState(),
    },
  });
}

高级配置技巧

自定义错误过滤

有些错误可能不需要上报，可以通过 beforeSend 回调过滤：

Sentry.init({
  // ...其他配置
  beforeSend(event) {
    if (event.exception?.values?.[0]?.type === "ChunkLoadError") {
      return null; // 忽略特定错误
    }
    return event;
  },
});

性能监控

Sentry 不仅可以监控错误，还能跟踪性能：

const transaction = Sentry.startTransaction({
  name: "Checkout Process",
});

// 业务代码...

transaction.finish();

用户反馈收集

当错误发生时，可以展示反馈表单收集更多信息：

Sentry.showReportDialog({
  eventId: '123456',
  title: '抱歉，出了点问题',
  subtitle: '我们的团队已收到通知',
  subtitle2: '如果您愿意，可以留下联系方式帮助我们调查',
  labelName: '姓名',
  labelEmail: '邮箱',
  labelComments: '发生了什么？',
  labelClose: '关闭',
  labelSubmit: '提交',
  successMessage: '感谢您的反馈！',
});

错误分析与排查

Sentry 后台提供了强大的错误分析工具：

1. 错误详情页：展示完整的调用栈、环境信息
2. 面包屑轨迹：记录错误发生前的用户操作路径
3. 版本对比：比较不同版本的错误发生率
4. 受影响用户：查看遇到该错误的用户特征

典型错误处理案例

假设用户报告页面白屏，通过 Sentry 发现是路由懒加载失败：

// 错误报告示例
{
  "exception": {
    "values": [{
      "type": "ChunkLoadError",
      "value": "Loading chunk 123 failed",
      "stacktrace": {
        "frames": [...]
      }
    }]
  },
  "breadcrumbs": [
    { "message": "Navigated to /checkout" },
    { "message": "Loading Checkout component" }
  ],
  "user": {
    "id": "user123",
    "browser": "Chrome 101"
  }
}

解决方案可以是添加错误边界或重试逻辑：

<Sentry.ErrorBoundary fallback={<ErrorPage />}>
  <Suspense fallback={<Loader />}>
    <Checkout />
  </Suspense>
</Sentry.ErrorBoundary>

团队协作最佳实践

1. 错误分配：将错误分配给具体负责人
2. 严重度分级：根据影响范围设置优先级
3. 警报规则：配置邮件/Slack 通知阈值
4. 问题追踪：集成 Jira/GitHub Issues

// 设置标签方便过滤
Sentry.configureScope((scope) => {
  scope.setTag("team", "frontend");
  scope.setTag("page", "checkout");
});

监控策略优化

采样率控制

生产环境可以调整采样率平衡数据量和性能：

Sentry.init({
  tracesSampleRate: 0.2, // 20%的性能数据
  denyUrls: [/extensions\//i], // 忽略浏览器扩展错误
});

环境区分

为不同环境配置不同的 DSN：

const dsn = {
  development: "DEV_DSN",
  production: "PROD_DSN",
}[process.env.NODE_ENV];

Sentry.init({ dsn });

敏感数据过滤

防止用户隐私信息被记录：

Sentry.init({
  // ...其他配置
  beforeSend(event) {
    sanitizeEvent(event);
    return event;
  },
});

function sanitizeEvent(event) {
  // 移除密码字段
  if (event.request?.data?.password) {
    event.request.data.password = "[REDACTED]";
  }
}

与其他工具集成

源码映射上传

在构建流程中上传 sourcemap：

sentry-cli releases files VERSION upload-sourcemaps ./build/static/js

CI/CD 集成

在部署流程中创建 release：

# GitHub Actions 示例
- name: Create Sentry Release
  run: |
    sentry-cli releases new $GITHUB_SHA
    sentry-cli releases set-commits $GITHUB_SHA --auto
    sentry-cli releases files $GITHUB_SHA upload-sourcemaps ./dist

真实场景下的错误处理

处理 API 错误

捕获并增强 API 错误信息：

axios.interceptors.response.use(null, (error) => {
  if (error.response) {
    Sentry.captureException(error, {
      contexts: {
        response: {
          status: error.response.status,
          data: error.response.data,
        },
      },
    });
  }
  return Promise.reject(error);
});

跟踪用户行为

记录关键操作路径：

function trackCheckoutStep(step) {
  Sentry.addBreadcrumb({
    category: "checkout",
    message: `Reached ${step}`,
    level: "info",
  });
}

性能优化建议

1. 延迟加载：非关键监控代码动态加载
2. 批量上报：配置 transport 实现批量发送
3. 离线缓存：支持离线时暂存错误，联网后上报
4. 体积控制：只引入必要的 Sentry 模块

// 动态加载示例
import("@sentry/react").then((Sentry) => {
  Sentry.init({ /* 配置 */ });
});

长期维护策略

1. 定期审查：每周检查未解决错误
2. 错误分类：建立错误类型知识库
3. 指标监控：跟踪错误率变化趋势
4. 归档机制：标记已修复的重复错误

// 标记已修复错误
Sentry.init({
  ignoreErrors: [
    "KnownIssueError",
    /CustomIgnoredErrorRegex/,
  ],
});