test(browser): Add async span example test (#11080)

For showing current behavior with using differently timed async spans in
browser
ref #10986
ref #10944

Author: s1gr1d

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/async-spans/init.js

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

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/async-spans/subject.js

@@ -0,0 +1,30 @@
+import { getActiveSpan, spanToJSON, startSpan } from '@sentry/browser';
+
+const waitForSeconds = seconds => new Promise(res => setTimeout(res, seconds * 1000));
+
+startSpan({ name: 'span 1' }, async () => {
+  await waitForSeconds(1);
+  window.firstWaitingSpan = spanToJSON(getActiveSpan());
+});
+
+startSpan({ name: 'span 2' }, async () => {
+  await waitForSeconds(2);
+  window.secondWaitingSpan = spanToJSON(getActiveSpan());
+});
+
+startSpan({ name: 'span 3' }, async () => {
+  await waitForSeconds(0.5);
+  window.thirdWaitingSpan = spanToJSON(getActiveSpan());
+});
+
+/**
+ * This is what happens here:
+ * 1. span 1 starts
+ * 2. span 2 starts
+ * 3. span 3 starts (span 3 is active now)
+ * 4. waiting time in span 3 is over and 'span 3' is stored in variable
+ * 5. span 3 ends (2 is active now)
+ * 6. waiting time in span 1 is over and 'span 2' is stored in variable
+ * 7. span 2 ends (1 is active now)
+ * 8. waiting time in span 2 is over and 'span 1' is stored in variable
+ */

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/async-spans/test.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+type WindowWithSpan = Window & {
+  firstWaitingSpan: any;
+  secondWaitingSpan: any;
+  thirdWaitingSpan: any;
+};
+
+sentryTest(
+  'async spans with different durations lead to unexpected behavior in browser (no "asynchronous context tracking")',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    await page.goto(url);
+
+    const envelope = await getFirstSentryEnvelopeRequest<Event>(page);
+    expect(envelope).toBeDefined();
+
+    const firstWaitingSpanValue = await page.evaluate(
+      () => (window as unknown as WindowWithSpan).firstWaitingSpan.description,
+    );
+    const secondWaitingSpanName = await page.evaluate(
+      () => (window as unknown as WindowWithSpan).secondWaitingSpan.description,
+    );
+    const thirdWaitingSpanName = await page.evaluate(
+      () => (window as unknown as WindowWithSpan).thirdWaitingSpan.description,
+    );
+
+    expect(firstWaitingSpanValue).toBe('span 2');
+    expect(secondWaitingSpanName).toBe('span 1');
+    expect(thirdWaitingSpanName).toBe('span 3');
+  },
+);