feat: Attribute original page URL to all PageViewTiming nodes (#1716)

Author: cwli24

src/common/constants/runtime.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -84,4 +84,18 @@ export const ffVersion = (() => {
  */
 export const originTime = Date.now() - now()
 
-export const supportsNavTimingL2 = () => typeof PerformanceNavigationTiming !== 'undefined' && globalScope?.performance?.getEntriesByType('navigation')?.[0]?.responseStart
+/**
+ * Gets the first navigation entry from the Performance Timeline API.
+ * Returns undefined if the entry is not available or invalid.
+ * Matches web-vitals validation: checks that responseStart exists, is positive, and is not larger than current time.
+ * See: https://github.com/GoogleChrome/web-vitals/issues/137
+ * @returns {PerformanceNavigationTiming | undefined}
+ */
+export const getNavigationEntry = () => {
+  const navigationEntry = globalScope?.performance?.getEntriesByType?.('navigation')?.[0]
+  if (navigationEntry &&
+      navigationEntry.responseStart > 0 &&
+      navigationEntry.responseStart < globalScope.performance.now()) {
+    return navigationEntry
+  }
+}

src/common/util/script-tracker.js

@@ -121,7 +121,7 @@ export function findScriptTimings () {
   const timings = { registeredAt: now(), reportedAt: undefined, fetchStart: 0, fetchEnd: 0, asset: undefined, type: 'unknown' }
   const stack = getDeepStackTrace()
   if (!stack) return timings
-  const navUrl = globalScope.performance?.getEntriesByType('navigation')?.find(entry => entry.initiatorType === 'navigation')?.name || ''
+  const navUrl = globalScope.performance?.getEntriesByType('navigation')?.[0]?.name || ''
 
   try {
     const urls = extractUrlsFromStack(stack)

src/common/vitals/largest-contentful-paint.js

@@ -29,7 +29,6 @@ if (isBrowserScope) {
       if (lcpEntry.element?.tagName) attrs.elTag = lcpEntry.element.tagName
     }
     if (attribution.element) attrs.element = attribution.element
-    if (attribution.navigationEntry) attrs.pageUrl = cleanURL(attribution.navigationEntry.name) // used to ensure the LCP gets the correct URL at harvest time if a soft nav has occurred before page load
     if (attribution.url) attrs.elUrl = cleanURL(attribution.url)
 
     largestContentfulPaint.update({ value, attrs })

src/common/vitals/load-time.js

@@ -1,8 +1,8 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { globalScope, isBrowserScope, originTime, supportsNavTimingL2 } from '../constants/runtime'
+import { globalScope, isBrowserScope, originTime, getNavigationEntry } from '../constants/runtime'
 import { onWindowLoad } from '../window/load'
 import { VITAL_NAMES } from './constants'
 import { VitalMetric } from './vital-metric'
@@ -13,8 +13,9 @@ if (isBrowserScope) {
   const perf = globalScope.performance
   const handler = () => {
     if (!loadTime.isValid && perf) {
+      const navEntry = getNavigationEntry()
       loadTime.update({
-        value: supportsNavTimingL2() ? perf.getEntriesByType('navigation')?.[0]?.loadEventEnd : perf.timing?.loadEventEnd - originTime
+        value: navEntry ? navEntry.loadEventEnd : (perf.timing?.loadEventEnd - originTime)
       })
     }
   }

src/common/vitals/time-to-first-byte.js

@@ -1,8 +1,8 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { globalScope, isBrowserScope, isiOS, originTime, supportsNavTimingL2 } from '../constants/runtime'
+import { globalScope, isBrowserScope, isiOS, originTime, getNavigationEntry } from '../constants/runtime'
 import { VITAL_NAMES } from './constants'
 import { VitalMetric } from './vital-metric'
 import { onTTFB } from 'web-vitals/attribution'
@@ -17,7 +17,7 @@ export const timeToFirstByte = new VitalMetric(VITAL_NAMES.TIME_TO_FIRST_BYTE)
  * - cross-origin iframes specifically in firefox and safari
  * - onTTFB relies on a truthy `responseStart` value, should ensure that exists before relying on it (seen to be falsy in certain Electron.js cases for instance)
  */
-if (isBrowserScope && supportsNavTimingL2() && !isiOS && window === window.parent) {
+if (isBrowserScope && getNavigationEntry() && !isiOS && window === window.parent) {
   onTTFB(({ value, attribution }) => {
     if (timeToFirstByte.isValid) return
     timeToFirstByte.update({ value, attrs: { navigationEntry: attribution.navigationEntry } })

src/features/page_view_event/aggregate/index.js

@@ -2,7 +2,7 @@
  * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { globalScope, isBrowserScope, originTime, supportsNavTimingL2 } from '../../../common/constants/runtime'
+import { globalScope, isBrowserScope, originTime, getNavigationEntry } from '../../../common/constants/runtime'
 import { addPT, addPN } from '../../../common/timing/nav-timing'
 import { stringify } from '../../../common/util/stringify'
 import { isValid } from '../../../common/config/info'
@@ -91,8 +91,8 @@ export class Aggregate extends AggregateBase {
     let body = applyFnToProps({ ja: { ...customAttributes, webdriverDetected } }, this.obfuscator.obfuscateString.bind(this.obfuscator), 'string')
 
     if (globalScope.performance) {
-      if (supportsNavTimingL2()) { // Navigation Timing level 2 API that replaced PerformanceTiming & PerformanceNavigation
-        const navTimingEntry = globalScope?.performance?.getEntriesByType('navigation')?.[0]
+      const navTimingEntry = getNavigationEntry()
+      if (navTimingEntry) { // Navigation Timing level 2 API that replaced PerformanceTiming & PerformanceNavigation
         const perf = ({
           timing: addPT(originTime, navTimingEntry, {}),
           navigation: addPN(navTimingEntry, {})

src/features/page_view_timing/aggregate/index.js

@@ -16,10 +16,11 @@ import { interactionToNextPaint } from '../../../common/vitals/interaction-to-ne
 import { largestContentfulPaint } from '../../../common/vitals/largest-contentful-paint'
 import { subscribeToVisibilityChange } from '../../../common/window/page-visibility'
 import { VITAL_NAMES } from '../../../common/vitals/constants'
-import { initiallyHidden } from '../../../common/constants/runtime'
+import { initiallyHidden, getNavigationEntry, initialLocation } from '../../../common/constants/runtime'
 import { eventOrigin } from '../../../common/util/event-origin'
 import { loadTime } from '../../../common/vitals/load-time'
 import { webdriverDetected } from '../../../common/util/webdriver-detection'
+import { cleanURL } from '../../../common/url/clean-url'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -71,6 +72,8 @@ export class Aggregate extends AggregateBase {
 
   addTiming (name, value, attrs) {
     attrs = attrs || {}
+    attrs.pageUrl = cleanURL(getNavigationEntry()?.name || initialLocation)
+
     addConnectionAttributes(attrs) // network conditions may differ from the actual for VitalMetrics when they were captured
 
     // If cls was set to another value by `onCLS`, then it's supported and is attached onto any timing but is omitted until such time.

src/features/session_trace/aggregate/index.js

@@ -1,13 +1,13 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { FEATURE_NAME } from '../constants'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { TraceStorage } from './trace/storage'
 import { obj as encodeObj } from '../../../common/url/encode'
-import { globalScope, supportsNavTimingL2 } from '../../../common/constants/runtime'
+import { globalScope, getNavigationEntry } from '../../../common/constants/runtime'
 import { MODE, SESSION_EVENTS } from '../../../common/session/constants'
 import { applyFnToProps } from '../../../common/util/traverse'
 import { cleanURL } from '../../../common/url/clean-url'
@@ -62,8 +62,9 @@ export class Aggregate extends AggregateBase {
         if (this.sessionId !== sessionState.value || (eventType === 'cross-tab' && sessionState.sessionTraceMode === MODE.OFF)) this.abort(2)
       })
 
-      if (supportsNavTimingL2()) {
-        this.traceStorage.storeTiming(globalScope.performance?.getEntriesByType?.('navigation')[0])
+      const navEntry = getNavigationEntry()
+      if (navEntry) {
+        this.traceStorage.storeTiming(navEntry)
       } else {
         this.traceStorage.storeTiming(globalScope.performance?.timing, true)
       }

tests/unit/common/util/script-tracker.test.js

@@ -13,6 +13,8 @@ let performanceObserverCallback
 let scriptTrackerModule
 // Allows tests to control Error.stack content
 let mockStack = null
+// Control what getNavigationEntry returns
+let mockNavigationEntry = null
 
 // Helper to construct error with custom stack
 const OriginalError = global.Error
@@ -26,12 +28,18 @@ class MockError extends OriginalError {
   }
 }
 
+jest.mock('../../../../src/common/constants/runtime', () => ({
+  globalScope: global.window,
+  getNavigationEntry: () => mockNavigationEntry
+}))
+
 beforeEach(() => {
   // Reset module state to ensure clean test isolation
   jest.resetModules()
   jest.clearAllMocks()
   performanceObserverCallback = null
   mockStack = null
+  mockNavigationEntry = null
 
   // Setup custom Error class to control stack traces
   global.Error = MockError
@@ -97,9 +105,14 @@ describe('script-tracker', () => {
 
     test('identifies inline script when URL matches navigation', () => {
       // Setup: Mock navigation entry with page URL
+      mockNavigationEntry = { name: 'https://example.com/page.html' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
         if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/page.html' }]
+          return [mockNavigationEntry]
+        }
+        if (type === 'resource') {
+          return []
         }
         return []
       })
@@ -127,10 +140,9 @@ describe('script-tracker', () => {
         responseEnd: 250.8
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }
@@ -163,13 +175,9 @@ describe('script-tracker', () => {
       }
 
       // Setup: Script not in static buffer, only in observer
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
-        if (type === 'resource') {
-          return [] // Not in static buffer
-        }
         return []
       })
 
@@ -209,10 +217,9 @@ describe('script-tracker', () => {
         responseEnd: 120.5
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         return []
       })
 
@@ -254,10 +261,9 @@ describe('script-tracker', () => {
         return []
       })
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         return []
       })
 
@@ -294,10 +300,9 @@ describe('script-tracker', () => {
         return []
       })
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         return []
       })
 
@@ -426,10 +431,9 @@ describe('script-tracker', () => {
         responseEnd: 200
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }
@@ -458,10 +462,9 @@ describe('script-tracker', () => {
         responseEnd: 200
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }
@@ -487,10 +490,9 @@ describe('script-tracker', () => {
         responseEnd: 180.6
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }
@@ -519,10 +521,9 @@ init@https://cdn.example.com/gecko-app.js:20:10`
         responseEnd: 210.4
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }
@@ -552,10 +553,9 @@ init@https://cdn.example.com/gecko-app.js:20:10`
         responseEnd: 150
       }
 
+      mockNavigationEntry = { name: 'https://example.com/' }
+
       global.performance.getEntriesByType = jest.fn((type) => {
-        if (type === 'navigation') {
-          return [{ initiatorType: 'navigation', name: 'https://example.com/' }]
-        }
         if (type === 'resource') {
           return [mockResourceEntry]
         }