Sentry中React Profiling结果的查看位置咨询

核心配置确认 #

• 确保sentry-react版本≥7.47.0，组件追踪功能是这个版本后正式上线的
• 初始化Sentry时必须显式启用ComponentTracking集成，同时设置合理的tracesSampleRate（调试阶段建议设为1.0）：

  import * as Sentry from "@sentry/react";
  import { BrowserTracing } from "@sentry/tracing";
  
  Sentry.init({
    dsn: "YOUR_PROJECT_DSN",
    integrations: [
      new BrowserTracing(),
      new Sentry.ComponentTracking({
        trackComponents: true, // 开启组件追踪
      }),
    ],
    tracesSampleRate: 1.0, // 必须设置，否则性能数据不会上报
  });
  

Browser Profiling的关联说明 #

文档没明确标注，但React组件追踪数据依赖基础性能追踪（Performance Monitoring）的启用：

• 不需要强制开启Browser Profiling，但必须确保项目已在Sentry后台开启Performance模块
• 若未配置BrowserTracing（Web端的追踪集成），组件的性能数据无法被关联到事务中，自然不会在Performance模块显示

数据上报排查步骤 #

1. 浏览器Network面板过滤sentry.io，检查是否有envelope请求携带component_profiling类型的数据
2. 进入Sentry项目后台的「Performance > 设置」，确认组件追踪功能已启用
3. 查看Performance下的「Transactions」列表，点击任意事务详情，底部若有「Component Profiling」标签则说明数据已上报，无标签则代表上报失败

常见问题 #

• 采样率过低：tracesSampleRate设为0或过小，导致只有极少部分请求上报，调试时拉满1.0
• 代码混淆：生产环境压缩代码时组件名称被替换，需确保上传了正确的sourcemap
• React版本不兼容：组件追踪依赖React 16.8+的Hooks特性，低版本无法生效

内容的提问来源于stack exchange，提问作者csvan