feat(react-router): Create low quality transactions filter for react router

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

@@ -1,4 +1,4 @@
-import { applySdkMetadata, logger, setTag } from '@sentry/core';
+import { type EventProcessor, applySdkMetadata, getGlobalScope, logger, setTag } from '@sentry/core';
 import type { NodeClient, NodeOptions } from '@sentry/node';
 import { init as initNodeSdk } from '@sentry/node';
 import { DEBUG_BUILD } from '../common/debug-build';
@@ -20,5 +20,34 @@ export function init(options: NodeOptions): NodeClient | undefined {
   setTag('runtime', 'node');
 
   DEBUG_BUILD && logger.log('SDK successfully initialized');
+
+  getGlobalScope().addEventProcessor(lowQualityTransactionsFilter(options));
+
   return client;
 }
+
+const matchedRegexes = [/GET \/node_modules\//, /GET \/favicon\.ico/, /GET \/@id\//];
+
+/**
+ * Filters out noisy transactions such as requests to node_modules, favicon.ico, @id/
+ *
+ * @param options The NodeOptions passed to the SDK
+ * @returns An EventProcessor that filters low-quality transactions
+ */
+export function lowQualityTransactionsFilter(options: NodeOptions): EventProcessor {
+  return Object.assign(
+    (event => {
+      if (event.type !== 'transaction' || !event.transaction) {
+        return event;
+      }
+
+      if (matchedRegexes.some(regex => event.transaction?.match(regex))) {
+        options.debug && logger.log('[ReactRouter] Filtered node_modules transaction:', event.transaction);
+        return null;
+      }
+
+      return event;
+    }) satisfies EventProcessor,
+    { id: 'ReactRouterLowQualityTransactionsFilter' },
+  );
+}

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

@@ -1,7 +1,10 @@
+import type { Event, EventType } from '@sentry/core';
+import { getGlobalScope } from '@sentry/core';
+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 { init as reactRouterInit } from '../../src/server/sdk';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { init as reactRouterInit, lowQualityTransactionsFilter } from '../../src/server/sdk';
 
 const nodeInit = vi.spyOn(SentryNode, 'init');
 
@@ -39,7 +42,97 @@ describe('React Router server SDK', () => {
     });
 
     it('returns client from init', () => {
-      expect(reactRouterInit({})).not.toBeUndefined();
+      const client = reactRouterInit({
+        dsn: 'https://[email protected]/1337',
+      }) as NodeClient;
+      expect(client).not.toBeUndefined();
+    });
+
+    it('registers the low quality transactions filter', async () => {
+      const addEventProcessor = vi.spyOn(getGlobalScope(), 'addEventProcessor');
+      addEventProcessor.mockClear();
+
+      reactRouterInit({
+        dsn: 'https://[email protected]/1337',
+      }) as NodeClient;
+
+      expect(addEventProcessor).toHaveBeenCalledTimes(1);
+      const processor = addEventProcessor.mock.calls[0]![0];
+      expect(processor?.id).toEqual('ReactRouterLowQualityTransactionsFilter');
+    });
+
+    describe('transaction filtering', () => {
+      const beforeSendEvent = vi.fn(event => event);
+      let client: NodeClient;
+
+      beforeEach(() => {
+        vi.clearAllMocks();
+        beforeSendEvent.mockClear();
+        SentryNode.getGlobalScope().clear();
+
+        client = reactRouterInit({
+          dsn: 'https://[email protected]/1337',
+        }) as NodeClient;
+
+        client.on('beforeSendEvent', beforeSendEvent);
+      });
+
+      describe('filters out low quality transactions', () => {
+        it.each(['GET /node_modules/react/index.js', 'GET /favicon.ico', 'GET /@id/package'])(
+          '%s',
+          async transaction => {
+            client.captureEvent({ type: 'transaction', transaction });
+
+            await client.flush();
+
+            expect(beforeSendEvent).not.toHaveBeenCalled();
+          },
+        );
+      });
+
+      describe('allows high quality transactions', () => {
+        it.each(['GET /', 'GET /users', 'POST /api/data', 'GET /projects/123'])('%s', async transaction => {
+          client.captureEvent({ type: 'transaction', transaction });
+
+          await client.flush();
+
+          expect(beforeSendEvent).toHaveBeenCalledWith(expect.objectContaining({ transaction }), expect.any(Object));
+        });
+      });
+    });
+  });
+
+  describe('lowQualityTransactionsFilter', () => {
+    describe('filters out low quality transactions', () => {
+      it.each([
+        ['node_modules request', 'GET /node_modules/react/index.js'],
+        ['favicon.ico request', 'GET /favicon.ico'],
+        ['@id request', 'GET /@id/package'],
+      ])('%s', (description, transaction) => {
+        const filter = lowQualityTransactionsFilter({});
+        const event = {
+          type: 'transaction' as EventType,
+          transaction,
+        } as Event;
+
+        expect(filter(event, {})).toBeNull();
+      });
+    });
+
+    describe('does not filter good transactions', () => {
+      it.each([
+        ['normal page request', 'GET /users'],
+        ['API request', 'POST /api/users'],
+        ['app route', 'GET /projects/123'],
+      ])('%s', (description, transaction) => {
+        const filter = lowQualityTransactionsFilter({});
+        const event = {
+          type: 'transaction' as EventType,
+          transaction,
+        } as Event;
+
+        expect(filter(event, {})).toBe(event);
+      });
     });
   });
 });