ensure standalone spans are filtered out when transaction is active

Author: Lms24

dev-packages/browser-integration-tests/suites/public-api/startSpan/standalone-mixed-transaction/init.js

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  tracesSampleRate: 1.0,
+});

dev-packages/browser-integration-tests/suites/public-api/startSpan/standalone-mixed-transaction/subject.js

@@ -0,0 +1,4 @@
+Sentry.startSpan({ name: 'outer' }, () => {
+  Sentry.startSpan({ name: 'inner' }, () => {});
+  Sentry.startSpan({ name: 'standalone', experimental: { standalone: true } }, () => {});
+});

dev-packages/browser-integration-tests/suites/public-api/startSpan/standalone-mixed-transaction/test.ts

@@ -0,0 +1,125 @@
+import { expect } from '@playwright/test';
+import type { Envelope, Event, EventEnvelope, EventItem, SpanEnvelope, TransactionEvent } from '@sentry/types';
+
+import exp from 'constants';
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getMultipleSentryEnvelopeRequests,
+  properFullEnvelopeRequestParser,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
+
+sentryTest(
+  'sends a transaction and a span envelope if a standalone span is created as a child of an ongoing span tree',
+  async ({ getLocalTestPath, page }) => {
+    page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    const envelopes = await getMultipleSentryEnvelopeRequests<Envelope>(
+      page,
+      2,
+      { url, envelopeType: ['transaction', 'span'] },
+      properFullEnvelopeRequestParser,
+    );
+
+    const spanEnvelope = envelopes.find(envelope => envelope[1][0][0].type === 'span') as SpanEnvelope;
+    const transactionEnvelope = envelopes.find(envelope => envelope[1][0][0].type === 'transaction') as EventEnvelope;
+
+    const spanEnvelopeHeader = spanEnvelope[0];
+    const spanEnvelopeItem = spanEnvelope[1][0][1];
+
+    const transactionEnvelopeHeader = transactionEnvelope[0];
+    const transactionEnvelopeItem = transactionEnvelope[1][0][1] as TransactionEvent;
+
+    const traceId = transactionEnvelopeHeader.trace!.trace_id!;
+    const parentSpanId = transactionEnvelopeItem.contexts?.trace?.span_id;
+
+    expect(traceId).toMatch(/[a-f0-9]{32}/);
+    expect(parentSpanId).toMatch(/[a-f0-9]{16}/);
+
+    // TODO: the span envelope also needs to contain the `trace` header (follow-up PR)
+    expect(spanEnvelopeHeader).toEqual({
+      sent_at: expect.any(String),
+    });
+
+    expect(transactionEnvelopeHeader).toEqual({
+      event_id: expect.any(String),
+      sdk: {
+        name: 'sentry.javascript.browser',
+        version: expect.any(String),
+      },
+      sent_at: expect.any(String),
+      trace: {
+        environment: 'production',
+        public_key: 'public',
+        sample_rate: '1',
+        sampled: 'true',
+        trace_id: traceId,
+        transaction: 'outer',
+      },
+    });
+
+    expect(spanEnvelopeItem).toEqual({
+      data: {
+        'sentry.origin': 'manual',
+      },
+      description: 'standalone',
+      segment_id: spanEnvelopeItem.span_id,
+      is_segment: true,
+      parent_span_id: parentSpanId,
+      origin: 'manual',
+      span_id: expect.stringMatching(/[a-f0-9]{16}/),
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+      trace_id: traceId,
+    });
+
+    expect(transactionEnvelopeItem).toEqual({
+      contexts: {
+        trace: {
+          data: {
+            'sentry.origin': 'manual',
+            'sentry.sample_rate': 1,
+            'sentry.source': 'custom',
+          },
+          origin: 'manual',
+          span_id: parentSpanId,
+          trace_id: traceId,
+        },
+      },
+      environment: 'production',
+      event_id: expect.any(String),
+      platform: 'javascript',
+      request: {
+        headers: expect.any(Object),
+        url: expect.any(String),
+      },
+      sdk: expect.any(Object),
+      spans: [
+        {
+          data: {
+            'sentry.origin': 'manual',
+          },
+          description: 'inner',
+          origin: 'manual',
+          parent_span_id: parentSpanId,
+          span_id: expect.stringMatching(/[a-f0-9]{16}/),
+          start_timestamp: expect.any(Number),
+          timestamp: expect.any(Number),
+          trace_id: traceId,
+        },
+      ],
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+      transaction: 'outer',
+      transaction_info: {
+        source: 'custom',
+      },
+      type: 'transaction',
+    });
+  },
+);

packages/core/src/tracing/sentrySpan.ts

@@ -13,7 +13,7 @@ import type {
   TransactionEvent,
   TransactionSource,
 } from '@sentry/types';
-import { dropUndefinedKeys, logger, timestampInSeconds, uuid4 } from '@sentry/utils';
+import { consoleSandbox, dropUndefinedKeys, logger, timestampInSeconds, uuid4 } from '@sentry/utils';
 import { getClient, getCurrentScope } from '../currentScopes';
 import { DEBUG_BUILD } from '../debug-build';
 
@@ -229,24 +229,55 @@ export class SentrySpan implements Span {
     return this;
   }
 
+  /**
+   * This method should generally not be used,
+   * but for now we need a way to publicly check if the `_isStandaloneSpan` flag is set.
+   * USE THIS WITH CAUTION!
+   * @internal
+   * @hidden
+   * @experimental
+   */
+  public isStandaloneSpan(): boolean {
+    return !!this._isStandaloneSpan;
+  }
+
   /** Emit `spanEnd` when the span is ended. */
   private _onSpanEnded(): void {
     const client = getClient();
     if (client) {
       client.emit('spanEnd', this);
     }
 
-    // If this is not a root span (== segment span) and we don't want to send it standalone, we're done.
-    // otherwise, we send it
-    if (this !== getRootSpan(this)) {
+    // A segment span is basically the root span of a local span tree.
+    // So for now, this is either what we previously refer to as the root span,
+    // or a standalone span.
+    const isSegmentSpan = this._isStandaloneSpan || this === getRootSpan(this);
+    consoleSandbox(() => {
+      console.log('isSegmentSpan', isSegmentSpan);
+    });
+
+    // If this is not a root span (== segment span) and we don't want to send it
+    if (!isSegmentSpan) {
+      consoleSandbox(() => {
+        console.log('early ret');
+      });
       return;
     }
 
+    // if this is a standalone span, we send it immediately
     if (this._isStandaloneSpan) {
+      consoleSandbox(() => {
+        console.log('calling sendSpanEnvelope');
+      });
+
       sendSpanEnvelope(createSpanEnvelope([this]));
       return;
     }
 
+    consoleSandbox(() => {
+      console.log('converting to transaction');
+    });
+
     const transactionEvent = this._convertSpanToTransaction();
     if (transactionEvent) {
       const scope = getCapturedScopesOnSpan(this).scope || getCurrentScope();
@@ -283,10 +314,9 @@ export class SentrySpan implements Span {
       return undefined;
     }
 
-    // The transaction span itself should be filtered out
-    const finishedSpans = getSpanDescendants(this).filter(span => span !== this);
+    // The transaction span itself as well as any potential standalone spans should be filtered out
+    const finishedSpans = getSpanDescendants(this).filter(span => span !== this && !isStandaloneSpan(span));
 
-    // TODO: filter out standalone spans!
     const spans = finishedSpans.map(span => spanToJSON(span)).filter(isFullFinishedSpan);
 
     const source = this._attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] as TransactionSource | undefined;
@@ -337,14 +367,28 @@ function isFullFinishedSpan(input: Partial<SpanJSON>): input is SpanJSON {
   return !!input.start_timestamp && !!input.timestamp && !!input.span_id && !!input.trace_id;
 }
 
+/** `SentrySpan`s can be sent as a standalone span rather than belonging to a transaction */
+function isStandaloneSpan(span: Span): boolean {
+  return span instanceof SentrySpan && span.isStandaloneSpan();
+}
+
 function sendSpanEnvelope(envelope: SpanEnvelope): void {
+  consoleSandbox(() => {
+    console.log('sendSpanEnvelope', envelope);
+  });
   const client = getClient();
   if (!client) {
+    consoleSandbox(() => {
+      console.log('no client');
+    });
     return;
   }
 
   const transport = client.getTransport();
   if (transport) {
+    consoleSandbox(() => {
+      console.log('transport send');
+    });
     transport.send(envelope).then(null, reason => {
       DEBUG_BUILD && logger.error('Error while sending span:', reason);
     });