implement

Author: nicohrubec

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/low-quality-filter.server.test.ts

@@ -0,0 +1,29 @@
+import { test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import { APP_NAME } from '../constants';
+
+test.describe('low-quality transaction filter', () => {
+  test('does not send a server transaction for /__manifest? requests', async ({ page }) => {
+    // Positive anchor: the navigation transaction we know the framework emits
+    const navigationPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return (
+        transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
+      );
+    });
+
+    // Negative: throw if a server txn for /__manifest? sneaks through
+    waitForTransaction(APP_NAME, async evt => {
+      if (evt.transaction?.match(/GET \/__manifest\?/)) {
+        throw new Error('Filtered manifest server transaction should not be sent');
+      }
+      return false;
+    });
+
+    await page.goto('/performance'); // pageload
+    await page.waitForTimeout(1000);
+    await page.getByRole('link', { name: 'SSR Page' }).click(); // navigation → fetches /__manifest?
+
+    await navigationPromise;
+    await page.waitForTimeout(1000); // give late server txns a chance to flush
+  });
+});

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

@@ -10,13 +10,15 @@ import { reactRouterServerIntegration } from './integration/reactRouterServer';
  * @param options The options for the SDK.
  */
 export function getDefaultReactRouterServerIntegrations(options: NodeOptions): Integration[] {
-  return [
-    ...getNodeDefaultIntegrations(options),
-    reactRouterServerIntegration(),
-  ];
+  return [...getNodeDefaultIntegrations(options), reactRouterServerIntegration()];
 }
 
-const LOW_QUALITY_TRANSACTIONS_REGEXES = [/GET \/node_modules\//, /GET \/favicon\.ico/, /GET \/@id\//, /GET \/__manifest\?/];
+const LOW_QUALITY_TRANSACTIONS_REGEXES = [
+  /GET \/node_modules\//,
+  /GET \/favicon\.ico/,
+  /GET \/@id\//,
+  /GET \/__manifest\?/,
+];
 
 /**
  * Initializes the server side of the React Router SDK
@@ -27,10 +29,7 @@ export function init(options: NodeOptions): NodeClient | undefined {
     defaultIntegrations: getDefaultReactRouterServerIntegrations(options),
   };
 
-  opts.ignoreSpans = [
-    ...(opts.ignoreSpans || []),
-    ...LOW_QUALITY_TRANSACTIONS_REGEXES,
-  ];
+  opts.ignoreSpans = [...(opts.ignoreSpans || []), ...LOW_QUALITY_TRANSACTIONS_REGEXES];
 
   DEBUG_BUILD && debug.log('Initializing SDK...');
 

packages/react-router/test/server/lowQualityTransactionsFilterIntegration.test.ts

@@ -3,7 +3,6 @@ import type { NodeClient } from '@sentry/node';
 import * as SentryNode from '@sentry/node';
 import { SDK_VERSION } from '@sentry/node';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import * as LowQualityModule from '../../src/server/integration/lowQualityTransactionsFilterIntegration';
 import { init as reactRouterInit } from '../../src/server/sdk';
 
 const nodeInit = vi.spyOn(SentryNode, 'init');
@@ -48,28 +47,29 @@ describe('React Router server SDK', () => {
       expect(client).not.toBeUndefined();
     });
 
-    it('adds the low quality transactions filter integration by default', () => {
-      const filterSpy = vi.spyOn(LowQualityModule, 'lowQualityTransactionsFilterIntegration');
-
-      reactRouterInit({
-        dsn: 'https://public@dsn.ingest.sentry.io/1337',
-      });
-
-      expect(filterSpy).toHaveBeenCalled();
-
-      expect(nodeInit).toHaveBeenCalledTimes(1);
-      const initOptions = nodeInit.mock.calls[0]?.[0];
+    it('configures ignoreSpans to drop low-quality transactions', () => {
+      reactRouterInit({});
 
-      expect(initOptions).toBeDefined();
+      expect(nodeInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([
+            /GET \/node_modules\//,
+            /GET \/favicon\.ico/,
+            /GET \/@id\//,
+            /GET \/__manifest\?/,
+          ]),
+        }),
+      );
+    });
 
-      const defaultIntegrations = initOptions?.defaultIntegrations as Integration[];
-      expect(Array.isArray(defaultIntegrations)).toBe(true);
+    it('preserves user-provided ignoreSpans entries', () => {
+      reactRouterInit({ ignoreSpans: [/keep-me/] });
 
-      const filterIntegration = defaultIntegrations.find(
-        integration => integration.name === 'LowQualityTransactionsFilter',
+      expect(nodeInit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ignoreSpans: expect.arrayContaining([/keep-me/]),
+        }),
       );
-
-      expect(filterIntegration).toBeDefined();
     });
 
     it('adds reactRouterServer integration by default', () => {