Skip to content

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

Merged
chargome merged 5 commits into
developfrom
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 into
developfrom
cg/JS-1709/nextjs-turbopack-react-component-annotation

Conversation

@chargome

Copy link
Copy Markdown
Member

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.tsexportdefaultwithSentryConfig(nextConfig,{_experimental: {turbopackReactComponentAnnotation: {enabled: true,ignoredComponents: ['Header','Footer'],// optional},},});

closes#19319

@chargomechargome self-assigned this Mar 3, 2026
@linear

linearBot commented Mar 3, 2026

Copy link
Copy Markdown

@github-actions

github-actionsBot commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize% ChangeChange
@sentry/browser25.63 kB--
@sentry/browser - with treeshaking flags24.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 flags70.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/react27.38 kB--
@sentry/react (incl. Tracing)44.77 kB--
@sentry/vue30.08 kB--
@sentry/vue (incl. Tracing)44.3 kB--
@sentry/svelte25.66 kB--
CDN Bundle28.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 - uncompressed82.35 kB--
CDN Bundle (incl. Tracing) - uncompressed128.07 kB--
CDN Bundle (incl. Logs, Metrics) - uncompressed85.19 kB--
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed130.9 kB--
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed208.85 kB--
CDN Bundle (incl. Tracing, Replay) - uncompressed244.95 kB--
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed247.77 kB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed257.86 kB--
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed260.67 kB--
@sentry/nextjs (client)47.18 kB--
@sentry/sveltekit (client)42.89 kB--
@sentry/node-core52.24 kB+0.02%+9 B 🔺
@sentry/node174.69 kB+0.01%+4 B 🔺
@sentry/node - without tracing97.39 kB+0.02%+12 B 🔺
@sentry/aws-serverless113.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-andersonMarch 3, 2026 13:33

@cursorcursorBot left a comment

Copy link
Copy Markdown

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
Copy Markdown
Contributor

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.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline8,843-8,833+0%
GET With Sentry1,68719%1,719-2%
GET With Sentry (error only)6,00968%6,165-3%
POST Baseline1,186-1,213-2%
POST With Sentry58850%596-1%
POST With Sentry (error only)1,03888%1,079-4%
MYSQL Baseline3,169-3,325-5%
MYSQL With Sentry47115%486-3%
MYSQL With Sentry (error only)2,61583%2,712-4%

View base workflow run

@logaretmlogaretm left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is great!

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

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
Copy Markdown
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
Copy Markdown
MemberAuthor

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
Copy Markdown
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 developMar 4, 2026
224 checks passed
@chargome
chargome deleted the cg/JS-1709/nextjs-turbopack-react-component-annotation branch March 4, 2026 09:25
chargome added a commit to getsentry/sentry-docs that referenced this pull request Mar 13, 2026
Documents two new experimental Turbopack options for Next.js in
withSentryConfig:
- `_experimental.turbopackReactComponentAnnotation` —
[getsentry/sentry-javascript#19604](getsentry/sentry-javascript#19604)
- `_experimental.turbopackApplicationKey` —
[getsentry/sentry-javascript#19542](getsentry/sentry-javascript#19542)
Sign up for freeto 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

@chargome@logaretm@Lms24