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

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy