@newrelic/browser-agent 1.304.0 → 1.305.0-rc.1

package/src/common/window/load.js

@@ -3,14 +3,31 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { windowAddEventListener, documentAddEventListener } from '../event-listener/event-listener-opts'
+import { single } from '../util/invoke'
 
 export function checkState () {
   return (typeof document === 'undefined' || document.readyState === 'complete')
 }
 
+/**
+ * Executes a callback when the window 'load' event fires, or immediately if the load event has already occurred.
+ * Sets up a backup polling mechanism in the rare case that the browser does not fire the load event when the page has loaded,
+ * such as in certain iframe scenarios like ChatGPT connector frames. Cannot use document.readystatechange event here because
+ * it blocks back/forward cache in Safari browsers.
+ * @param {Function} cb
+ * @param {boolean} [useCapture]
+ * @returns {void}
+ */
 export function onWindowLoad (cb, useCapture) {
   if (checkState()) return cb()
-  windowAddEventListener('load', cb, useCapture)
+  const singleCb = single(cb)
+  const poll = setInterval(() => {
+    if (checkState()) {
+      clearInterval(poll)
+      singleCb()
+    }
+  }, 500)
+  windowAddEventListener('load', singleCb, useCapture)
 }
 
 export function onDOMContentLoaded (cb) {

package/src/features/generic_events/aggregate/index.js

@@ -61,7 +61,7 @@ export class Aggregate extends AggregateBase {
 
       let addUserAction = () => { /** no-op */ }
       if (isBrowserScope && agentRef.init.user_actions.enabled) {
-        this.#userActionAggregator = new UserActionsAggregator(agentRef.init.feature_flags.includes('user_frustrations'))
+        this.#userActionAggregator = new UserActionsAggregator()
         this.harvestOpts.beforeUnload = () => addUserAction?.(this.#userActionAggregator.aggregationEvent)
 
         addUserAction = (aggregatedUserAction) => {

package/src/features/generic_events/aggregate/user-actions/user-actions-aggregator.js

@@ -12,15 +12,13 @@ export class UserActionsAggregator {
   /** @type {AggregatedUserAction=} */
   #aggregationEvent = undefined
   #aggregationKey = ''
-  #ufEnabled = false
   #deadClickTimer = undefined
   #domObserver = undefined
   #errorClickTimer = undefined
 
-  constructor (userFrustrationsEnabled) {
-    if (userFrustrationsEnabled && gosNREUMOriginals().o.MO) {
+  constructor () {
+    if (gosNREUMOriginals().o.MO) {
       this.#domObserver = new MutationObserver(this.isLiveClick.bind(this))
-      this.#ufEnabled = true
     }
   }
 
@@ -52,15 +50,13 @@ export class UserActionsAggregator {
     } else {
       // return the prev existing one (if there is one)
       const finishedEvent = this.#aggregationEvent
-      if (this.#ufEnabled) {
-        this.#deadClickCleanup()
-        this.#errorClickCleanup()
-      }
+      this.#deadClickCleanup()
+      this.#errorClickCleanup()
 
       // then start new event aggregation
       this.#aggregationKey = aggregationKey
       this.#aggregationEvent = new AggregatedUserAction(evt, selectorInfo)
-      if (this.#ufEnabled && evt.type === 'click' && (selectorInfo.hasButton || selectorInfo.hasLink)) {
+      if (evt.type === 'click' && (selectorInfo.hasButton || selectorInfo.hasLink)) {
         this.#deadClickSetup(this.#aggregationEvent)
         this.#errorClickSetup()
       }

package/src/features/generic_events/instrument/index.js

@@ -27,7 +27,6 @@ export class Instrument extends InstrumentBase {
   constructor (agentRef) {
     super(agentRef, FEATURE_NAME)
     const websocketsEnabled = agentRef.init.feature_flags.includes('websockets')
-    const ufEnabled = agentRef.init.feature_flags.includes('user_frustrations')
 
     /** config values that gate whether the generic events aggregator should be imported at all */
     const genericEventSourceConfigs = [
@@ -47,14 +46,12 @@ export class Instrument extends InstrumentBase {
     setupMeasureAPI(agentRef)
 
     let historyEE, websocketsEE
-    if (isBrowserScope && ufEnabled) {
+    if (websocketsEnabled) websocketsEE = wrapWebSocket(this.ee)
+    if (isBrowserScope) {
       wrapFetch(this.ee)
       wrapXhr(this.ee)
       historyEE = wrapHistory(this.ee)
-    }
-    if (websocketsEnabled) websocketsEE = wrapWebSocket(this.ee)
 
-    if (isBrowserScope) {
       if (agentRef.init.user_actions.enabled) {
         OBSERVED_EVENTS.forEach(eventType =>
           windowAddEventListener(eventType, (evt) => handle('ua', [evt], undefined, this.featureName, this.ee), true)
@@ -63,42 +60,40 @@ export class Instrument extends InstrumentBase {
           const debounceHandler = debounce((evt) => { handle('ua', [evt], undefined, this.featureName, this.ee) }, 500, { leading: true })
           windowAddEventListener(eventType, debounceHandler)
         }
-        // Capture is not used here so that we don't get element focus/blur events, only the window's as they do not bubble. They are also not cancellable, so no worries about being front of line.
+          // Capture is not used here so that we don't get element focus/blur events, only the window's as they do not bubble. They are also not cancellable, so no worries about being front of line.
         )
 
-        if (ufEnabled) {
-          globalScope.addEventListener('error', () => {
-            handle('uaErr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-          }, eventListenerOpts(false, this.removeOnAbort?.signal))
-
-          this.ee.on('open-xhr-start', (args, xhr) => {
-            if (!isInternalTraffic(args[1])) {
-              xhr.addEventListener('readystatechange', () => {
-                if (xhr.readyState === 2) { // HEADERS_RECEIVED
-                  handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-                }
-              })
-            }
-          })
-          this.ee.on('fetch-start', (fetchArguments) => {
-            if (fetchArguments.length >= 1 && !isInternalTraffic(extractUrl(fetchArguments[0]))) {
-              handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-            }
-          })
-
-          function isInternalTraffic (url) {
-            const parsedUrl = parseUrl(url)
-            return agentRef.beacons.includes(parsedUrl.hostname + ':' + parsedUrl.port)
+        globalScope.addEventListener('error', () => {
+          handle('uaErr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+        }, eventListenerOpts(false, this.removeOnAbort?.signal))
+
+        this.ee.on('open-xhr-start', (args, xhr) => {
+          if (!isInternalTraffic(args[1])) {
+            xhr.addEventListener('readystatechange', () => {
+              if (xhr.readyState === 2) { // HEADERS_RECEIVED
+                handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+              }
+            })
           }
+        })
+        this.ee.on('fetch-start', (fetchArguments) => {
+          if (fetchArguments.length >= 1 && !isInternalTraffic(extractUrl(fetchArguments[0]))) {
+            handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+          }
+        })
 
-          historyEE.on('pushState-end', navigationChange)
-          historyEE.on('replaceState-end', navigationChange)
-          window.addEventListener('hashchange', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
-          window.addEventListener('popstate', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+        function isInternalTraffic (url) {
+          const parsedUrl = parseUrl(url)
+          return agentRef.beacons.includes(parsedUrl.hostname + ':' + parsedUrl.port)
+        }
 
-          function navigationChange () {
-            historyEE.emit('navChange')
-          }
+        historyEE.on('pushState-end', navigationChange)
+        historyEE.on('replaceState-end', navigationChange)
+        window.addEventListener('hashchange', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+        window.addEventListener('popstate', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+
+        function navigationChange () {
+          historyEE.emit('navChange')
         }
       }
 
@@ -108,7 +103,10 @@ export class Instrument extends InstrumentBase {
             handle('browserPerformance.resource', [entry], undefined, this.featureName, this.ee)
           })
         })
-        observer.observe({ type: 'resource', buffered: true })
+        observer.observe({
+          type: 'resource',
+          buffered: true
+        })
       }
     }
     if (websocketsEnabled) { // this can apply outside browser scope such as in worker

package/src/features/page_view_event/aggregate/index.js

@@ -2,7 +2,7 @@
  * Copyright 2020-2025 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { globalScope, isBrowserScope, originTime } from '../../../common/constants/runtime'
+import { globalScope, isBrowserScope, originTime, supportsNavTimingL2 } from '../../../common/constants/runtime'
 import { addPT, addPN } from '../../../common/timing/nav-timing'
 import { stringify } from '../../../common/util/stringify'
 import { isValid } from '../../../common/config/info'
@@ -46,9 +46,8 @@ export class Aggregate extends AggregateBase {
         this.timeToFirstByte = Math.max(value, this.timeToFirstByte)
         this.firstByteToWindowLoad = Math.max(Math.round(navEntry.loadEventEnd - this.timeToFirstByte), this.firstByteToWindowLoad) // our "frontend" duration
         this.firstByteToDomContent = Math.max(Math.round(navEntry.domContentLoadedEventEnd - this.timeToFirstByte), this.firstByteToDomContent) // our "dom processing" duration
-
-        this.sendRum()
       })
+      setTimeout(this.sendRum.bind(this), 0) // we want to sendRum after ttfb has reported something, but we dont want to wait forever incase TTFB fails to report in niche environments.
     } else {
       // worker agent build does not get TTFB values, use default 0 values
       this.sendRum()
@@ -94,14 +93,14 @@ export class Aggregate extends AggregateBase {
     }
 
     if (globalScope.performance) {
-      if (typeof PerformanceNavigationTiming !== 'undefined') { // Navigation Timing level 2 API that replaced PerformanceTiming & PerformanceNavigation
+      if (supportsNavTimingL2()) { // Navigation Timing level 2 API that replaced PerformanceTiming & PerformanceNavigation
         const navTimingEntry = globalScope?.performance?.getEntriesByType('navigation')?.[0]
         const perf = ({
           timing: addPT(originTime, navTimingEntry, {}),
           navigation: addPN(navTimingEntry, {})
         })
         queryParameters.perf = stringify(perf)
-      } else if (typeof PerformanceTiming !== 'undefined') { // Safari pre-15 did not support level 2 timing
+      } else if (typeof PerformanceTiming !== 'undefined') { // Modern Safari iFrames and Safari pre-15 do not support level 2 timing.
         const perf = ({
           timing: addPT(originTime, globalScope.performance.timing, {}, true),
           navigation: addPN(globalScope.performance.navigation, {})
@@ -161,12 +160,12 @@ export class Aggregate extends AggregateBase {
         const encoded = textEncoder.encode(value)
         return acc + encoded.byteLength
       }, 0)
-
+      const BCSError = 'BCS/Error/'
       // Send SMs about failed RUM request
       const body = {
         sm: [{
           params: {
-            name: `Browser/Supportability/BCS/Error/${status}`
+            name: BCSError + status
           },
           stats: {
             c: 1
@@ -174,7 +173,7 @@ export class Aggregate extends AggregateBase {
         },
         {
           params: {
-            name: 'Browser/Supportability/BCS/Error/Dropped/Bytes'
+            name: BCSError + 'Dropped/Bytes'
           },
           stats: {
             c: 1,
@@ -183,7 +182,7 @@ export class Aggregate extends AggregateBase {
         },
         {
           params: {
-            name: 'Browser/Supportability/BCS/Error/Duration/Ms'
+            name: BCSError + 'Duration/Ms'
           },
           stats: {
             c: 1,

package/src/features/page_view_timing/aggregate/index.js

@@ -14,11 +14,11 @@ import { firstContentfulPaint } from '../../../common/vitals/first-contentful-pa
 import { firstPaint } from '../../../common/vitals/first-paint'
 import { interactionToNextPaint } from '../../../common/vitals/interaction-to-next-paint'
 import { largestContentfulPaint } from '../../../common/vitals/largest-contentful-paint'
-import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
 import { subscribeToVisibilityChange } from '../../../common/window/page-visibility'
 import { VITAL_NAMES } from '../../../common/vitals/constants'
 import { initiallyHidden } from '../../../common/constants/runtime'
 import { eventOrigin } from '../../../common/util/event-origin'
+import { loadTime } from '../../../common/vitals/load-time'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -43,9 +43,7 @@ export class Aggregate extends AggregateBase {
       firstContentfulPaint.subscribe(this.#handleVitalMetric)
       largestContentfulPaint.subscribe(this.#handleVitalMetric)
       interactionToNextPaint.subscribe(this.#handleVitalMetric)
-      timeToFirstByte.subscribe(({ attrs }) => {
-        this.addTiming('load', Math.round(attrs.navigationEntry.loadEventEnd))
-      })
+      loadTime.subscribe(({ name, value }) => { this.addTiming(name, Math.round(value)) })
       subscribeToVisibilityChange(() => {
         /* Downstream, the event consumer interprets all timing node value as ms-unit and converts it to seconds via division by 1000. CLS is unitless so this normally is a problem.
           bel.6 schema also doesn't support decimal values, of which cls within [0,1). However, the two nicely cancels out, and we can multiply cls by 1000 to both negate the division

package/src/features/session_trace/aggregate/index.js

@@ -7,7 +7,7 @@ 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 } from '../../../common/constants/runtime'
+import { globalScope, supportsNavTimingL2 } 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,7 +62,7 @@ export class Aggregate extends AggregateBase {
         if (this.sessionId !== sessionState.value || (eventType === 'cross-tab' && sessionState.sessionTraceMode === MODE.OFF)) this.abort(2)
       })
 
-      if (typeof PerformanceNavigationTiming !== 'undefined') {
+      if (supportsNavTimingL2()) {
         this.traceStorage.storeTiming(globalScope.performance?.getEntriesByType?.('navigation')[0])
       } else {
         this.traceStorage.storeTiming(globalScope.performance?.timing, true)

package/src/features/soft_navigations/aggregate/index.js

@@ -5,7 +5,7 @@
 import { handle } from '../../../common/event-emitter/handle'
 import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { single } from '../../../common/util/invoke'
-import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
+import { loadTime } from '../../../common/vitals/load-time'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { API_TRIGGER_NAME, FEATURE_NAME, INTERACTION_STATUS, INTERACTION_TRIGGERS, IPL_TRIGGER_NAME, NO_LONG_TASK_WINDOW, POPSTATE_MERGE_WINDOW, POPSTATE_TRIGGER } from '../constants'
@@ -31,10 +31,9 @@ export class Aggregate extends AggregateBase {
       this.events.add(ixn) // add the iPL ixn to the buffer for harvest
       this.initialPageLoadInteraction = null
     })
-    timeToFirstByte.subscribe(({ attrs }) => {
-      const loadEventTime = attrs.navigationEntry.loadEventEnd
+
+    loadTime.subscribe(({ value: loadEventTime }) => {
       this.initialPageLoadInteraction.done(loadEventTime)
-      // Report metric on the initial page load time
       this.reportSupportabilityMetric('SoftNav/Interaction/InitialPageLoad/Duration/Ms', Math.round(loadEventTime))
     })
 

package/src/features/spa/instrument/index.js

@@ -16,6 +16,7 @@ import { wrapFetch } from '../../../common/wrap/wrap-fetch'
 import { wrapHistory } from '../../../common/wrap/wrap-history'
 import { wrapMutation } from '../../../common/wrap/wrap-mutation'
 import { setupInteractionAPI } from '../../../loaders/api/interaction'
+import { onWindowLoad } from '../../../common/window/load'
 
 const {
   FEATURE_NAME, START, END, BODY, CB_END, JS_TIME, FETCH, FN_START, CB_START, FN_END
@@ -81,6 +82,11 @@ export class Instrument extends InstrumentBase {
     historyEE.on('pushState-end', trackURLChange)
     historyEE.on('replaceState-end', trackURLChange)
 
+    /** niche cases like GPT apps cause no window.load event to fire - which breaks IPLs - so manually force one through the pipe */
+    onWindowLoad(() => {
+      eventsEE.emit(FN_START, [[{ type: 'load' }], window], undefined, true)
+    })
+
     window.addEventListener('hashchange', trackURLChange, eventListenerOpts(true, this.removeOnAbort?.signal))
     window.addEventListener('load', trackURLChange, eventListenerOpts(true, this.removeOnAbort?.signal))
     window.addEventListener('popstate', function () {

package/src/loaders/api/register.js

@@ -45,7 +45,7 @@ function register (agentRef, target, parent) {
   warn(54, 'newrelic.register')
 
   target ||= {}
-  target.eventSource = 'MicroFrontendBrowserAgent'
+  target.type = 'MFE'
   target.licenseKey ||= agentRef.info.licenseKey // will inherit the license key from the container agent if not provided for brevity. A future state may dictate that we need different license keys to do different things.
   target.blocked = false
   target.parent = parent || {}