mcpField
A
adding-error-tracking

adding-error-tracking

github.com/revitalb-port开发058 次安装10 周前更新
代码仓库

关于 adding-error-tracking

用于为应用添加 Sentry 错误跟踪、崩溃报告、异常监控和性能追踪的技能。它涵盖框架识别、SDK 初始化、源码映射配置与集成验证。

主要功能

  1. 01识别应用框架
  2. 02安装对应的 Sentry SDK
  3. 03配置初始化和环境变量
  4. 04添加错误边界与源码映射
  5. 05在 Sentry 控制台验证事件

适用场景

  1. 01为应用添加异常监控
  2. 02为 Web 应用配置 Sentry 追踪
  3. 03发布前验证错误上报

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill adding-error-tracking

安装后在 Claude Code 中输入/adding-error-tracking确认已加载。

详细介绍

添加错误跟踪（Sentry）

当用户要求添加错误跟踪、崩溃报告、异常监控或性能追踪时，使用此技能。

步骤

  1. 检测框架 — 检查 package.json、配置文件和目录结构，以确定技术栈（Next.js、React、Node.js、Python/Django/Flask 等）。

  2. 安装 SDK

    • Next.js：npx @sentry/wizard@latest -i nextjs
    • React（Vite）：npm install @sentry/react
    • Node.js：npm install @sentry/node
    • Python：pip install sentry-sdk

  3. 初始化 Sentry

    • 对于 Next.js，向导会创建 sentry.client.config.ts、sentry.server.config.ts 和 sentry.edge.config.ts。请确认这些文件存在且包含 DSN。

    • 对于 React（Vite），在 main.tsx 中初始化：

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

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 1.0,
});

    • 对于 Node.js，请在入口文件的最顶部初始化，置于其他所有导入之前。

  4. 添加环境变量

    NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/...
SENTRY_AUTH_TOKEN=sntrys_...
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project

  5. 添加错误边界 — 使用 Sentry.ErrorBoundary 包裹应用（或关键子树），并提供备用 UI。

  6. Source Map — 对于生产构建，配置 Sentry webpack/vite 插件以上传 Source Map。对于 Next.js，此操作由 next.config.js 中的 withSentryConfig 处理。

  7. 测试集成 — 添加一个临时按钮，点击后抛出错误，以验证事件是否显示在 Sentry 控制面板中。

注意事项

  • 在生产环境中，将 tracesSampleRate 设为较低的值（例如 0.1）以控制成本。
  • 将 sentry.properties 和 .sentryclirc 添加到 .gitignore。
  • 切勿提交 SENTRY_AUTH_TOKEN。

评论

支持 Markdown