Merge branch 'NR-443294-navigations' into tmp-user-frustrations

Author: ptang-nr

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.296.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.295.0...v1.296.0) (2025-08-19)
+
+
+### Features
+
+* Harvest traces early ([#1532](https://github.com/newrelic/newrelic-browser-agent/issues/1532)) ([58f3c52](https://github.com/newrelic/newrelic-browser-agent/commit/58f3c52db5b57dcb41876792f2a1a14fa907d66d))
+
+
+### Bug Fixes
+
+* Remove event buffer inspection event ([#1540](https://github.com/newrelic/newrelic-browser-agent/issues/1540)) ([3e3ca33](https://github.com/newrelic/newrelic-browser-agent/commit/3e3ca330a719dc1312019f5d1970c11dff4c6edf))
+
 ## [1.295.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.294.0...v1.295.0) (2025-08-04)
 
 

changelog.json

@@ -1,6 +1,31 @@
 {
   "repository": "newrelic/newrelic-browser-agent",
   "entries": [
+    {
+      "changes": [
+        {
+          "type": "feat",
+          "sha": "58f3c52db5b57dcb41876792f2a1a14fa907d66d",
+          "message": "Harvest traces early",
+          "issues": [
+            "1532"
+          ]
+        },
+        {
+          "type": "fix",
+          "sha": "3e3ca330a719dc1312019f5d1970c11dff4c6edf",
+          "message": "Remove event buffer inspection event",
+          "issues": [
+            "1540"
+          ]
+        }
+      ],
+      "version": "1.296.0",
+      "language": "JAVASCRIPT",
+      "artifactName": "@newrelic/browser-agent",
+      "id": "4df80f61-aa97-444e-a813-9734ece9a145",
+      "createTime": "2025-08-19T21:32:44.379Z"
+    },
     {
       "changes": [
         {
@@ -3107,5 +3132,5 @@
       "createTime": "2023-05-08T21:11:35.144Z"
     }
   ],
-  "updateTime": "2025-08-04T18:18:14.079Z"
+  "updateTime": "2025-08-19T21:32:44.379Z"
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.295.0",
+  "version": "1.296.0",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",

package.json

@@ -112,7 +112,7 @@ const warnings = {}
   * @param {NetworkSendSpec} param0 Specification for sending data
   * @returns {boolean} True if a network call was made. Note that this does not mean or guarantee that it was successful.
   */
-function send (agentRef, { endpoint, targetApp, payload, localOpts = {}, submitMethod, cbFinished, raw, featureName }) {
+export function send (agentRef, { endpoint, targetApp, payload, localOpts = {}, submitMethod, cbFinished, raw, featureName }) {
   if (!agentRef.info.errorBeacon) return false
 
   let { body, qs } = cleanPayload(payload)
@@ -218,7 +218,7 @@ function send (agentRef, { endpoint, targetApp, payload, localOpts = {}, submitM
 function cleanPayload (payload = {}) {
   const clean = (input) => {
     if ((typeof Uint8Array !== 'undefined' && input instanceof Uint8Array) || Array.isArray(input)) return input
-    if (typeof input === 'string') return input.length > 0 ? input : null
+    if (typeof input === 'string') return input
     return Object.entries(input || {}).reduce((accumulator, [key, value]) => {
       if ((typeof value === 'number') ||
           (typeof value === 'string' && value.length > 0) ||

src/common/harvest/harvester.js

@@ -134,6 +134,7 @@ export class Aggregate extends AggregateBase {
         }, this.featureName, this.ee)
         registerHandler('err', () => this.userActionAggregator.markAsErrorClick(), this.featureName, this.ee)
         registerHandler('xhr', (params) => evalNetworkRequest.call(this, params.host), this.featureName, this.ee)
+        registerHandler('navChange', () => this.userActionAggregator.treatAsLiveClick(), this.featureName, this.ee)
       }
 
       /**

src/features/generic_events/aggregate/index.js

@@ -5,7 +5,7 @@
 
 import { globalScope, isBrowserScope } from '../../../common/constants/runtime'
 import { handle } from '../../../common/event-emitter/handle'
-import { windowAddEventListener } from '../../../common/event-listener/event-listener-opts'
+import { eventListenerOpts, windowAddEventListener } from '../../../common/event-listener/event-listener-opts'
 import { debounce } from '../../../common/util/invoke'
 import { setupAddPageActionAPI } from '../../../loaders/api/addPageAction'
 import { setupFinishedAPI } from '../../../loaders/api/finished'
@@ -14,6 +14,7 @@ import { setupRegisterAPI } from '../../../loaders/api/register'
 import { setupMeasureAPI } from '../../../loaders/api/measure'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME, OBSERVED_EVENTS, OBSERVED_WINDOW_EVENTS } from '../constants'
+import { wrapHistory } from '../../../common/wrap/wrap-history'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
@@ -55,12 +56,33 @@ export class Instrument extends InstrumentBase {
         })
         observer.observe({ type: 'resource', buffered: true })
       }
+
+      try {
+        this.removeOnAbort = new AbortController()
+      } catch (e) {}
+
+      function navigationChange () {
+        historyEE.emit('navChange')
+      }
+
+      const historyEE = wrapHistory(this.ee)
+      historyEE.on('pushState-end', navigationChange)
+      historyEE.on('replaceState-end', navigationChange)
+      window.addEventListener('hashchange', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+      window.addEventListener('load', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+      window.addEventListener('popstate', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
     }
 
+    this.abortHandler = this.#abort
     /** If any of the sources are active, import the aggregator. otherwise deregister */
     if (genericEventSourceConfigs.some(x => x)) this.importAggregator(agentRef, () => import(/* webpackChunkName: "generic_events-aggregate" */ '../aggregate'))
     else this.deregisterDrain()
   }
+
+  #abort () {
+    this.removeOnAbort?.abort()
+    this.abortHandler = undefined // weakly allow this abort op to run only once
+  }
 }
 
 export const GenericEvents = Instrument

src/features/generic_events/instrument/index.js

@@ -18,7 +18,6 @@ import { MODE, SESSION_EVENTS, SESSION_EVENT_TYPES } from '../../../common/sessi
 import { stringify } from '../../../common/util/stringify'
 import { stylesheetEvaluator } from '../shared/stylesheet-evaluator'
 import { now } from '../../../common/timing/now'
-import { buildNRMetaNode } from '../shared/utils'
 import { MAX_PAYLOAD_SIZE } from '../../../common/constants/agent-constants'
 import { cleanURL } from '../../../common/url/clean-url'
 import { canEnableSessionTracking } from '../../utils/feature-gates'
@@ -94,8 +93,7 @@ export class Aggregate extends AggregateBase {
         }
         return
       }
-      this.drain()
-      this.initializeRecording(srMode)
+      this.initializeRecording(srMode).then(() => { this.drain() })
     }).then(() => {
       if (this.mode === MODE.OFF) {
         this.recorder?.stopRecording() // stop any conservative preload recording launched by instrument
@@ -121,7 +119,7 @@ export class Aggregate extends AggregateBase {
   }
 
   handleError (e) {
-    if (this.recorder) this.recorder.currentBufferTarget.hasError = true
+    if (this.recorder) this.recorder.events.hasError = true
     // run once
     if (this.mode === MODE.ERROR && globalScope?.document.visibilityState === 'visible') {
       this.switchToFull()
@@ -171,10 +169,10 @@ export class Aggregate extends AggregateBase {
 
     if (!this.recorder) {
       try {
-      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
+        // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
         const { Recorder } = (await import(/* webpackChunkName: "recorder" */'../shared/recorder'))
         this.recorder = new Recorder(this)
-        this.recorder.currentBufferTarget.hasError = this.errorNoticed
+        this.recorder.events.hasError = this.errorNoticed
       } catch (err) {
         return this.abort(ABORT_REASONS.IMPORT)
       }
@@ -189,11 +187,6 @@ export class Aggregate extends AggregateBase {
     // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
     // The makeHarvestPayload should ensure that no payload is returned if we're not in FULL mode...
 
-    // If theres preloaded events and we are in full mode, just harvest immediately to clear up space and for consistency
-    if (this.mode === MODE.FULL && this.recorder?.getEvents().type === 'preloaded') {
-      this.prepUtils().then(() => this.agentRef.runtime.harvester.triggerHarvestFor(this))
-    }
-
     await this.prepUtils()
 
     if (!this.agentRef.runtime.isRecording) this.recorder.startRecording()
@@ -231,24 +224,10 @@ export class Aggregate extends AggregateBase {
 
     let len = 0
     if (!!this.gzipper && !!this.u8) {
-      payload.body = this.gzipper(this.u8(`[${payload.body.map(({ __serialized, ...e }) => {
-        if (e.__newrelic && __serialized) return __serialized
-        const output = { ...e }
-        if (!output.__newrelic) {
-          output.__newrelic = buildNRMetaNode(e.timestamp, this.timeKeeper)
-          output.timestamp = this.timeKeeper.correctAbsoluteTimestamp(e.timestamp)
-        }
-        return stringify(output)
-      }).join(',')}]`))
+      payload.body = this.gzipper(this.u8(`[${payload.body.map(({ __serialized }) => (__serialized)).join(',')}]`))
       len = payload.body.length
     } else {
-      payload.body = payload.body.map(({ __serialized, ...node }) => {
-        if (node.__newrelic) return node
-        const output = { ...node }
-        output.__newrelic = buildNRMetaNode(node.timestamp, this.timeKeeper)
-        output.timestamp = this.timeKeeper.correctAbsoluteTimestamp(node.timestamp)
-        return output
-      })
+      for (let idx in payload.body) delete payload.body[idx].__serialized
       len = stringify(payload.body).length
     }
 
@@ -269,12 +248,6 @@ export class Aggregate extends AggregateBase {
     return [payloadOutput]
   }
 
-  getCorrectedTimestamp (node) {
-    if (!node?.timestamp) return
-    if (node.__newrelic) return node.timestamp
-    return this.timeKeeper.correctAbsoluteTimestamp(node.timestamp)
-  }
-
   /**
    * returns the timestamps for the earliest and latest nodes in the provided array, even if out of order
    * @param {Object[]} [nodes] - the nodes to evaluate
@@ -318,8 +291,8 @@ export class Aggregate extends AggregateBase {
 
     const { firstEvent, lastEvent } = this.getFirstAndLastNodes(events)
     // from rrweb node || from when the harvest cycle started
-    const firstTimestamp = this.getCorrectedTimestamp(firstEvent) || Math.floor(this.timeKeeper.correctAbsoluteTimestamp(recorderEvents.cycleTimestamp))
-    const lastTimestamp = this.getCorrectedTimestamp(lastEvent) || Math.floor(this.timeKeeper.correctRelativeTimestamp(relativeNow))
+    const firstTimestamp = firstEvent?.timestamp || Math.floor(this.timeKeeper.correctAbsoluteTimestamp(recorderEvents.cycleTimestamp))
+    const lastTimestamp = lastEvent?.timestamp || Math.floor(this.timeKeeper.correctRelativeTimestamp(relativeNow))
 
     const agentMetadata = agentRuntime.appMetadata?.agents?.[0] || {}
 

src/features/session_replay/aggregate/index.js

@@ -10,7 +10,7 @@ import { handle } from '../../../common/event-emitter/handle'
 import { DEFAULT_KEY, MODE, PREFIX } from '../../../common/session/constants'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { hasReplayPrerequisite, isPreloadAllowed } from '../shared/utils'
-import { FEATURE_NAME, SR_EVENT_EMITTER_TYPES, TRIGGERS } from '../constants'
+import { FEATURE_NAME, SR_EVENT_EMITTER_TYPES } from '../constants'
 import { setupRecordReplayAPI } from '../../../loaders/api/recordReplay'
 import { setupPauseReplayAPI } from '../../../loaders/api/pauseReplay'
 
@@ -69,7 +69,7 @@ export class Instrument extends InstrumentBase {
   /**
    * This func is use for early pre-load recording prior to replay feature (agg) being loaded onto the page. It should only setup once, including if already called and in-progress.
    */
-  async #preloadStartRecording (trigger) {
+  async #preloadStartRecording () {
     if (this.#alreadyStarted) return
     this.#alreadyStarted = true
 
@@ -78,7 +78,7 @@ export class Instrument extends InstrumentBase {
 
       // If startReplay() has been used by this point, we must record in full mode regardless of session preload:
       // Note: recorder starts here with w/e the mode is at this time, but this may be changed later (see #apiStartOrRestartReplay else-case)
-      this.recorder ??= new Recorder({ mode: this.#mode, agentIdentifier: this.agentIdentifier, trigger, ee: this.ee, agentRef: this.#agentRef })
+      this.recorder ??= new Recorder({ ...this, mode: this.#mode, agentRef: this.#agentRef, timeKeeper: this.#agentRef.runtime.timeKeeper }) // if TK exists due to deferred state, pass it
       this.recorder.startRecording()
       this.abortHandler = this.recorder.stopRecording
     } catch (err) {
@@ -95,7 +95,7 @@ export class Instrument extends InstrumentBase {
       if (this.featAggregate.mode !== MODE.FULL) this.featAggregate.initializeRecording(MODE.FULL, true)
     } else { // pre-load
       this.#mode = MODE.FULL
-      this.#preloadStartRecording(TRIGGERS.API)
+      this.#preloadStartRecording()
       // There's a race here wherein either:
       // a. Recorder has not been initialized, and we've set the enforced mode, so we're good, or;
       // b. Record has been initialized, possibly with the "wrong" mode, so we have to correct that + restart.

src/features/session_replay/instrument/index.js

@@ -26,8 +26,8 @@ export class RecorderEvents {
     this.inlinedAllStylesheets = shouldInlineStylesheets
   }
 
-  add (event) {
-    this.#events.add(event)
+  add (event, evaluatedSize) {
+    this.#events.add(event, evaluatedSize)
   }
 
   get events () {