SuperAPI AI 工具集

adding-error-tracking

通用与其它

查看项目

更新于 10-16 06:52

技能介绍

用途:当用户要求添加错误追踪、崩溃上报、异常监控或性能追踪时使用本技能,为 Web 应用接入 Sentry。

主要能力:自动检测框架(通过 package.json、配置文件与目录结构判断 Next.js、React、Node.js、Python/Django/Flask 等);安装对应 SDK;初始化 Sentry;配置环境变量;添加错误边界;为生产构建配置 Source Maps 上传;并验证集成是否生效。

使用方式:

  1. 检测框架。
  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. 初始化:Next.js 由向导生成 sentry.client.config.ts、sentry.server.config.ts、sentry.edge.config.ts,需确认存在且含 DSN;React (Vite) 在 main.tsx 中调用 Sentry.init,配置 dsn、browserTracingIntegration 与 tracesSampleRate;Node.js 在入口文件最顶部、其他 import 之前初始化。
  4. 添加环境变量:NEXT_PUBLIC_SENTRY_DSN、SENTRY_AUTH_TOKEN、SENTRY_ORG、SENTRY_PROJECT。
  5. 用 Sentry.ErrorBoundary 包裹应用或关键子树并提供 fallback UI。
  6. 生产构建配置 Sentry webpack/vite 插件上传 Source Maps;Next.js 由 next.config.js 中的 withSentryConfig 处理。
  7. 测试:临时加一个抛错按钮,确认事件出现在 Sentry 面板。

适用场景:需要为前端或后端 Web 应用增加错误与性能可观测性的项目。

限制与注意:生产环境应将 tracesSampleRate 调低(如 0.1)以控制成本;把 sentry.properties 与 .sentryclirc 加入 .gitignore;切勿提交 SENTRY_AUTH_TOKEN。具体收费、价格与平台支持范围资料未提供。