name: 错误跟踪集成器 description: 为Sentry、Rollbar或类似服务添加全面的错误跟踪，包括错误边界、上下文和面包屑。当用户请求错误监控或提到生产调试时使用。 allowed-tools: 读取，搜索，全局搜索，写入，编辑，Bash，

错误跟踪集成器

将错误跟踪服务集成到应用程序中，以实现更好的生产调试和监控。

何时使用

用户请求错误监控或跟踪
设置生产错误日志记录
用户提到"Sentry"、“错误跟踪”、“崩溃报告"或"生产调试”

指南

1. 检测框架

识别应用程序框架：

React, Vue, Angular （前端）
Express, Fastify （Node.js 后端）
Django, Flask （Python）
Rails （Ruby）

2. 选择错误跟踪服务

流行服务：

Sentry：最受欢迎的，全面的
Rollbar：适合后端
Bugsnag：多平台
Airbrake：Ruby 专注
LogRocket：会话重放+错误

3. 安装和配置

Sentry （React 示例）：

npm install @sentry/react

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay()
  ],
});

Sentry （Node.js/Express）：

const Sentry = require("@sentry/node");

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

// 请求处理器（第一个中间件）
app.use(Sentry.Handlers.requestHandler());

// 错误处理器（所有路由之后，错误中间件之前）
app.use(Sentry.Handlers.errorHandler());

4. 添加错误边界（React）

import { ErrorBoundary } from '@sentry/react';

function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <YourApp />
    </ErrorBoundary>
  );
}

5. 添加上下文

用户上下文：

Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.username
});

标签：

Sentry.setTag("page_locale", "en-US");
Sentry.setTag("feature_flag", "new_ui");

上下文：

Sentry.setContext("order", {
  id: order.id,
  total: order.total,
  items: order.items.length
});

6. 面包屑

跟踪导致错误的用户操作：

Sentry.addBreadcrumb({
  category: "auth",
  message: "User logged in",
  level: "info"
});

Sentry.addBreadcrumb({
  category: "ui",
  message: "Button clicked",
  data: { buttonId: "submit-form" }
});

7. 手动错误捕获

try {
  riskyOperation();
} catch (error) {
  Sentry.captureException(error, {
    tags: { section: "payment" },
    level: "error",
    extra: { orderId: order.id }
  });
}

8. 过滤敏感数据

清洗PII：

Sentry.init({
  beforeSend(event, hint) {
    // 如果包含敏感数据则不发送
    if (event.request?.data?.password) {
      delete event.request.data.password;
    }
    return event;
  },
  ignoreErrors: [
    // 忽略浏览器扩展错误
    /extensions\//i,
    /^Non-Error promise rejection/,
  ]
});

9. 源映射（生产）

启用源映射以获得可读的堆栈跟踪：

Webpack：

// webpack.config.js
module.exports = {
  devtool: 'source-map',
  plugins: [
    new SentryWebpackPlugin({
      org: "your-org",
      project: "your-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      include: "./dist",
    }),
  ],
};

10. 警报配置

设置警报：

新问题
回归（已解决的问题再次出现）
错误率激增
严重错误（支付，认证失败）

11. 性能监控

添加事务跟踪：

const transaction = Sentry.startTransaction({
  name: "processOrder",
  op: "task"
});

try {
  await processOrder();
} finally {
  transaction.finish();
}

12. 最佳实践

环境分离：开发/测试/生产不同的项目
发布跟踪：用发布版本标记错误
采样率：100%错误，性能较低%
团队通知：Slack/电子邮件集成
问题分配：自动分配给代码所有者
错误分组：自定义指纹以更好地分组
不要记录敏感数据：PII，密码，令牌

支持文件

templates/sentry-react.js: React集成模板
templates/sentry-node.js: Node.js集成模板
templates/sentry-python.py: Python集成模板