feat(tanstackstart-react): Enable component tracking

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.
    *

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 || {};
 

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', () => {