fix(browser): Default pageload span start time to timeOrigin

Fixes #23469

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Lms24

packages/astro/src/client/browserTracingIntegration.ts

@@ -5,7 +5,6 @@ import {
 } from '@sentry/browser';
 import type { Client, Integration, TransactionSource } from '@sentry/core';
 import {
-  browserPerformanceTimeOrigin,
   debug,
   hasSpanStreamingEnabled,
   PAGELOAD_SPAN_NAME_FALLBACK,
@@ -40,14 +39,10 @@ export function browserTracingIntegration(
 
       if (WINDOW.location) {
         if (options.instrumentPageLoad != false) {
-          const origin = browserPerformanceTimeOrigin();
-
           const { name, source } = getPageloadSpanName(client);
 
           startBrowserTracingPageLoadSpan(client, {
             name,
-            // pageload should always start at timeOrigin (and needs to be in s, not ms)
-            startTime: origin ? origin / 1000 : undefined,
             attributes: {
               [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
               [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.astro',

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -10,7 +10,6 @@ import type {
 } from '@sentry/core/browser';
 import {
   addNonEnumerableProperty,
-  browserPerformanceTimeOrigin,
   consoleSandbox,
   dateTimestampInSeconds,
   debug,
@@ -37,6 +36,7 @@ import {
   startInactiveSpan,
   timestampInSeconds,
   TRACING_DEFAULTS,
+  browserPerformanceTimeOrigin,
 } from '@sentry/core/browser';
 import {
   addHistoryInstrumentationHandler,
@@ -636,13 +636,10 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
 
       if (WINDOW.location) {
         if (instrumentPageLoad) {
-          const origin = browserPerformanceTimeOrigin();
           startBrowserTracingPageLoadSpan(client, {
             // With span streaming, span names have to be low cardinality, and there is no route
             // information available here.
             name: hasSpanStreamingEnabled(client) ? PAGELOAD_SPAN_NAME_FALLBACK : WINDOW.location.pathname,
-            // pageload should always start at timeOrigin (and needs to be in s, not ms)
-            startTime: origin ? origin / 1000 : undefined,
             attributes: {
               [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
               [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
@@ -720,12 +717,23 @@ export function startBrowserTracingPageLoadSpan(
   spanOptions: StartSpanOptions,
   traceOptions?: { sentryTrace?: string | undefined; baggage?: string | undefined },
 ): Span | undefined {
-  client.emit('startPageLoadSpan', spanOptions, traceOptions);
-
   // `Pageload` is a low-cardinality span name, not a description of the page. The scope's
   // transaction name is what error events are grouped by, so it keeps the URL instead.
   const isFallbackSpanName = spanOptions.name === PAGELOAD_SPAN_NAME_FALLBACK;
   getCurrentScope().setTransactionName(isFallbackSpanName ? WINDOW.location?.pathname : spanOptions.name);
+  // A pageload span always covers the entire page load, no matter how late the SDK or a routing
+  // instrumentation gets around to starting it. Everything that happened before (DNS, TLS, TTFB,
+  // HTML parsing, chunk loading) is part of the page load and the performance child spans we attach
+  // later are anchored at the time origin anyway.
+  const timeOrigin = browserPerformanceTimeOrigin();
+  const pageloadSpanOptions: StartSpanOptions = {
+    ...spanOptions,
+    // startTime needs to be in seconds, not ms
+    startTime: spanOptions.startTime ?? (timeOrigin ? timeOrigin / 1000 : undefined),
+  };
+
+  client.emit('startPageLoadSpan', pageloadSpanOptions, traceOptions);
+  getCurrentScope().setTransactionName(pageloadSpanOptions.name);
 
   const pageloadSpan = getActiveIdleSpan(client);
 

packages/browser/test/tracing/browserTracingIntegration.test.ts

@@ -497,6 +497,41 @@ describe('browserTracingIntegration', () => {
       expect(spanIsSampled(span!)).toBe(true);
     });
 
+    it('starts the span at the time origin if no start time is provided', () => {
+      const client = new BrowserClient(
+        getDefaultBrowserClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentPageLoad: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      // Simulate the SDK (and therefore the routing instrumentation) only starting up 5s into the page load
+      vi.setSystemTime(browserPerformanceTimeOrigin()! + 5_000);
+
+      const span = startBrowserTracingPageLoadSpan(client, { name: 'test span' });
+
+      expect(spanToJSON(span!).start_timestamp).toBe(browserPerformanceTimeOrigin()! / 1000);
+    });
+
+    it('respects an explicitly passed start time', () => {
+      const client = new BrowserClient(
+        getDefaultBrowserClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentPageLoad: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const startTime = browserPerformanceTimeOrigin()! / 1000 + 12;
+
+      const span = startBrowserTracingPageLoadSpan(client, { name: 'test span', startTime });
+
+      expect(spanToJSON(span!).start_timestamp).toBe(startTime);
+    });
+
     it('allows to overwrite properties', () => {
       const client = new BrowserClient(
         getDefaultBrowserClientOptions({

packages/nextjs/src/client/routing/appRouterRoutingInstrumentation.ts

@@ -1,6 +1,5 @@
 import type { Client, Span } from '@sentry/core';
 import {
-  browserPerformanceTimeOrigin,
   GLOBAL_OBJ,
   hasSpanStreamingEnabled,
   PAGELOAD_SPAN_NAME_FALLBACK,
@@ -61,12 +60,10 @@ const currentRouterPatchingNavigationSpanRef: NavigationSpanRef = { current: und
 export function appRouterInstrumentPageLoad(client: Client): void {
   const pathname = stripTrailingSlash(WINDOW.location.pathname);
   const parameterizedPathname = maybeParameterizeRoute(pathname);
-  const origin = browserPerformanceTimeOrigin();
   startBrowserTracingPageLoadSpan(client, {
     // With span streaming, span names have to be low cardinality, so we can't fall back to the URL.
     name: parameterizedPathname ?? (hasSpanStreamingEnabled(client) ? PAGELOAD_SPAN_NAME_FALLBACK : pathname),
     // pageload should always start at timeOrigin (and needs to be in s, not ms)
-    startTime: origin ? origin / 1000 : undefined,
     attributes: {
       [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.nextjs.app_router_instrumentation',

packages/nextjs/src/client/routing/pagesRouterRoutingInstrumentation.ts

@@ -1,6 +1,5 @@
 import type { Client, TransactionSource } from '@sentry/core';
 import {
-  browserPerformanceTimeOrigin,
   debug,
   hasSpanStreamingEnabled,
   PAGELOAD_SPAN_NAME_FALLBACK,
@@ -123,13 +122,10 @@ export function pagesRouterInstrumentPageLoad(client: Client): void {
     name = name.replace(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|TRACE|CONNECT)\s+/i, '');
   }
 
-  const origin = browserPerformanceTimeOrigin();
   startBrowserTracingPageLoadSpan(
     client,
     {
       name,
-      // pageload should always start at timeOrigin (and needs to be in s, not ms)
-      startTime: origin ? origin / 1000 : undefined,
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.nextjs.pages_router_instrumentation',