feat(tracing): Ensure pageload transaction starts at timeOrigin

Author: mydea

packages/browser-integration-tests/suites/tracing/browsertracing/pageload/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 1,
+});

packages/browser-integration-tests/suites/tracing/browsertracing/pageload/test.ts

@@ -12,6 +12,11 @@ sentryTest('should create a pageload transaction', async ({ getLocalTestPath, pa
   const url = await getLocalTestPath({ testDir: __dirname });
 
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const timeOrigin = await page.evaluate<number>('window._testBaseTimestamp');
+
+  const { start_timestamp: startTimestamp } = eventData;
+
+  expect(startTimestamp).toBeCloseTo(timeOrigin);
 
   expect(eventData.contexts?.trace?.op).toBe('pageload');
   expect(eventData.spans?.length).toBeGreaterThan(0);

packages/browser-integration-tests/suites/tracing/browsertracing/pageloadDelayed/init.js

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+setTimeout(() => {
+  window._testTimeoutTimestamp = (performance.timeOrigin + performance.now()) / 1000;
+  Sentry.init({
+    dsn: 'https://[email protected]/1337',
+    integrations: [new Integrations.BrowserTracing()],
+    tracesSampleRate: 1,
+  });
+}, 250);

packages/browser-integration-tests/suites/tracing/browsertracing/pageloadDelayed/test.ts

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should create a pageload transaction when initialized delayed', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  const timeOrigin = await page.evaluate<number>('window._testBaseTimestamp');
+  const timeoutTimestamp = await page.evaluate<number>('window._testTimeoutTimestamp');
+
+  const { start_timestamp: startTimestamp } = eventData;
+
+  expect(startTimestamp).toBeCloseTo(timeOrigin);
+  expect(startTimestamp).toBeLessThan(timeoutTimestamp);
+
+  expect(eventData.contexts?.trace?.op).toBe('pageload');
+  expect(eventData.spans?.length).toBeGreaterThan(0);
+  expect(eventData.transaction_info?.source).toEqual('url');
+});

packages/tracing-internal/src/browser/router.ts

@@ -1,5 +1,5 @@
 import type { Transaction, TransactionContext } from '@sentry/types';
-import { addInstrumentationHandler, logger } from '@sentry/utils';
+import { addInstrumentationHandler, browserPerformanceTimeOrigin, logger } from '@sentry/utils';
 
 import { WINDOW } from './types';
 
@@ -22,6 +22,8 @@ export function instrumentRoutingWithDefaults<T extends Transaction>(
   if (startTransactionOnPageLoad) {
     activeTransaction = customStartTransaction({
       name: WINDOW.location.pathname,
+      // pageload should always start at timeOrigin
+      startTimestamp: browserPerformanceTimeOrigin,
       op: 'pageload',
       metadata: { source: 'url' },
     });