SuperAPI AI 工具集

sentry-react-router-framework-sdk

前端与建站

查看项目

更新于 10-15 21:51

技能介绍

用途:为 React Router 框架模式(v7)项目安装并配置 @sentry/react-router,覆盖客户端与服务端入口的错误捕获与性能追踪。非框架/数据/声明式路由(v5/v6/v7)应改用 sentry-react-sdk 搭配 @sentry/react。该 SDK 目前为 beta。

主要能力:错误监控(始终启用)、链路追踪、会话回放、服务端性能分析(@sentry/profiling-node)、结构化日志与用户反馈。相关 API 包括 reactRouterTracingIntegration、sentryOnError、createSentryHandleRequest、createSentryHandleError、wrapServerLoader/wrapServerAction、sentryReactRouter(Vite 插件)、sentryOnBuildEnd。

使用方式:推荐运行向导(需自行执行,可能需浏览器登录):npx @sentry/wizard@latest -i reactRouter。手动方式:npm install @sentry/react-router --save;如需性能分析再加 npm install @sentry/profiling-node --save;如入口文件隐藏,先运行 npx react-router reveal。随后在 entry.client.tsx 配置 Sentry.init 并传入 HydratedRouter 的 onError={Sentry.sentryOnError};在 instrument.server.mjs 初始化服务端;在 entry.server.tsx 使用 createSentryHandleRequest 与 createSentryHandleError 包装;通过 NODE_OPTIONS='--import ./instrument.server.mjs' 加载服务端插桩(受限平台可改为直接导入,但自动插桩可能不完整);并在 vite.config.ts 与 react-router.config.ts 配置源码映射上传(需 org、project、SENTRY_AUTH_TOKEN)。

适用场景:React Router 框架模式应用需要端到端错误与性能可见性、用户反馈、结构化日志或服务端性能分析时。

限制:向导为交互式且可能需登录;SENTRY_AUTH_TOKEN 需正确加载;服务端自动插桩在部分平台不完整;性能数据需安装 @sentry/profiling-node 并启用 nodeProfilingIntegration;具体采样率、DSN 与项目标识需用户自行填写;其余细节资料未提供。