diff --git a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts index 75e9963c0387..5682b67050ae 100644 --- a/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts +++ b/packages/tanstackstart-react/src/vite/sentryTanstackStart.ts @@ -22,6 +22,25 @@ export interface SentryTanstackStartOptions extends BuildTimeOptionsBase { */ autoInstrumentMiddleware?: boolean; + /** + * 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[]; + }; + /** * 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..7842789081a2 100644 --- a/packages/tanstackstart-react/src/vite/sourceMaps.ts +++ b/packages/tanstackstart-react/src/vite/sourceMaps.ts @@ -1,13 +1,13 @@ -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): Plugin[] { +export function makeAddSentryVitePlugin(options: SentryTanstackStartOptions): Plugin[] { const { applicationKey, authToken, @@ -22,6 +22,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 +73,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: { @@ -87,7 +92,7 @@ export function makeAddSentryVitePlugin(options: BuildTimeOptionsBase): Plugin[] /** * 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', @@ -123,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 || {}; 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', () => {