From 4b682c9480f7e3e3a849cb60ec26193815094527 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Sun, 24 May 2026 11:19:57 +0200 Subject: [PATCH 1/5] feat(tanstackstart-react): Add reactComponentAnnotation support Passes the `reactComponentAnnotation` option through to `sentryVitePlugin`, enabling `data-sentry-component` and `data-sentry-source-file` attributes on React components at build time. Fixes #18288 Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/vite/sentryTanstackStart.ts | 12 ++++++++++++ packages/tanstackstart-react/src/vite/sourceMaps.ts | 9 ++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts index 75e9963c0387..168e30aa5be3 100644 --- a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts +++ b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts @@ -22,6 +22,18 @@ export interface SentryTanstackStartOptions extends BuildTimeOptionsBase { */ autoInstrumentMiddleware?: boolean; + /** + * Options for automatic React component name annotation. + * + * When enabled, the Sentry Vite plugin adds `data-sentry-component`, `data-sentry-element`, + * and `data-sentry-source-file` attributes to JSX elements during build. This improves + * readability of component names in Session Replay, breadcrumbs, and performance monitoring. + */ + reactComponentAnnotation?: { + enabled?: boolean; + ignoredComponents?: string[]; + }; + /** * Configures a framework-managed same-origin tunnel route for Sentry envelopes. * diff --git a/packages/tanstackstart-react/src/vite/sourceMaps.ts b/packages/tanstackstart-react/src/vite/sourceMaps.ts index 38c4e8750bd6..d86e49ab58d0 100644 --- a/packages/tanstackstart-react/src/vite/sourceMaps.ts +++ b/packages/tanstackstart-react/src/vite/sourceMaps.ts @@ -7,7 +7,9 @@ type FilesToDeleteAfterUpload = string | string[] | undefined; /** * A Sentry plugin for adding the @sentry/vite-plugin to automatically upload source maps to Sentry. */ -export function makeAddSentryVitePlugin(options: BuildTimeOptionsBase): Plugin[] { +export function makeAddSentryVitePlugin( + options: BuildTimeOptionsBase & { reactComponentAnnotation?: { enabled?: boolean; ignoredComponents?: string[] } }, +): Plugin[] { const { applicationKey, authToken, @@ -22,6 +24,7 @@ export function makeAddSentryVitePlugin(options: BuildTimeOptionsBase): Plugin[] silent, sourcemaps, telemetry, + reactComponentAnnotation, } = options; // defer resolving the filesToDeleteAfterUpload until we got access to the Vite config @@ -72,6 +75,10 @@ export function makeAddSentryVitePlugin(options: BuildTimeOptionsBase): Plugin[] rewriteSources: (sourcemaps as unknown as { rewriteSources?: unknown } | undefined)?.rewriteSources as never, filesToDeleteAfterUpload: filesToDeleteAfterUploadPromise, }, + reactComponentAnnotation: { + enabled: reactComponentAnnotation?.enabled ?? undefined, + ignoredComponents: reactComponentAnnotation?.ignoredComponents ?? undefined, + }, telemetry: telemetry ?? true, url: sentryUrl, _metaOptions: { From 5fe82f9999ed36b4ddfc70f06099e83e8a115e00 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Sun, 24 May 2026 11:28:50 +0200 Subject: [PATCH 2/5] test: Add unit tests for reactComponentAnnotation passthrough Co-Authored-By: Claude Opus 4.6 (1M context) --- .../test/vite/sourceMaps.test.ts | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/tanstackstart-react/test/vite/sourceMaps.test.ts b/packages/tanstackstart-react/test/vite/sourceMaps.test.ts index 672a94892a58..74dd086878c2 100644 --- a/packages/tanstackstart-react/test/vite/sourceMaps.test.ts +++ b/packages/tanstackstart-react/test/vite/sourceMaps.test.ts @@ -242,6 +242,37 @@ describe('makeAddSentryVitePlugin()', () => { }), ); }); + + it('passes reactComponentAnnotation options to the vite plugin', () => { + makeAddSentryVitePlugin({ + reactComponentAnnotation: { + enabled: true, + ignoredComponents: ['MyIgnoredComponent'], + }, + }); + + expect(sentryVitePluginSpy).toHaveBeenCalledWith( + expect.objectContaining({ + reactComponentAnnotation: { + enabled: true, + ignoredComponents: ['MyIgnoredComponent'], + }, + }), + ); + }); + + it('passes undefined reactComponentAnnotation values when not configured', () => { + makeAddSentryVitePlugin({}); + + expect(sentryVitePluginSpy).toHaveBeenCalledWith( + expect.objectContaining({ + reactComponentAnnotation: { + enabled: undefined, + ignoredComponents: undefined, + }, + }), + ); + }); }); describe('getUpdatedSourceMapSettings', () => { From 37a1dd2fd28b42ec14c79dcb9a71706a62a7604b Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Sun, 24 May 2026 11:30:48 +0200 Subject: [PATCH 3/5] ref: Use SentryTanstackStartOptions type instead of inline type intersection Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/tanstackstart-react/src/vite/sourceMaps.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tanstackstart-react/src/vite/sourceMaps.ts b/packages/tanstackstart-react/src/vite/sourceMaps.ts index d86e49ab58d0..ccfecdcee331 100644 --- a/packages/tanstackstart-react/src/vite/sourceMaps.ts +++ b/packages/tanstackstart-react/src/vite/sourceMaps.ts @@ -1,15 +1,14 @@ import type { BuildTimeOptionsBase } from '@sentry/core'; import { sentryVitePlugin } from '@sentry/vite-plugin'; import type { Plugin, UserConfig } from 'vite'; +import type { SentryTanstackStartOptions } from './sentryTanstackStart'; type FilesToDeleteAfterUpload = string | string[] | undefined; /** * A Sentry plugin for adding the @sentry/vite-plugin to automatically upload source maps to Sentry. */ -export function makeAddSentryVitePlugin( - options: BuildTimeOptionsBase & { reactComponentAnnotation?: { enabled?: boolean; ignoredComponents?: string[] } }, -): Plugin[] { +export function makeAddSentryVitePlugin(options: SentryTanstackStartOptions): Plugin[] { const { applicationKey, authToken, From 5d4610312b73bddbd78ca76d5979f51ab29c33d4 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Sun, 24 May 2026 11:34:02 +0200 Subject: [PATCH 4/5] ref: Use SentryTanstackStartOptions consistently across sourceMaps.ts Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/tanstackstart-react/src/vite/sourceMaps.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tanstackstart-react/src/vite/sourceMaps.ts b/packages/tanstackstart-react/src/vite/sourceMaps.ts index ccfecdcee331..7842789081a2 100644 --- a/packages/tanstackstart-react/src/vite/sourceMaps.ts +++ b/packages/tanstackstart-react/src/vite/sourceMaps.ts @@ -1,4 +1,3 @@ -import type { BuildTimeOptionsBase } from '@sentry/core'; import { sentryVitePlugin } from '@sentry/vite-plugin'; import type { Plugin, UserConfig } from 'vite'; import type { SentryTanstackStartOptions } from './sentryTanstackStart'; @@ -93,7 +92,7 @@ export function makeAddSentryVitePlugin(options: SentryTanstackStartOptions): Pl /** * A Sentry plugin for TanStack Start React to enable "hidden" source maps if they are unset. */ -export function makeEnableSourceMapsVitePlugin(options: BuildTimeOptionsBase): Plugin[] { +export function makeEnableSourceMapsVitePlugin(options: SentryTanstackStartOptions): Plugin[] { return [ { name: 'sentry-tanstackstart-react-source-maps', @@ -129,7 +128,7 @@ export function makeEnableSourceMapsVitePlugin(options: BuildTimeOptionsBase): P */ export function getUpdatedSourceMapSettings( viteConfig: UserConfig, - sentryPluginOptions?: BuildTimeOptionsBase, + sentryPluginOptions?: SentryTanstackStartOptions, ): boolean | 'inline' | 'hidden' { viteConfig.build = viteConfig.build || {}; From ba3b0c07dc095a3ab92e0868b387358e9ec3c26a Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Sun, 24 May 2026 11:38:10 +0200 Subject: [PATCH 5/5] fix: Match reactComponentAnnotation JSDoc with React Router Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/vite/sentryTanstackStart.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts index 168e30aa5be3..5682b67050ae 100644 --- a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts +++ b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts @@ -23,14 +23,21 @@ export interface SentryTanstackStartOptions extends BuildTimeOptionsBase { autoInstrumentMiddleware?: boolean; /** - * Options for automatic React component name annotation. - * - * When enabled, the Sentry Vite plugin adds `data-sentry-component`, `data-sentry-element`, - * and `data-sentry-source-file` attributes to JSX elements during build. This improves - * readability of component names in Session Replay, breadcrumbs, and performance monitoring. + * Options related to react component name annotations. + * Disabled by default, unless a value is set for this option. + * When enabled, your app's DOM will automatically be annotated during build-time with their respective component names. + * This will unlock the capability to search for Replays in Sentry by component name, as well as see component names in breadcrumbs and performance monitoring. + * Please note that this feature is not currently supported by the esbuild bundler plugins, and will only annotate React components */ reactComponentAnnotation?: { + /** + * Whether the component name annotate plugin should be enabled or not. + */ enabled?: boolean; + + /** + * A list of strings representing the names of components to ignore. The plugin will not apply `data-sentry` annotations on the DOM element for these components. + */ ignoredComponents?: string[]; };