test(browser): retain static browser tracing counterparts

Co-Authored-By: GPT-6 <codex@openai.com>

Author: msonnb

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-static/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  traceLifecycle: 'static',
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-static/subject.js

@@ -0,0 +1,8 @@
+document.getElementById('go-background').addEventListener('click', () => {
+  setTimeout(() => {
+    Object.defineProperty(document, 'hidden', { value: true, writable: true });
+    const ev = document.createEvent('Event');
+    ev.initEvent('visibilitychange');
+    document.dispatchEvent(ev);
+  }, 250);
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-static/template.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button id="go-background">New Tab</button>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-static/test.ts

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should finish pageload transaction when the page goes background', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+  await page.locator('#go-background').click();
+
+  const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page);
+
+  expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
+  expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
+  expect(pageloadTransaction.contexts?.trace?.data?.['sentry.cancellation_reason']).toBe('document.hidden');
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/http-timings-static/init.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  traceLifecycle: 'static',
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      _experiments: {
+        enableHTTPTimings: true,
+      },
+    }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/http-timings-static/subject.js

@@ -0,0 +1,3 @@
+fetch('http://sentry-test-site.example/0').then(
+  fetch('http://sentry-test-site.example/1').then(fetch('http://sentry-test-site.example/2')),
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/http-timings-static/test.ts

@@ -0,0 +1,59 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('creates fetch spans with http timing', async ({ browserName, getLocalTestUrl, page }) => {
+  const supportedBrowsers = ['chromium', 'firefox'];
+
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
+  await page.route('http://sentry-test-site.example/*', async route => {
+    const request = route.request();
+    const postData = await request.postDataJSON();
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(Object.assign({ id: 1 }, postData)),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const envelopes = await getMultipleSentryEnvelopeRequests<Event>(page, 2, { url, timeout: 10000 });
+  const tracingEvent = envelopes[envelopes.length - 1]; // last envelope contains tracing data on all browsers
+
+  const requestSpans = tracingEvent.spans?.filter(({ op }) => op === 'http.client');
+
+  expect(requestSpans).toHaveLength(3);
+
+  await page.pause();
+  requestSpans?.forEach((span, index) =>
+    expect(span).toMatchObject({
+      description: `GET http://sentry-test-site.example/${index}`,
+      parent_span_id: tracingEvent.contexts?.trace?.span_id,
+      span_id: expect.stringMatching(/[a-f\d]{16}/),
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+      trace_id: tracingEvent.contexts?.trace?.trace_id,
+      data: expect.objectContaining({
+        'http.request.redirect_start': expect.any(Number),
+        'http.request.redirect_end': expect.any(Number),
+        'http.request.worker_start': expect.any(Number),
+        'http.request.fetch_start': expect.any(Number),
+        'http.request.domain_lookup_start': expect.any(Number),
+        'http.request.domain_lookup_end': expect.any(Number),
+        'http.request.connect_start': expect.any(Number),
+        'http.request.secure_connection_start': expect.any(Number),
+        'http.request.connection_end': expect.any(Number),
+        'http.request.request_start': expect.any(Number),
+        'http.request.response_start': expect.any(Number),
+        'http.request.response_end': expect.any(Number),
+        'http.request.time_to_first_byte': expect.any(Number),
+        'network.protocol.version': expect.any(String),
+      }),
+    }),
+  );
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/linked-traces-static/consistent-sampling/default/init.js

@@ -0,0 +1,22 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  traceLifecycle: 'static',
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      linkPreviousTrace: 'in-memory',
+      consistentTraceSampling: true,
+    }),
+  ],
+  tracePropagationTargets: ['sentry-test-external.io'],
+  tracesSampler: ctx => {
+    if (ctx.attributes && ctx.attributes['sentry.origin'] === 'auto.pageload.browser') {
+      return 1;
+    }
+    return ctx.inheritOrSampleWith(0);
+  },
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/linked-traces-static/consistent-sampling/default/subject.js

@@ -0,0 +1,17 @@
+const btn1 = document.getElementById('btn1');
+
+const btn2 = document.getElementById('btn2');
+
+btn1.addEventListener('click', () => {
+  Sentry.startNewTrace(() => {
+    Sentry.startSpan({ name: 'custom root span 1', op: 'custom' }, () => {});
+  });
+});
+
+btn2.addEventListener('click', () => {
+  Sentry.startNewTrace(() => {
+    Sentry.startSpan({ name: 'custom root span 2', op: 'custom' }, async () => {
+      await fetch('http://sentry-test-external.io');
+    });
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/linked-traces-static/consistent-sampling/default/template.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <button id="btn1"></button>
+  <button id="btn2"></button>
+</html>