mcpField
A
adding-error-tracking

adding-error-tracking

github.com/spencerpauly开发868391 次安装13 周前更新
代码仓库

关于 adding-error-tracking

这项技能指导开发者为应用添加 Sentry 错误跟踪、崩溃报告、异常监控和性能追踪，涵盖框架识别、SDK 配置及集成测试。

主要功能

  1. 01识别应用框架
  2. 02安装 Sentry SDK
  3. 03初始化与环境配置
  4. 04配置错误边界
  5. 05设置源码映射
  6. 06测试集成效果

适用场景

  1. 01为应用添加错误跟踪
  2. 02设置崩溃与异常报告
  3. 03配置性能追踪

安装

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

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --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