feat(nextjs): Filter unwanted segments when span streaming is enabled

packages/nextjs/src/client/index.ts

@@ -74,19 +74,17 @@ export function init(options: BrowserOptions): Client | undefined {
   applyTunnelRouteOption(opts);
   applySdkMetadata(opts, 'nextjs', ['nextjs', 'react']);
 
-  const client = reactInit(opts);
-
-  const filterTransactions: EventProcessor = event =>
-    event.type === 'transaction' && event.transaction === '/404' ? null : event;
-  filterTransactions.id = 'NextClient404Filter';
-  addEventProcessor(filterTransactions);
+  opts.ignoreSpans = [
+    ...(opts.ignoreSpans || []),
+    // we filter out segment spans for /404 pages
+    /^\/404$/,
+    // segment spans where we didn't get a reasonable transaction name
+    // in this case, constructing a dynamic RegExp is fine because the variable is a constant
+    // we need to ensure to exact-match, so a string match isn't safe (same for /404 above)
+    new RegExp(`^${INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME}$`),
+  ];
 
-  const filterIncompleteNavigationTransactions: EventProcessor = event =>
-    event.type === 'transaction' && event.transaction === INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME
-      ? null
-      : event;
-  filterIncompleteNavigationTransactions.id = 'IncompleteTransactionFilter';
-  addEventProcessor(filterIncompleteNavigationTransactions);
+  const client = reactInit(opts);
 
   const filterNextRedirectError: EventProcessor = (event, hint) =>
     isRedirectNavigationError(hint?.originalException) || event.exception?.values?.[0]?.value === 'NEXT_REDIRECT'

packages/nextjs/test/clientSdk.test.ts

@@ -1,10 +1,11 @@
 import type { Integration } from '@sentry/core';
-import { debug, getGlobalScope, getIsolationScope } from '@sentry/core';
+import { debug, getGlobalScope, getIsolationScope, SentryNonRecordingSpan } from '@sentry/core';
 import * as SentryReact from '@sentry/react';
 import { getClient, getCurrentScope, WINDOW } from '@sentry/react';
 import { JSDOM } from 'jsdom';
 import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
 import { breadcrumbsIntegration, browserTracingIntegration, init } from '../src/client';
+import { INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME } from '../src/client/routing/appRouterRoutingInstrumentation';
 
 const reactInit = vi.spyOn(SentryReact, 'init');
 const debugLogSpy = vi.spyOn(debug, 'log');
@@ -83,20 +84,68 @@ describe('Client init()', () => {
     );
   });
 
-  it('adds 404 transaction filter', () => {
-    init({
-      dsn: 'https://dogsarebadatkeepingsecrets@squirrelchasers.ingest.sentry.io/12312012',
-      tracesSampleRate: 1.0,
+  describe('transaction filtering', () => {
+    const TEST_DSN_404 = 'https://dogsarebadatkeepingsecrets@squirrelchasers.ingest.sentry.io/12312012';
+
+    it('drops /404 transactions', () => {
+      init({ dsn: TEST_DSN_404, tracesSampleRate: 1.0 });
+      const transportSend = vi.spyOn(getClient()!.getTransport()!, 'send');
+
+      // Ensure we have no current span, so our next span is a transaction
+      SentryReact.withActiveSpan(null, () => {
+        SentryReact.startInactiveSpan({ name: '/404' })?.end();
+      });
+
+      expect(transportSend).not.toHaveBeenCalled();
+      expect(debugLogSpy).toHaveBeenCalledWith(expect.stringContaining('matches `ignoreSpans`'));
     });
-    const transportSend = vi.spyOn(getClient()!.getTransport()!, 'send');
 
-    // Ensure we have no current span, so our next span is a transaction
-    SentryReact.withActiveSpan(null, () => {
-      SentryReact.startInactiveSpan({ name: '/404' })?.end();
+    it('drops incomplete navigation transactions', () => {
+      init({ dsn: TEST_DSN_404, tracesSampleRate: 1.0 });
+      const transportSend = vi.spyOn(getClient()!.getTransport()!, 'send');
+
+      // Ensure we have no current span, so our next span is a transaction
+      SentryReact.withActiveSpan(null, () => {
+        SentryReact.startInactiveSpan({ name: INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME })?.end();
+      });
+
+      expect(transportSend).not.toHaveBeenCalled();
+      expect(debugLogSpy).toHaveBeenCalledWith(expect.stringContaining('matches `ignoreSpans`'));
     });
 
-    expect(transportSend).not.toHaveBeenCalled();
-    expect(debugLogSpy).toHaveBeenCalledWith('An event processor returned `null`, will not send event.');
+    describe('span streaming', () => {
+      it('drops /404 segment spans', () => {
+        init({ dsn: TEST_DSN_404, tracesSampleRate: 1.0, traceLifecycle: 'stream' });
+
+        // Ensure we have no current span, so our next span is a segment span
+        const span = SentryReact.withActiveSpan(null, () => SentryReact.startInactiveSpan({ name: '/404' }));
+
+        expect(span).toBeInstanceOf(SentryNonRecordingSpan);
+        expect(debugLogSpy).toHaveBeenCalledWith(expect.stringContaining('matches `ignoreSpans`'));
+      });
+
+      it('drops incomplete navigation segment spans', () => {
+        init({ dsn: TEST_DSN_404, tracesSampleRate: 1.0, traceLifecycle: 'stream' });
+
+        // Ensure we have no current span, so our next span is a segment span
+        const span = SentryReact.withActiveSpan(null, () =>
+          SentryReact.startInactiveSpan({ name: INCOMPLETE_APP_ROUTER_INSTRUMENTATION_TRANSACTION_NAME }),
+        );
+
+        expect(span).toBeInstanceOf(SentryNonRecordingSpan);
+        expect(debugLogSpy).toHaveBeenCalledWith(expect.stringContaining('matches `ignoreSpans`'));
+      });
+
+      it('drops /404 non-segment spans', () => {
+        init({ dsn: TEST_DSN_404, tracesSampleRate: 1.0, traceLifecycle: 'stream' });
+
+        SentryReact.startSpan({ name: 'parent' }, parent => {
+          expect(parent).not.toBeInstanceOf(SentryNonRecordingSpan);
+          const child = SentryReact.startInactiveSpan({ name: '/404' });
+          expect(child).toBeInstanceOf(SentryNonRecordingSpan);
+        });
+      });
+    });
   });
 
   describe('integrations', () => {