@newrelic/browser-agent 1.293.0 → 1.294.0-rc.1

package/src/features/soft_navigations/aggregate/ajax-node.js

@@ -7,8 +7,8 @@ import { NODE_TYPE } from '../constants'
 import { BelNode } from './bel-node'
 
 export class AjaxNode extends BelNode {
-  constructor (agentRef, ajaxEvent) {
-    super(agentRef)
+  constructor (ajaxEvent) {
+    super()
     this.belType = NODE_TYPE.AJAX
     this.method = ajaxEvent.method
     this.status = ajaxEvent.status
@@ -26,8 +26,8 @@ export class AjaxNode extends BelNode {
     this.end = ajaxEvent.endTime
   }
 
-  serialize (parentStartTimestamp) {
-    const addString = getAddStringContext(this.obfuscator)
+  serialize (parentStartTimestamp, agentRef) {
+    const addString = getAddStringContext(agentRef.runtime.obfuscator)
     const nodeList = []
 
     // IMPORTANT: The order in which addString is called matters and correlates to the order in which string shows up in the harvest payload. Do not re-order the following code.

package/src/features/soft_navigations/aggregate/bel-node.js

@@ -14,11 +14,6 @@ export class BelNode {
   callbackDuration = 0
   nodeId = ++nodesSeen
 
-  constructor (agentRef) {
-    this.obfuscator = agentRef.runtime.obfuscator
-    this.info = agentRef.info
-  }
-
   addChild (child) {
     this.children.push(child)
   }

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

@@ -18,6 +18,8 @@ export class Aggregate extends AggregateBase {
   constructor (agentRef, { domObserver }) {
     super(agentRef, FEATURE_NAME)
 
+    super.customAttributesAreSeparate = true
+
     this.interactionsToHarvest = this.events
     this.domObserver = domObserver
 
@@ -26,7 +28,7 @@ export class Aggregate extends AggregateBase {
       if (agentRef.runtime.session?.isNew) this.initialPageLoadInteraction.customAttributes.isFirstOfSession = true // mark the hard page load as first of its session
       this.initialPageLoadInteraction.forceSave = true // unless forcibly ignored, iPL always finish by default
       const ixn = this.initialPageLoadInteraction
-      this.interactionsToHarvest.add(ixn)
+      this.events.add(ixn) // add the iPL ixn to the buffer for harvest
       this.initialPageLoadInteraction = null
     })
     timeToFirstByte.subscribe(({ attrs }) => {
@@ -75,7 +77,7 @@ export class Aggregate extends AggregateBase {
     let firstIxnStartTime
     const serializedIxnList = []
     for (const interaction of eventBuffer) {
-      serializedIxnList.push(interaction.serialize(firstIxnStartTime))
+      serializedIxnList.push(interaction.serialize(firstIxnStartTime, this.agentRef))
       if (firstIxnStartTime === undefined) firstIxnStartTime = Math.floor(interaction.start) // careful not to match or overwrite on 0 value!
     }
     return `bel.7;${serializedIxnList.join(';')}`
@@ -86,7 +88,7 @@ export class Aggregate extends AggregateBase {
     if (this.interactionInProgress?.done() === false) return // current in-progress is blocked from closing, e.g. by 'waitForEnd' api option
 
     const oldURL = eventName === INTERACTION_TRIGGERS[3] ? this.latestHistoryUrl : undefined // see related comment in 'newURL' handler above, 'popstate'
-    this.interactionInProgress = new Interaction(this.agentRef, eventName, startedAt, this.latestRouteSetByApi, oldURL)
+    this.interactionInProgress = new Interaction(eventName, startedAt, this.latestRouteSetByApi, oldURL)
 
     if (eventName === INTERACTION_TRIGGERS[0]) { // 'click'
       const sourceElemText = getActionText(sourceElem)
@@ -103,7 +105,7 @@ export class Aggregate extends AggregateBase {
   setClosureHandlers () {
     this.interactionInProgress.on('finished', () => {
       const ref = this.interactionInProgress
-      this.interactionsToHarvest.add(this.interactionInProgress)
+      this.events.add(this.interactionInProgress) // add the ixn to the buffer for harvest
       this.interactionInProgress = null
       this.domObserver.disconnect() // can stop observing whenever our interaction logic completes a cycle
 
@@ -133,7 +135,8 @@ export class Aggregate extends AggregateBase {
     */
     if (this.interactionInProgress?.isActiveDuring(timestamp)) return this.interactionInProgress
     let saveIxn
-    const [{ data: interactionsBuffer }] = this.interactionsToHarvest.get()
+    const interactionsBuffer = this.interactionsToHarvest.get()?.[0]?.data
+    if (!interactionsBuffer) return undefined // no interactions have been staged yet, so nothing to search through)
     for (let idx = interactionsBuffer.length - 1; idx >= 0; idx--) { // reverse search for the latest completed interaction for efficiency
       const finishedInteraction = interactionsBuffer[idx]
       if (finishedInteraction.isActiveDuring(timestamp)) {
@@ -156,15 +159,15 @@ export class Aggregate extends AggregateBase {
     if (!associatedInteraction) { // no interaction was happening when this ajax started, so give it back to Ajax feature for processing
       handle('returnAjax', [event], undefined, FEATURE_NAMES.ajax, this.ee)
     } else {
-      if (associatedInteraction.status === INTERACTION_STATUS.FIN) processAjax(this.agentRef, event, associatedInteraction) // tack ajax onto the ixn object awaiting harvest
+      if (associatedInteraction.status === INTERACTION_STATUS.FIN) processAjax(event, associatedInteraction) // tack ajax onto the ixn object awaiting harvest
       else { // same thing as above, just at a later time -- if the interaction in progress is cancelled, just send the event back to ajax feat unmodified
-        associatedInteraction.on('finished', () => processAjax(this.agentRef, event, associatedInteraction))
+        associatedInteraction.on('finished', () => processAjax(event, associatedInteraction))
         associatedInteraction.on('cancelled', () => handle('returnAjax', [event], undefined, FEATURE_NAMES.ajax, this.ee))
       }
     }
 
-    function processAjax (agent, event, parentInteraction) {
-      const newNode = new AjaxNode(agent, event)
+    function processAjax (event, parentInteraction) {
+      const newNode = new AjaxNode(event)
       parentInteraction.addChild(newNode)
     }
   }
@@ -205,7 +208,7 @@ export class Aggregate extends AggregateBase {
       if (this.associatedInteraction?.trigger === IPL_TRIGGER_NAME) this.associatedInteraction = null // the api get-interaction method cannot target IPL
       if (!this.associatedInteraction) {
         // This new api-driven interaction will be the target of any subsequent .interaction() call, until it is closed by EITHER .end() OR the regular seenHistoryAndDomChange process.
-        this.associatedInteraction = thisClass.interactionInProgress = new Interaction(thisClass.agentRef, API_TRIGGER_NAME, time, thisClass.latestRouteSetByApi)
+        this.associatedInteraction = thisClass.interactionInProgress = new Interaction(API_TRIGGER_NAME, time, thisClass.latestRouteSetByApi)
         thisClass.domObserver.observe(document.body, { attributes: true, childList: true, subtree: true, characterData: true }) // start observing for DOM changes like a regular UI-driven interaction
         thisClass.setClosureHandlers()
       }

package/src/features/soft_navigations/aggregate/initial-page-load-interaction.js

@@ -11,10 +11,11 @@ import { IPL_TRIGGER_NAME } from '../constants'
 
 export class InitialPageLoadInteraction extends Interaction {
   constructor (agentRef) {
-    super(agentRef, IPL_TRIGGER_NAME, 0, null)
+    super(IPL_TRIGGER_NAME, 0, null)
     this.queueTime = agentRef.info.queueTime
     this.appTime = agentRef.info.applicationTime
-    this.oldURL = document.referrer
+    /** @type {string|undefined} we assign as undefined if no referrer value is available so that URL grouping is not applied to an empty string at ingest */
+    this.oldURL = document.referrer || undefined
   }
 
   get firstPaint () { return firstPaint.current.value }

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

@@ -31,8 +31,8 @@ export class Interaction extends BelNode {
   onDone = []
   cancellationTimer
 
-  constructor (agentRef, uiEvent, uiEventTimestamp, currentRouteKnown, currentUrl) {
-    super(agentRef)
+  constructor (uiEvent, uiEventTimestamp, currentRouteKnown, currentUrl) {
+    super()
     this.belType = NODE_TYPE.INTERACTION
     this.trigger = uiEvent
     this.start = uiEventTimestamp
@@ -83,7 +83,6 @@ export class Interaction extends BelNode {
   #finish (customEndTime = 0) {
     clearTimeout(this.cancellationTimer)
     this.end = Math.max(this.domTimestamp, this.historyTimestamp, customEndTime)
-    this.customAttributes = { ...this.info.jsAttributes, ...this.customAttributes } // attrs specific to this interaction should have precedence over the general custom attrs
     this.status = INTERACTION_STATUS.FIN
 
     // Run all the callbacks awaiting this interaction to finish.
@@ -116,9 +115,15 @@ export class Interaction extends BelNode {
   get firstContentfulPaint () {}
   get navTiming () {}
 
-  serialize (firstStartTimeOfPayload) {
+  /**
+   * Serializes (BEL) the interaction data for transmission.
+   * @param {Number} firstStartTimeOfPayload timestamp
+   * @param {Agent} agentRef Pass in the agent reference directly so that the event itself doesnt need to store the pointers and ruin the evaluation of the event size by including unused object references.
+   * @returns {String} A string that is the serialized representation of this interaction.
+   */
+  serialize (firstStartTimeOfPayload, agentRef) {
     const isFirstIxnOfPayload = firstStartTimeOfPayload === undefined
-    const addString = getAddStringContext(this.obfuscator)
+    const addString = getAddStringContext(agentRef.runtime.obfuscator)
     const nodeList = []
     let ixnType
     if (this.trigger === IPL_TRIGGER_NAME) ixnType = INTERACTION_TYPE.INITIAL_PAGE_LOAD
@@ -145,12 +150,13 @@ export class Interaction extends BelNode {
       addString(this.nodeId),
       nullable(this.firstPaint, numeric, true) + nullable(this.firstContentfulPaint, numeric)
     ]
-    const allAttachedNodes = addCustomAttributes(this.customAttributes || {}, addString) // start with all custom attributes
-    if (this.info.atts) allAttachedNodes.push('a,' + addString(this.info.atts)) // add apm provided attributes
+    const customAttributes = { ...agentRef.info.jsAttributes, ...this.customAttributes } // attrs specific to this interaction should have precedence over the general custom attrs
+    const allAttachedNodes = addCustomAttributes(customAttributes || {}, addString) // start with all custom attributes
+    if (agentRef.info.atts) allAttachedNodes.push('a,' + addString(agentRef.info.atts)) // add apm provided attributes
     /* Querypack encoder+decoder quirkiness:
        - If first ixn node of payload is being processed, its children's start time must be offset by this node's start. (firstStartTime should be undefined.)
        - Else for subsequent ixns in the same payload, we go back to using that first ixn node's start to offset their children's start. */
-    this.children.forEach(node => allAttachedNodes.push(node.serialize(isFirstIxnOfPayload ? this.start : firstStartTimeOfPayload))) // recursively add the serialized string of every child of this (ixn) bel node
+    this.children.forEach(node => allAttachedNodes.push(node.serialize(isFirstIxnOfPayload ? this.start : firstStartTimeOfPayload, agentRef))) // recursively add the serialized string of every child of this (ixn) bel node
 
     fields[1] = numeric(allAttachedNodes.length)
     nodeList.push(fields)

package/src/features/spa/aggregate/interaction.js

@@ -33,7 +33,7 @@ export function Interaction (eventName, timestamp, url, routeName, onFinished, a
   attrs.initialPageURL = initialLocation
   attrs.oldRoute = routeName
   attrs.newURL = url
-  attrs.oldURL = eventName === 'initialPageLoad' ? document.referrer : url
+  attrs.oldURL = eventName === 'initialPageLoad' ? document.referrer || undefined : url // document referrer can return '' and flipper url grouping gets weird with empty strings. Pass undefined to skip flipper.
   attrs.custom = {}
   attrs.store = {}
 }

package/src/features/utils/agent-session.js

@@ -8,6 +8,8 @@ import { registerHandler } from '../../common/event-emitter/register-handler'
 import { SessionEntity } from '../../common/session/session-entity'
 import { LocalStorage } from '../../common/storage/local-storage.js'
 import { DEFAULT_KEY } from '../../common/session/constants'
+import { mergeInfo } from '../../common/config/info'
+import { trackObjectAttributeSize } from '../../common/util/attribute-size'
 
 export function setupAgentSession (agentRef) {
   if (agentRef.runtime.session) return agentRef.runtime.session // already setup
@@ -24,11 +26,20 @@ export function setupAgentSession (agentRef) {
 
   // Retrieve & re-add all of the persisted setCustomAttribute|setUserId k-v from previous page load(s), if any was stored.
   const customSessionData = agentRef.runtime.session.state.custom
-  if (customSessionData) {
+  if (customSessionData && Object.keys(customSessionData).length) {
     /** stored attributes from previous page should not take precedence over attributes stored on this page via API before the page load */
-    agentRef.info.jsAttributes = { ...customSessionData, ...agentRef.info.jsAttributes }
+    agentRef.info = mergeInfo({
+      ...agentRef.info,
+      jsAttributes: {
+        ...customSessionData,
+        ...agentRef.info.jsAttributes
+      }
+    })
   }
 
+  /** track changes to the jsAttributes field over time for aiding with harvest mechanics */
+  agentRef.runtime.jsAttributesMetadata = trackObjectAttributeSize(agentRef.info, 'jsAttributes')
+
   const sharedEE = ee.get(agentRef.agentIdentifier)
 
   // any calls to newrelic.setCustomAttribute(<persisted>) will need to be added to:

package/src/features/utils/aggregate-base.js

@@ -18,6 +18,7 @@ import { EventBuffer } from './event-buffer'
 import { handle } from '../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../metrics/constants'
 import { EventAggregator } from '../../common/aggregate/event-aggregator'
+import { IDEAL_PAYLOAD_SIZE } from '../../common/constants/agent-constants'
 
 export class AggregateBase extends FeatureBase {
   /**
@@ -31,6 +32,11 @@ export class AggregateBase extends FeatureBase {
     this.checkConfiguration(agentRef)
     this.doOnceForAllAggregate(agentRef)
 
+    /** @type {Boolean} indicates if custom attributes are combined in each event payload for size estimation purposes. this is set to true in derived classes that need to evaluate custom attributes separately from the event payload */
+    this.customAttributesAreSeparate = false
+    /** @type {Boolean} indicates if the feature can harvest early. This is set to false in derived classes that need to block early harvests, like ajax under certain conditions */
+    this.canHarvestEarly = true // this is set to false in derived classes that need to block early harvests, like ajax under certain conditions
+
     this.harvestOpts = {} // features aggregate classes can define custom opts for when their harvest is called
 
     const agentEntityGuid = this.agentRef?.runtime?.appMetadata?.agents?.[0]?.entityGuid
@@ -60,17 +66,31 @@ export class AggregateBase extends FeatureBase {
         // Jserror and Metric features uses a singleton EventAggregator instead of a regular EventBuffer.
       case FEATURE_NAMES.jserrors:
       case FEATURE_NAMES.metrics:
-        this.events = this.agentRef.sharedAggregator ??= new EventStoreManager(this.agentRef, EventAggregator, entityGuid, 'shared_aggregator')
+        this.events = this.agentRef.sharedAggregator ??= new EventStoreManager(this.agentRef, EventAggregator, entityGuid, { featureName: 'shared_aggregator' })
         break
         /** All other features get EventBuffer in the ESM by default. Note: PVE is included here, but event buffer will always be empty so future harvests will still not happen by interval or EOL.
     This was necessary to prevent race cond. issues where the event buffer was checked before the feature could "block" itself.
     Its easier to just keep an empty event buffer in place. */
       default:
-        this.events = new EventStoreManager(this.agentRef, EventBuffer, entityGuid, this.featureName)
+        this.events = new EventStoreManager(this.agentRef, EventBuffer, entityGuid, this)
         break
     }
   }
 
+  /**
+   * Evaluates whether a harvest should be made early by estimating the size of the current payload.  Currently, this only happens if the event storage is EventBuffer, since that triggers this method directly.
+   * If conditions are met, a new harvest will be triggered immediately.
+   * @returns void
+   */
+  decideEarlyHarvest () {
+    if (!this.canHarvestEarly) return
+    const estimatedSize = this.events.byteSize() + (this.customAttributesAreSeparate ? this.agentRef.runtime.jsAttributesMetadata.bytes : 0)
+    if (estimatedSize > IDEAL_PAYLOAD_SIZE) {
+      this.agentRef.runtime.harvester.triggerHarvestFor(this)
+      this.reportSupportabilityMetric(`${this.featureName}/Harvest/Early/Seen`, estimatedSize)
+    }
+  }
+
   /**
    * New handler for waiting for multiple flags. Useful when expecting multiple flags simultaneously (ex. stn vs sr)
    * @param {string[]} flagNames

package/src/features/utils/event-buffer.js

@@ -12,10 +12,13 @@ export class EventBuffer {
   #rawBytesBackup
 
   /**
-   * @param {number} maxPayloadSize
+   * Creates an event buffer that can hold feature-processed events.
+   * @param {Number} maxPayloadSize The maximum size of the payload that can be stored in this buffer.
+   * @param {Object} [featureAgg] - the feature aggregate instance
    */
-  constructor (maxPayloadSize = MAX_PAYLOAD_SIZE) {
+  constructor (maxPayloadSize = MAX_PAYLOAD_SIZE, featureAgg) {
     this.maxPayloadSize = maxPayloadSize
+    this.featureAgg = featureAgg
   }
 
   isEmpty () {
@@ -41,9 +44,15 @@ export class EventBuffer {
    */
   add (event) {
     const addSize = stringify(event)?.length || 0 // (estimate) # of bytes a directly stringified event it would take to send
-    if (this.#rawBytes + addSize > this.maxPayloadSize) return false
+    if (this.#rawBytes + addSize > this.maxPayloadSize) {
+      const smTag = inject => `EventBuffer/${inject}/Dropped/Bytes`
+      this.featureAgg?.reportSupportabilityMetric(smTag(this.featureAgg.featureName), addSize) // bytes dropped for this feature will aggregate with this metric tag
+      this.featureAgg?.reportSupportabilityMetric(smTag('Combined'), addSize) // all bytes dropped across all features will aggregate with this metric tag
+      return false
+    }
     this.#buffer.push(event)
     this.#rawBytes += addSize
+    this.featureAgg?.decideEarlyHarvest() // check if we should harvest early with new data
     return true
   }
 

package/src/features/utils/event-store-manager.js

@@ -2,7 +2,7 @@
  * Copyright 2020-2025 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { DEFAULT_KEY } from '../../common/constants/agent-constants'
+import { DEFAULT_KEY, MAX_PAYLOAD_SIZE } from '../../common/constants/agent-constants'
 import { dispatchGlobalEvent } from '../../common/dispatch/global-event'
 import { activatedFeatures } from '../../common/util/feature-flags'
 import { isContainerAgentTarget } from '../../common/util/target'
@@ -15,14 +15,14 @@ export class EventStoreManager {
    * @param {object} agentRef - reference to base agent class
    * @param {EventBuffer|EventAggregator} storageClass - the type of storage to use in this manager; 'EventBuffer' (1), 'EventAggregator' (2)
    * @param {string} [defaultEntityGuid] - the entity guid to use as the default storage instance; if not provided, a new one is created
-   * @param {string} featureName - the name of the feature this manager is for; used for event dispatching
+   * @param {Object} featureAgg - the feature aggregate instance that initialized this manager
    */
-  constructor (agentRef, storageClass, defaultEntityGuid, featureName) {
+  constructor (agentRef, storageClass, defaultEntityGuid, featureAgg) {
     this.agentRef = agentRef
     this.entityManager = agentRef.runtime.entityManager
     this.StorageClass = storageClass
-    this.appStorageMap = new Map([[DEFAULT_KEY, new this.StorageClass()]])
-    this.featureName = featureName
+    this.appStorageMap = new Map([[DEFAULT_KEY, new this.StorageClass(MAX_PAYLOAD_SIZE, featureAgg)]])
+    this.featureAgg = featureAgg
     this.setEventStore(defaultEntityGuid)
   }
 
@@ -42,7 +42,7 @@ export class EventStoreManager {
     /** if the target is the container agent, SHARE the default storage -- otherwise create a new event store */
     const eventStorage = (isContainerAgentTarget(this.entityManager.get(targetEntityGuid), this.agentRef))
       ? this.appStorageMap.get(DEFAULT_KEY)
-      : new this.StorageClass()
+      : new this.StorageClass(MAX_PAYLOAD_SIZE, this.featureAgg)
     this.appStorageMap.set(targetEntityGuid, eventStorage)
   }
 
@@ -75,7 +75,7 @@ export class EventStoreManager {
       drained: !!activatedFeatures?.[this.agentRef.agentIdentifier],
       type: 'data',
       name: 'buffer',
-      feature: this.featureName,
+      feature: this.featureAgg.featureName,
       data: event
     })
     return this.#getEventStore(targetEntityGuid).add(event)