Skip to content

reactComponentAnnotation not working in react-router framework project #16471

Closed
@derekr

Description

@derekr

Environment

"react": "^19.0.0",
"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
npm list --depth=0 | grep sentry
├── @sentry/profiling-node@9.24.0 -> ./node_modules/.pnpm/@sentry+profiling-node@9.24.0/node_modules/@sentry/profiling-node
├── @sentry/react-router@9.24.0 -> ./node_modules/.pnpm/@sentry+react-router@9.24.0_@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0._4e5a7a9242170d6fa6f4b97d0883c61b/node_modules/@sentry/react-router
├── pino-sentry-transport@1.5.0 -> ./node_modules/.pnpm/pino-sentry-transport@1.5.0_patch_hash=db53541e3cb70bf23686dde292b78778fb3bdb1b004999a2_bb3829d098d7e4553bdfa89500623f30/node_modules/pino-sentry-transport
npm list --depth=0 | grep react-router

├── @react-router/dev@7.6.0 -> ./node_modules/.pnpm/@react-router+dev@7.6.0_@types+node@22.15.21_jiti@2.4.2_lightningcss@1.29.1_react-route_f75de3eee766fc6a692d5fd6c73a91e6/node_modules/@react-router/dev
├── @react-router/express@7.6.0 -> ./node_modules/.pnpm/@react-router+express@7.6.0_express@4.21.2_react-router@7.6.0_react-dom@19.0.0_react@19_9f42d7d704a8cb5c044ff4876964a7c1/node_modules/@react-router/express
├── @react-router/fs-routes@7.6.0 -> ./node_modules/.pnpm/@react-router+fs-routes@7.6.0_@react-router+dev@7.6.0_@types+node@22.15.21_jiti@2.4.2_l_9c30972203d0fd38fea6abc06c22e547/node_modules/@react-router/fs-routes
├── @react-router/node@7.6.0 -> ./node_modules/.pnpm/@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0__typescript@5.8.2/node_modules/@react-router/node
├── @sentry/react-router@9.24.0 -> ./node_modules/.pnpm/@sentry+react-router@9.24.0_@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0._4e5a7a9242170d6fa6f4b97d0883c61b/node_modules/@sentry/react-router
├── @tanstack/react-router@1.35.3 -> ./node_modules/.pnpm/@tanstack+react-router@1.35.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@tanstack/react-router
├── react-router@7.6.0 -> ./node_modules/.pnpm/react-router@7.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-router

Steps to Reproduce

  1. Modified vite.config.ts to enable reactComponentAnnotation.
  2. Commented out any potential competing plugins
  3. Tried babel plugin directly

Sample plugins from vite.config.ts

const plugins: PluginOption[] = [
        reactRouter(),
        sentryReactRouter(
            {
                org: 'basedash',
                project: 'basedash-charts',
                sourceMapsUploadOptions: {
                    enabled: IS_SENTRY_AUTH_TOKEN_AVAILABLE,
                },
                release: IS_SENTRY_AUTH_TOKEN_AVAILABLE
                    ? {
                            name:
                                process.env.RELEASE_VERSION?.split(':').slice(-1)[0] ?? 'local',
                        }
                    : undefined,
                unstable_sentryVitePluginOptions: {
                    reactComponentAnnotation: {
                        enabled: true,
                        ignoredComponents: ['Fragment'],
                    },
                },
            },
            config,
        ),
        tsconfigPaths(),
        Boolean(process.env.CODECOV_TOKEN) &&
            codecovRemixVitePlugin({
                enableBundleAnalysis: process.env.NODE_ENV === 'production',
                bundleName: 'basedash-charts-bundle',
                uploadToken: process.env.CODECOV_TOKEN,
                // Needed since we run the build in Docker where codecov can't automatically
                // determine git/github context.
                uploadOverrides: {
                    slug: 'basedash/charts',
                    branch: process.env.GIT_BRANCH,
                    pr: process.env.GITHUB_PR_NUMBER,
                    sha: process.env.GIT_SHA,
                    compareSha: process.env.GITHUB_COMPARE_SHA,
                },
            }),
        svgr(),
        // ReactComponentName({}),

        tailwindcss(),
        // babel({
        //     include: '/app/**/*',
        //     filter: /\.[jt]sx?$/,
        //     babelConfig: {
        //         presets: ['@babel/preset-typescript'],
        //         plugins: [['babel-plugin-react-compiler', {}]],
        //     },
        // }),
        process.env.SENTRY_SPOTLIGHT === 'true' && spotlightSidecar(),
        process.env.SENTRY_SPOTLIGHT === 'true' && spotlight(),
        // Bundle analysis
        // > pnpm build
        // > open build/client/stats.html
        // > open build/server/stats.html
        process.env.VITE_ANALYZE === 'true' &&
            visualizer({ emitFile: true, template: 'treemap' }),
    ];

Expected Result

Elements in dom inspector to be annotated w/ sentry data attributes.

Actual Result

No sentry data attributes are found in the dom.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions