前端错误监控：Sentry在React项目中的配置与实战

Sentry 简介Sentry 是一个开源的实时错误监控平台支持多种语言和框架包括 JavaScript 和 React。它可以帮助开发者快速捕获、分析和修复前端错误提升应用稳定性。安装 Sentry SDK在 React 项目中安装 Sentry 的核心 SDK 和 React 相关依赖npm install sentry/react sentry/tracing初始化 Sentry在应用的入口文件如index.js或App.js中初始化 Sentry配置 DSN数据源名称和基础参数import * as Sentry from sentry/react; import { BrowserTracing } from sentry/tracing; Sentry.init({ dsn: YOUR_DSN_HERE, // 替换为你的 Sentry 项目 DSN integrations: [new BrowserTracing()], tracesSampleRate: 1.0, // 性能监控采样率0-1 environment: production, // 区分环境如 development/staging });错误边界集成Sentry 提供了ErrorBoundary组件可以捕获 React 组件树中的未处理错误import { ErrorBoundary } from sentry/react; function App() { return ( ErrorBoundary fallback{pAn error occurred./p} {/* 你的应用组件 */} /ErrorBoundary ); }手动捕获错误对于非组件错误如 API 请求失败可以通过Sentry.captureException手动上报try { // 可能出错的代码 } catch (err) { Sentry.captureException(err); }性能监控配置启用性能监控需配置BrowserTracing并设置采样率Sentry.init({ integrations: [ new BrowserTracing({ routingInstrumentation: Sentry.reactRouterV5Instrumentation(router), // 适用于 React Router v5 }), ], tracesSampleRate: 0.2, // 降低采样率以减少性能开销 });环境与版本管理通过区分环境和版本号便于问题追踪Sentry.init({ environment: process.env.NODE_ENV, release: your-project1.0.0, // 与 CI/CD 版本一致 });本地开发过滤在开发环境中禁用 Sentry 或减少日志量Sentry.init({ beforeSend(event) { if (window.location.hostname localhost) { return null; // 忽略本地错误 } return event; }, });用户反馈收集在错误发生时提示用户提交反馈Sentry.showReportDialog({ eventId: 错误事件 ID, // 通常从 captureException 返回 });源码映射上传确保生产环境错误能定位到源码需在构建时上传 sourcemap安装sentry/webpack-pluginnpm install --save-dev sentry/webpack-plugin在webpack.config.js中配置const SentryWebpackPlugin require(sentry/webpack-plugin); plugins: [ new SentryWebpackPlugin({ authToken: process.env.SENTRY_AUTH_TOKEN, org: your-org, project: your-project, include: ./dist, // 构建输出目录 }), ];注意事项DSN 安全性避免将 DSN 硬编码在代码中推荐通过环境变量注入。隐私数据通过beforeSend过滤敏感信息如用户密码。采样率调整根据应用流量调整tracesSampleRate避免过量数据产生费用。