fix(nextjs): Record the document URL on a pageload that starts after a navigation

A pageload that waits for its trace meta tag can be settled by a navigation,
and a `popstate` has already changed the location by then. The browser SDK
reads the location when the span starts, so the pageload got the URL of the
navigation. Capture the document URL when the instrumentation sets up and
put it on the span and the request data instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: chargome

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

@@ -1,5 +1,6 @@
 import type { Client, Span, StartSpanOptions } from '@sentry/core';
 import {
+  getCurrentScope,
   GLOBAL_OBJ,
   hasSpanStreamingEnabled,
   isObjectLike,
@@ -17,7 +18,7 @@ import {
   resolveRoute,
 } from '@sentry/react';
 import { stripTrailingSlash } from './parameterization';
-import type { TraceMetaTagWait } from './traceMetaTags';
+import type { TraceMetaTagValues, TraceMetaTagWait } from './traceMetaTags';
 import { addTraceMetaTagLink, canWaitForTraceMetaTag, readTraceMetaTags, waitForTraceMetaTag } from './traceMetaTags';
 import {
   SENTRY_OP,
@@ -114,8 +115,28 @@ export function settlePendingPageloadWait(): void {
   pendingPageloadWait?.giveUp();
 }
 
+/**
+ * Starts the pageload span with the request data of the document. The span may start after a
+ * navigation already changed the location, so the browser SDK would otherwise read the new one.
+ */
+function startPageloadSpan(
+  client: Client,
+  spanOptions: StartSpanOptions,
+  documentUrl: string,
+  traceMetaTags?: TraceMetaTagValues,
+): Span | undefined {
+  const span = startBrowserTracingPageLoadSpan(client, spanOptions, traceMetaTags);
+  const scope = getCurrentScope();
+  const { normalizedRequest } = scope.getScopeData().sdkProcessingMetadata;
+  if (normalizedRequest) {
+    scope.setSDKProcessingMetadata({ normalizedRequest: { ...normalizedRequest, url: documentUrl } });
+  }
+  return span;
+}
+
 /** Instruments the Next.js app router for pageloads. */
 export function appRouterInstrumentPageLoad(client: Client): void {
+  const documentUrl = WINDOW.location.href;
   const pathname = stripTrailingSlash(WINDOW.location.pathname);
   const parameterizedPathname = resolveCurrentRoute(client);
   const spanOptions: StartSpanOptions = {
@@ -126,6 +147,8 @@ export function appRouterInstrumentPageLoad(client: Client): void {
       [SENTRY_OP]: PAGELOAD,
       [SENTRY_ORIGIN]: 'auto.pageload.nextjs.app_router_instrumentation',
       [SENTRY_SEGMENT_NAME_SOURCE]: parameterizedPathname ? 'route' : 'url',
+      [URL_PATH]: WINDOW.location.pathname,
+      [URL_FULL]: filterCollectedUrl(documentUrl),
       ...(parameterizedPathname && { [URL_TEMPLATE]: parameterizedPathname }),
     },
   };
@@ -136,18 +159,18 @@ export function appRouterInstrumentPageLoad(client: Client): void {
   // trace instead of linking it; the span's start is backdated to the time origin either way.
   const traceMetaTags = readTraceMetaTags();
   if (traceMetaTags || !canWaitForTraceMetaTag()) {
-    startBrowserTracingPageLoadSpan(client, spanOptions, traceMetaTags);
+    startPageloadSpan(client, spanOptions, documentUrl, traceMetaTags);
     return;
   }
 
   pendingPageloadWait = waitForTraceMetaTag(
     values => {
       pendingPageloadWait = undefined;
-      startBrowserTracingPageLoadSpan(client, spanOptions, values);
+      startPageloadSpan(client, spanOptions, documentUrl, values);
     },
     () => {
       pendingPageloadWait = undefined;
-      const span = startBrowserTracingPageLoadSpan(client, spanOptions);
+      const span = startPageloadSpan(client, spanOptions, documentUrl);
       // Only reachable through the cap or a navigation while the document still streams: a tag that
       // shows up after this can no longer be continued, but the server request can still be linked.
       if (span) {

packages/nextjs/test/client/appRouterRoutingInstrumentation.test.ts

@@ -264,3 +264,51 @@ describe('appRouterInstrumentNavigation with basePath', () => {
     expect(core.spanToJSON(span!).name).toBe('/my-app/navigation/:param/router-push');
   });
 });
+
+describe('appRouterInstrumentPageLoad', () => {
+  const originalReadyState = Object.getOwnPropertyDescriptor(Document.prototype, 'readyState');
+
+  beforeEach(() => {
+    globalWithNext._sentryRouteManifest = JSON.stringify(manifest);
+    window.history.replaceState({}, '', '/navigation?from=document');
+    Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+    vi.spyOn(performance, 'getEntriesByType').mockReturnValue([]);
+  });
+
+  afterEach(() => {
+    delete globalWithNext.next;
+    delete globalWithNext._sentryRouteManifest;
+    // @ts-expect-error deleting the instance override restores the prototype getter
+    delete document.readyState;
+    if (originalReadyState) {
+      Object.defineProperty(Document.prototype, 'readyState', originalReadyState);
+    }
+    vi.restoreAllMocks();
+  });
+
+  it('records the URL of the document when the pageload starts after a navigation changed it', async () => {
+    const { core, instrumentation } = await setup('static');
+
+    instrumentation.appRouterInstrumentPageLoad(core.getClient()!);
+    const spanBeforeSettling = core.getActiveSpan();
+
+    window.history.replaceState({}, '', '/navigation/42/router-back');
+    instrumentation.settlePendingPageloadWait();
+
+    const span = core.getActiveSpan();
+    expect(span).toBeDefined();
+    expect(span).not.toBe(spanBeforeSettling);
+    const spanJson = core.spanToJSON(span!);
+    expect(spanJson.name).toBe('/navigation');
+    expect(spanJson.attributes?.['sentry.op']).toBe('pageload');
+    expect(spanJson.attributes).toEqual(
+      expect.objectContaining({
+        'url.path': '/navigation',
+        'url.full': 'http://localhost:3000/navigation?from=document',
+      }),
+    );
+    expect(core.getCurrentScope().getScopeData().sdkProcessingMetadata.normalizedRequest?.url).toBe(
+      'http://localhost:3000/navigation?from=document',
+    );
+  });
+});