Skip to content

feat(nextjs): Add experimental support for react component annotation in Turbopack#19604

Merged
chargome merged 5 commits intodevelopfrom
cg/JS-1709/nextjs-turbopack-react-component-annotation
Mar 4, 2026
Merged

feat(nextjs): Add experimental support for react component annotation in Turbopack#19604
chargome merged 5 commits intodevelopfrom
cg/JS-1709/nextjs-turbopack-react-component-annotation

Conversation

@chargome
Copy link
Member

@chargome chargome commented Mar 3, 2026

Adds a Turbopack loader that annotates React components with data-sentry-component, data-sentry-element, and data-sentry-source-file attributes at build time. This enables searching Replays by component name, seeing component names in breadcrumbs, and performance monitoring — previously only available with webpack builds.

  • Adds componentAnnotationLoader that reuses createComponentNameAnnotateHooks from @sentry/bundler-plugin-core
  • Registered via constructTurbopackConfig for *.{tsx,jsx} files with condition: { not: 'foreign' } (Next.js 16+ only)
  • Configurable via _experimental.turbopackReactComponentAnnotation in SentryBuildOptions

Usage

  // next.config.ts
  export default withSentryConfig(nextConfig, {
    _experimental: {
      turbopackReactComponentAnnotation: {
        enabled: true,
        ignoredComponents: ['Header', 'Footer'], // optional
      },
    },
  });

closes #19319

@chargome chargome self-assigned this Mar 3, 2026
@linear
Copy link

linear bot commented Mar 3, 2026

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

size-limit report 📦

Path Size % Change Change
@sentry/browser 25.63 kB - -
@sentry/browser - with treeshaking flags 24.13 kB - -
@sentry/browser (incl. Tracing) 42.43 kB +0.01% +2 B 🔺
@sentry/browser (incl. Tracing, Profiling) 47.09 kB - -
@sentry/browser (incl. Tracing, Replay) 81.25 kB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 70.87 kB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 85.95 kB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 98.21 kB - -
@sentry/browser (incl. Feedback) 42.44 kB - -
@sentry/browser (incl. sendFeedback) 30.3 kB +0.01% +1 B 🔺
@sentry/browser (incl. FeedbackAsync) 35.35 kB - -
@sentry/browser (incl. Metrics) 26.8 kB - -
@sentry/browser (incl. Logs) 26.94 kB +0.01% +1 B 🔺
@sentry/browser (incl. Metrics & Logs) 27.61 kB - -
@sentry/react 27.38 kB - -
@sentry/react (incl. Tracing) 44.77 kB - -
@sentry/vue 30.08 kB - -
@sentry/vue (incl. Tracing) 44.3 kB - -
@sentry/svelte 25.66 kB - -
CDN Bundle 28.17 kB +0.01% +1 B 🔺
CDN Bundle (incl. Tracing) 43.26 kB - -
CDN Bundle (incl. Logs, Metrics) 29.01 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) 44.1 kB +0.01% +1 B 🔺
CDN Bundle (incl. Replay, Logs, Metrics) 68.09 kB - -
CDN Bundle (incl. Tracing, Replay) 80.14 kB +0.01% +1 B 🔺
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) 81 kB +0.01% +1 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) 85.65 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) 86.53 kB - -
CDN Bundle - uncompressed 82.35 kB - -
CDN Bundle (incl. Tracing) - uncompressed 128.07 kB - -
CDN Bundle (incl. Logs, Metrics) - uncompressed 85.19 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed 130.9 kB - -
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed 208.85 kB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 244.95 kB - -
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed 247.77 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 257.86 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed 260.67 kB - -
@sentry/nextjs (client) 47.18 kB - -
@sentry/sveltekit (client) 42.89 kB - -
@sentry/node-core 52.24 kB +0.02% +9 B 🔺
@sentry/node 174.69 kB +0.01% +4 B 🔺
@sentry/node - without tracing 97.39 kB +0.02% +12 B 🔺
@sentry/aws-serverless 113.19 kB +0.01% +8 B 🔺

View base workflow run

@chargome chargome marked this pull request as ready for review March 3, 2026 13:32
@chargome chargome requested review from a team, Lms24, logaretm and stephanie-anderson and removed request for a team and stephanie-anderson March 3, 2026 13:33
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario Requests/s % of Baseline Prev. Requests/s Change %
GET Baseline 8,843 - 8,833 +0%
GET With Sentry 1,687 19% 1,719 -2%
GET With Sentry (error only) 6,009 68% 6,165 -3%
POST Baseline 1,186 - 1,213 -2%
POST With Sentry 588 50% 596 -1%
POST With Sentry (error only) 1,038 88% 1,079 -4%
MYSQL Baseline 3,169 - 3,325 -5%
MYSQL With Sentry 471 15% 486 -3%
MYSQL With Sentry (error only) 2,615 83% 2,712 -4%

View base workflow run

Copy link
Member

@logaretm logaretm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great!

Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Great that you found a way to bring this back to turbopack!

Had a concern about how we annotate but this shouldn't hold us back from shipping the experimental option.


const callback = this.async() ?? this.callback;

const hooks = createComponentNameAnnotateHooks(ignoredComponents, false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q: I guess with loaders we can only use the component-based plugin and have to set injectIntoHtml to false, correct?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could actually use both but went with the lower html impact – safer default imo

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah fine for now I think

@chargome chargome merged commit 29bf97e into develop Mar 4, 2026
224 checks passed
@chargome chargome deleted the cg/JS-1709/nextjs-turbopack-react-component-annotation branch March 4, 2026 09:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Next.js + Turbopack: React Component Annotation

3 participants