feat(tanstackstart-react): Filter noisy dev transactions (#21145)

Vite dev server requests (`/node_modules/`, `/@id/`, `/@react-refresh`,
`/@tanstack-start/`) and `/favicon.ico` generate noise. Filters them via
`ignoreSpans` in `init()` so this works for both transactions and
streamed spans.

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nicohrubec

packages/tanstackstart-react/src/client/sdk.ts

@@ -18,5 +18,16 @@ export function init(options: ReactBrowserOptions): Client | undefined {
   applyTunnelRouteOption(sentryOptions);
   applySdkMetadata(sentryOptions, 'tanstackstart-react', ['tanstackstart-react', 'react']);
 
+  sentryOptions.ignoreSpans = [
+    ...(sentryOptions.ignoreSpans || []),
+    /\/node_modules\//,
+    /\/favicon\.ico/,
+    /\/@id\//,
+    /\/@react-refresh/,
+    /\/@tanstack-start\//,
+    /\/@fs\//,
+    /\/@vite\//,
+  ];
+
   return initReactSDK(sentryOptions);
 }

packages/tanstackstart-react/src/server/sdk.ts

@@ -13,5 +13,13 @@ export function init(options: NodeOptions): NodeClient | undefined {
 
   applySdkMetadata(sentryOptions, 'tanstackstart-react', ['tanstackstart-react', 'node']);
 
+  sentryOptions.ignoreSpans = [
+    ...(sentryOptions.ignoreSpans || []),
+    /\/node_modules\//,
+    /\/@id\//,
+    /\/@react-refresh/,
+    /\/@vite\//,
+  ];
+
   return initNodeSdk(sentryOptions);
 }

packages/tanstackstart-react/test/client/sdk.test.ts

@@ -43,6 +43,37 @@ describe('TanStack Start React Client SDK', () => {
       expect(init({})).not.toBeUndefined();
     });
 
+    it('sets ignoreSpans to filter low-quality spans', () => {
+      init({ dsn: 'https://public@dsn.ingest.sentry.io/1337' });
+
+      expect(reactInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([
+            /\/node_modules\//,
+            /\/favicon\.ico/,
+            /\/@id\//,
+            /\/@react-refresh/,
+            /\/@tanstack-start\//,
+            /\/@fs\//,
+            /\/@vite\//,
+          ]),
+        }),
+      );
+    });
+
+    it('preserves user-defined ignoreSpans', () => {
+      init({
+        dsn: 'https://public@dsn.ingest.sentry.io/1337',
+        ignoreSpans: [/custom-pattern/],
+      });
+
+      expect(reactInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([/custom-pattern/, /\/favicon\.ico/]),
+        }),
+      );
+    });
+
     it('applies the managed tunnel route when no runtime tunnel is provided', () => {
       vi.stubGlobal('__SENTRY_TANSTACKSTART_TUNNEL_ROUTE__', '/managed-tunnel');
 

packages/tanstackstart-react/test/server/sdk.test.ts

@@ -38,5 +38,28 @@ describe('TanStack Start React Server SDK', () => {
     it('returns client from init', () => {
       expect(init({})).not.toBeUndefined();
     });
+
+    it('sets ignoreSpans to filter low-quality transactions', () => {
+      init({ dsn: 'https://public@dsn.ingest.sentry.io/1337' });
+
+      expect(nodeInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([/\/node_modules\//, /\/@id\//, /\/@react-refresh/, /\/@vite\//]),
+        }),
+      );
+    });
+
+    it('preserves user-defined ignoreSpans', () => {
+      init({
+        dsn: 'https://public@dsn.ingest.sentry.io/1337',
+        ignoreSpans: [/custom-pattern/],
+      });
+
+      expect(nodeInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([/custom-pattern/, /\/@vite\//]),
+        }),
+      );
+    });
   });
 });