test(browser): Add test for current DSC transaction name updating beh…

…avior (#13953)

Add a browser integration test that describes the current
behaviour of how we update the `transaction` field in the DSC which is
propagated via the `baggage` header and added to envelopes as the
`trace` header.

dev-packages/browser-integration-tests/suites/tracing/dsc-txn-name-update/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration({ instrumentNavigation: false, instrumentPageLoad: false })],
+  tracesSampleRate: 1,
+  tracePropagationTargets: ['example.com'],
+  release: '1.1.1',
+});

dev-packages/browser-integration-tests/suites/tracing/dsc-txn-name-update/subject.js

@@ -0,0 +1,34 @@
+const btnStartSpan = document.getElementById('btnStartSpan');
+const btnUpdateName = document.getElementById('btnUpdateName');
+const btnMakeRequest = document.getElementById('btnMakeRequest');
+const btnCaptureError = document.getElementById('btnCaptureError');
+const btnEndSpan = document.getElementById('btnEndSpan');
+
+btnStartSpan.addEventListener('click', () => {
+  Sentry.startSpanManual(
+    { name: 'test-root-span', attributes: { [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url' } },
+    async span => {
+      window.__traceId = span.spanContext().traceId;
+      await new Promise(resolve => {
+        btnEndSpan.addEventListener('click', resolve);
+      });
+      span.end();
+    },
+  );
+});
+
+let updateCnt = 0;
+btnUpdateName.addEventListener('click', () => {
+  const span = Sentry.getActiveSpan();
+  const rootSpan = Sentry.getRootSpan(span);
+  rootSpan.updateName(`updated-root-span-${++updateCnt}`);
+  rootSpan.setAttribute(Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+});
+
+btnMakeRequest.addEventListener('click', () => {
+  fetch('https://example.com/api');
+});
+
+btnCaptureError.addEventListener('click', () => {
+  Sentry.captureException(new Error('test-error'));
+});

dev-packages/browser-integration-tests/suites/tracing/dsc-txn-name-update/template.html

@@ -0,0 +1,5 @@
+<button id="btnStartSpan">Start Span</button>
+<button id="btnUpdateName">Update Name</button>
+<button id="btnMakeRequest">Make Request</button>
+<button id="btnCaptureError">Capture Error</button>
+<button id="btnEndSpan">End Span</button>

dev-packages/browser-integration-tests/suites/tracing/dsc-txn-name-update/test.ts

@@ -0,0 +1,185 @@
+import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import type { DynamicSamplingContext } from '@sentry/types';
+import { sentryTest } from '../../../utils/fixtures';
+import type { EventAndTraceHeader } from '../../../utils/helpers';
+import {
+  eventAndTraceHeaderRequestParser,
+  getMultipleSentryEnvelopeRequests,
+  shouldSkipTracingTest,
+} from '../../../utils/helpers';
+
+sentryTest('updates the DSC when the txn name is updated and high-quality', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  /*
+  Test Steps:
+  1. Start new span with LQ txn name (source: url)
+  2. Make request and check that baggage has no transaction name
+  3. Capture error and check that envelope trace header has no transaction name
+  4. Update span name and source to HQ (source: route)
+  5. Make request and check that baggage has HQ txn name
+  6. Capture error and check that envelope trace header has HQ txn name
+  7. Update span name again with HQ name (source: route)
+  8. Make request and check that baggage has updated HQ txn name
+  9. Capture error and check that envelope trace header has updated HQ txn name
+  10. End span and check that envelope trace header has updated HQ txn name
+  11. Make another request and check that there's no span information in baggage
+  12. Capture an error and check that envelope trace header has no span information
+  */
+
+  // 1
+  await page.locator('#btnStartSpan').click();
+  const traceId = await page.evaluate(() => {
+    return (window as any).__traceId;
+  });
+
+  expect(traceId).toMatch(/^[0-9a-f]{32}$/);
+
+  // 2
+  const baggageItems = await makeRequestAndGetBaggageItems(page);
+  expect(baggageItems).toEqual([
+    'sentry-environment=production',
+    'sentry-public_key=public',
+    'sentry-release=1.1.1',
+    'sentry-sample_rate=1',
+    'sentry-sampled=true',
+    `sentry-trace_id=${traceId}`,
+  ]);
+
+  // 3
+  const errorEnvelopeTraceHeader = await captureErrorAndGetEnvelopeTraceHeader(page);
+  expect(errorEnvelopeTraceHeader).toEqual({
+    environment: 'production',
+    public_key: 'public',
+    release: '1.1.1',
+    sample_rate: '1',
+    sampled: 'true',
+    trace_id: traceId,
+  });
+
+  // 4
+  await page.locator('#btnUpdateName').click();
+
+  // 5
+  const baggageItemsAfterUpdate = await makeRequestAndGetBaggageItems(page);
+  expect(baggageItemsAfterUpdate).toEqual([
+    'sentry-environment=production',
+    'sentry-public_key=public',
+    'sentry-release=1.1.1',
+    'sentry-sample_rate=1',
+    'sentry-sampled=true',
+    `sentry-trace_id=${traceId}`,
+    'sentry-transaction=updated-root-span-1',
+  ]);
+
+  // 6
+  const errorEnvelopeTraceHeaderAfterUpdate = await captureErrorAndGetEnvelopeTraceHeader(page);
+  expect(errorEnvelopeTraceHeaderAfterUpdate).toEqual({
+    environment: 'production',
+    public_key: 'public',
+    release: '1.1.1',
+    sample_rate: '1',
+    sampled: 'true',
+    trace_id: traceId,
+    transaction: 'updated-root-span-1',
+  });
+
+  // 7
+  await page.locator('#btnUpdateName').click();
+
+  // 8
+  const baggageItemsAfterSecondUpdate = await makeRequestAndGetBaggageItems(page);
+  expect(baggageItemsAfterSecondUpdate).toEqual([
+    'sentry-environment=production',
+    'sentry-public_key=public',
+    'sentry-release=1.1.1',
+    'sentry-sample_rate=1',
+    'sentry-sampled=true',
+    `sentry-trace_id=${traceId}`,
+    'sentry-transaction=updated-root-span-2',
+  ]);
+
+  // 9
+  const errorEnvelopeTraceHeaderAfterSecondUpdate = await captureErrorAndGetEnvelopeTraceHeader(page);
+  expect(errorEnvelopeTraceHeaderAfterSecondUpdate).toEqual({
+    environment: 'production',
+    public_key: 'public',
+    release: '1.1.1',
+    sample_rate: '1',
+    sampled: 'true',
+    trace_id: traceId,
+    transaction: 'updated-root-span-2',
+  });
+
+  // 10
+  const txnEventPromise = getMultipleSentryEnvelopeRequests<EventAndTraceHeader>(
+    page,
+    1,
+    { envelopeType: 'transaction' },
+    eventAndTraceHeaderRequestParser,
+  );
+
+  await page.locator('#btnEndSpan').click();
+
+  const [txnEvent, txnEnvelopeTraceHeader] = (await txnEventPromise)[0];
+  expect(txnEnvelopeTraceHeader).toEqual({
+    environment: 'production',
+    public_key: 'public',
+    release: '1.1.1',
+    sample_rate: '1',
+    sampled: 'true',
+    trace_id: traceId,
+    transaction: 'updated-root-span-2',
+  });
+
+  expect(txnEvent.transaction).toEqual('updated-root-span-2');
+
+  // 11
+  const baggageItemsAfterEnd = await makeRequestAndGetBaggageItems(page);
+  expect(baggageItemsAfterEnd).toEqual([
+    'sentry-environment=production',
+    'sentry-public_key=public',
+    'sentry-release=1.1.1',
+    `sentry-trace_id=${traceId}`,
+  ]);
+
+  // 12
+  const errorEnvelopeTraceHeaderAfterEnd = await captureErrorAndGetEnvelopeTraceHeader(page);
+  expect(errorEnvelopeTraceHeaderAfterEnd).toEqual({
+    environment: 'production',
+    public_key: 'public',
+    release: '1.1.1',
+    trace_id: traceId,
+  });
+});
+
+async function makeRequestAndGetBaggageItems(page: Page): Promise<string[]> {
+  const requestPromise = page.waitForRequest('https://example.com/*');
+  await page.locator('#btnMakeRequest').click();
+  const request = await requestPromise;
+
+  const baggage = await request.headerValue('baggage');
+
+  return baggage?.split(',').sort() ?? [];
+}
+
+async function captureErrorAndGetEnvelopeTraceHeader(page: Page): Promise<DynamicSamplingContext | undefined> {
+  const errorEventPromise = getMultipleSentryEnvelopeRequests<EventAndTraceHeader>(
+    page,
+    1,
+    { envelopeType: 'event' },
+    eventAndTraceHeaderRequestParser,
+  );
+
+  await page.locator('#btnCaptureError').click();
+
+  const [, errorEnvelopeTraceHeader] = (await errorEventPromise)[0];
+  return errorEnvelopeTraceHeader;
+}

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-meta/subject.js

@@ -0,0 +1,16 @@
+const errorBtn = document.getElementById('errorBtn');
+errorBtn.addEventListener('click', () => {
+  throw new Error(`Sentry Test Error ${Math.random()}`);
+});
+
+const fetchBtn = document.getElementById('fetchBtn');
+fetchBtn.addEventListener('click', async () => {
+  await fetch('http://example.com');
+});
+
+const xhrBtn = document.getElementById('xhrBtn');
+xhrBtn.addEventListener('click', () => {
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', 'http://example.com');
+  xhr.send();
+});