Update react router sdk tests

Author: RulaKhaled

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

@@ -26,20 +26,27 @@ export function init(options: NodeOptions): NodeClient | undefined {
   return client;
 }
 
+const matchedRegexes = [
+  /GET \/node_modules\//,
+  /GET \/favicon\.ico/,
+  /GET \/@id\//,
+];
+
 /**
- * Filters out noisy transactions such as requests to node_modules
+ * 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 (event.transaction.match(/\/node_modules\//)) {
+      if (matchedRegexes.some(regex => event.transaction?.match(regex))) {
         options.debug &&
           logger.log('[ReactRouter] Filtered node_modules transaction:', event.transaction);
         return null;

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

@@ -1,7 +1,12 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getGlobalScope } from '@sentry/core';
+import type { Event, EventType } from '@sentry/core';
 import * as SentryNode from '@sentry/node';
+import type { NodeClient } 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 { init as reactRouterInit, lowQualityTransactionsFilter } from '../../src/server/sdk';
 
 const nodeInit = vi.spyOn(SentryNode, 'init');
 
@@ -39,7 +44,106 @@ describe('React Router server SDK', () => {
     });
 
     it('returns client from init', () => {
-      expect(reactRouterInit({})).not.toBeUndefined();
+      const client = reactRouterInit({
+        dsn: 'https://public@dsn.ingest.sentry.io/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://public@dsn.ingest.sentry.io/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://public@dsn.ingest.sentry.io/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);
+      });
     });
   });
 });