move to ignore spans

Author: chargome

packages/browser/src/integrations/spotlight.ts

@@ -1,4 +1,4 @@
-import type { Client, Envelope, Event, IntegrationFn } from '@sentry/core';
+import type { Client, Envelope, IntegrationFn } from '@sentry/core';
 import { debug, defineIntegration, serializeEnvelope } from '@sentry/core';
 import { getNativeImplementation } from '@sentry-internal/browser-utils';
 import { DEBUG_BUILD } from '../debug-build';
@@ -14,6 +14,8 @@ export type SpotlightConnectionOptions = {
 
 export const INTEGRATION_NAME = 'SpotlightBrowser';
 
+export const SPOTLIGHT_IGNORE_SPANS = [{ op: 'ui.interaction.click', name: '#sentry-spotlight' }];
+
 const _spotlightIntegration = ((options: Partial<SpotlightConnectionOptions> = {}) => {
   const sidecarUrl = options.sidecarUrl || 'http://localhost:8969/stream';
 
@@ -22,10 +24,10 @@ const _spotlightIntegration = ((options: Partial<SpotlightConnectionOptions> = {
     setup: () => {
       DEBUG_BUILD && debug.log('Using Sidecar URL', sidecarUrl);
     },
-    // We don't want to send interaction transactions/root spans created from
-    // clicks within Spotlight to Sentry. Neither do we want them to be sent to
-    // spotlight.
-    processEvent: event => (isSpotlightInteraction(event) ? null : event),
+    beforeSetup(client: Client) {
+      const opts = client.getOptions();
+      opts.ignoreSpans = [...(opts.ignoreSpans || []), ...SPOTLIGHT_IGNORE_SPANS];
+    },
     afterAllSetup: (client: Client) => {
       setupSidecarForwarding(client, sidecarUrl);
     },
@@ -73,16 +75,3 @@ function setupSidecarForwarding(client: Client, sidecarUrl: string): void {
  * Learn more about spotlight at https://spotlightjs.com
  */
 export const spotlightBrowserIntegration = defineIntegration(_spotlightIntegration);
-
-/**
- * Flags if the event is a transaction created from an interaction with the spotlight UI.
- */
-export function isSpotlightInteraction(event: Event): boolean {
-  return Boolean(
-    event.type === 'transaction' &&
-    event.spans &&
-    event.contexts?.trace &&
-    event.contexts.trace.op === 'ui.action.click' &&
-    event.spans.some(({ description }) => description?.includes('#sentry-spotlight')),
-  );
-}

packages/browser/test/integrations/spotlight.test.ts

@@ -0,0 +1,51 @@
+import type { Client, ClientOptions } from '@sentry/core';
+import { shouldIgnoreSpan } from '@sentry/core';
+import { describe, expect, it } from 'vitest';
+import { SPOTLIGHT_IGNORE_SPANS, spotlightBrowserIntegration } from '../../src/integrations/spotlight';
+
+function makeMockClient(initial: Partial<ClientOptions> = {}): Client {
+  const options = { ...initial } as ClientOptions;
+  return { getOptions: () => options } as Client;
+}
+
+function setupIntegrationAndGetIgnoreSpans(initial: Partial<ClientOptions> = {}) {
+  const integration = spotlightBrowserIntegration();
+  const client = makeMockClient(initial);
+  integration.beforeSetup!(client);
+  return client.getOptions().ignoreSpans!;
+}
+
+describe('spotlightBrowserIntegration', () => {
+  it('appends spotlight interaction filters to ignoreSpans', () => {
+    expect(setupIntegrationAndGetIgnoreSpans()).toEqual(SPOTLIGHT_IGNORE_SPANS);
+  });
+
+  it('preserves user-provided ignoreSpans entries', () => {
+    expect(setupIntegrationAndGetIgnoreSpans({ ignoreSpans: [/keep-me/] })).toEqual([
+      /keep-me/,
+      ...SPOTLIGHT_IGNORE_SPANS,
+    ]);
+  });
+
+  describe('drops spotlight interaction spans', () => {
+    it.each([
+      ['click on spotlight overlay', 'body > div#sentry-spotlight > div.overlay'],
+      ['click on spotlight button', 'body > div > div#sentry-spotlight > button.close'],
+      ['click on nested spotlight element', 'html > body > aside#sentry-spotlight'],
+    ])('%s', (_label, name) => {
+      const ignoreSpans = setupIntegrationAndGetIgnoreSpans();
+      expect(shouldIgnoreSpan({ description: name, op: 'ui.interaction.click' }, ignoreSpans)).toBe(true);
+    });
+  });
+
+  describe('keeps non-spotlight interaction spans', () => {
+    it.each([
+      ['regular click', 'body > div.main > button.submit', 'ui.interaction.click'],
+      ['regular ui action', '/dashboard', 'ui.action.click'],
+      ['non-interaction span', 'GET /api/data', 'http.client'],
+    ])('%s', (_label, name, op) => {
+      const ignoreSpans = setupIntegrationAndGetIgnoreSpans();
+      expect(shouldIgnoreSpan({ description: name, op }, ignoreSpans)).toBe(false);
+    });
+  });
+});