@newrelic/browser-agent 1.296.0 → 1.297.0-rc.0

package/src/features/session_replay/shared/recorder.js

@@ -11,19 +11,15 @@ import { stylesheetEvaluator } from './stylesheet-evaluator'
 import { handle } from '../../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
-import { buildNRMetaNode, customMasker } from './utils'
+import { customMasker } from './utils'
 import { IDEAL_PAYLOAD_SIZE } from '../../../common/constants/agent-constants'
-import { AggregateBase } from '../../utils/aggregate-base'
 import { warn } from '../../../common/util/console'
 import { single } from '../../../common/util/invoke'
+import { registerHandler } from '../../../common/event-emitter/register-handler'
+
+const RRWEB_DATA_CHANNEL = 'rrweb-data'
 
 export class Recorder {
-  /** Each page mutation or event will be stored (raw) in this array. This array will be cleared on each harvest */
-  #events
-  /** Backlog used for a 2-part sliding window to guarantee a 15-30s buffer window */
-  #backloggedEvents
-  /** array of recorder events -- Will be filled only if forced harvest was triggered and harvester does not exist */
-  #preloaded
   /** flag that if true, blocks events from being "stored".  Only set to true when a full snapshot has incomplete nodes (only stylesheets ATM) */
   #fixing = false
 
@@ -34,47 +30,38 @@ export class Recorder {
     this.parent = parent
     /** A flag that can be set to false by failing conversions to stop the fetching process */
     this.shouldFix = this.parent.agentRef.init.session_replay.fix_stylesheets
-    /** Event Buffers */
-    this.#events = new RecorderEvents(this.shouldFix)
-    this.#backloggedEvents = new RecorderEvents(this.shouldFix)
-    this.#preloaded = [new RecorderEvents(this.shouldFix)]
-    /** The pointer to the current bucket holding rrweb events */
-    this.currentBufferTarget = this.#events
-    /** Only set to true once a snapshot node has been processed.  Used to block preload harvests from sending before we know we have a snapshot */
+
+    /** Each page mutation or event will be stored (raw) in this array. This array will be cleared on each harvest */
+    this.events = new RecorderEvents(this.shouldFix)
+    /** Backlog used for a 2-part sliding window to guarantee a 15-30s buffer window */
+    this.backloggedEvents = new RecorderEvents(this.shouldFix)
+    /** Only set to true once a snapshot node has been processed.  Used to block harvests from sending before we know we have a snapshot */
     this.hasSeenSnapshot = false
     /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
     this.lastMeta = false
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     this.stopRecording = () => { this.parent.agentRef.runtime.isRecording = false }
+
+    registerHandler(RRWEB_DATA_CHANNEL, (event, isCheckout) => { this.audit(event, isCheckout) }, this.parent.featureName, this.parent.ee)
   }
 
   getEvents () {
-    if (this.#preloaded[0]?.events.length) {
-      return {
-        ...this.#preloaded[0],
-        events: this.#preloaded[0].events,
-        payloadBytesEstimation: this.#preloaded[0].payloadBytesEstimation,
-        type: 'preloaded'
-      }
-    }
     return {
-      events: [...this.#backloggedEvents.events, ...this.#events.events].filter(x => x),
+      events: [...this.backloggedEvents.events, ...this.events.events].filter(x => x),
       type: 'standard',
-      cycleTimestamp: Math.min(this.#backloggedEvents.cycleTimestamp, this.#events.cycleTimestamp),
-      payloadBytesEstimation: this.#backloggedEvents.payloadBytesEstimation + this.#events.payloadBytesEstimation,
-      hasError: this.#backloggedEvents.hasError || this.#events.hasError,
-      hasMeta: this.#backloggedEvents.hasMeta || this.#events.hasMeta,
-      hasSnapshot: this.#backloggedEvents.hasSnapshot || this.#events.hasSnapshot,
-      inlinedAllStylesheets: (!!this.#backloggedEvents.events.length && this.#backloggedEvents.inlinedAllStylesheets) || this.#events.inlinedAllStylesheets
+      cycleTimestamp: Math.min(this.backloggedEvents.cycleTimestamp, this.events.cycleTimestamp),
+      payloadBytesEstimation: this.backloggedEvents.payloadBytesEstimation + this.events.payloadBytesEstimation,
+      hasError: this.backloggedEvents.hasError || this.events.hasError,
+      hasMeta: this.backloggedEvents.hasMeta || this.events.hasMeta,
+      hasSnapshot: this.backloggedEvents.hasSnapshot || this.events.hasSnapshot,
+      inlinedAllStylesheets: (!!this.backloggedEvents.events.length && this.backloggedEvents.inlinedAllStylesheets) || this.events.inlinedAllStylesheets
     }
   }
 
-  /** Clears the buffer (this.#events), and resets all payload metadata properties */
+  /** Clears the buffer (this.events), and resets all payload metadata properties */
   clearBuffer () {
-    if (this.#preloaded[0]?.events.length) this.#preloaded.shift()
-    else if (this.parent.mode === MODE.ERROR) this.#backloggedEvents = this.#events
-    else this.#backloggedEvents = new RecorderEvents(this.shouldFix)
-    this.#events = new RecorderEvents(this.shouldFix)
+    this.backloggedEvents = (this.parent.mode === MODE.ERROR) ? this.events : new RecorderEvents(this.shouldFix)
+    this.events = new RecorderEvents(this.shouldFix)
   }
 
   /** Begin recording using configured recording lib */
@@ -87,7 +74,7 @@ export class Recorder {
     let stop
     try {
       stop = recorder({
-        emit: this.audit.bind(this),
+        emit: (event, isCheckout) => { handle(RRWEB_DATA_CHANNEL, [event, isCheckout], undefined, this.parent.featureName, this.parent.ee) },
         blockClass: block_class,
         ignoreClass: ignore_class,
         maskTextClass: mask_text_class,
@@ -126,7 +113,7 @@ export class Recorder {
     /** only run the full fixing behavior (more costly) if fix_stylesheets is configured as on (default behavior) */
     if (!this.shouldFix) {
       if (incompletes > 0) {
-        this.currentBufferTarget.inlinedAllStylesheets = false
+        this.events.inlinedAllStylesheets = false
         this.#warnCSSOnce()
         handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee)
       }
@@ -138,7 +125,7 @@ export class Recorder {
       /** wait for the evaluator to download/replace the incompletes' src code and then take a new snap */
       stylesheetEvaluator.fix().then((failedToFix) => {
         if (failedToFix > 0) {
-          this.currentBufferTarget.inlinedAllStylesheets = false
+          this.events.inlinedAllStylesheets = false
           this.shouldFix = false
         }
         handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
@@ -152,19 +139,12 @@ export class Recorder {
     if (!this.#fixing) this.store(event, isCheckout)
   }
 
-  /** Store a payload in the buffer (this.#events).  This should be the callback to the recording lib noticing a mutation */
+  /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
   store (event, isCheckout) {
-    if (!event) return
-
-    if (!(this.parent instanceof AggregateBase) && this.#preloaded.length) this.currentBufferTarget = this.#preloaded[this.#preloaded.length - 1]
-    else this.currentBufferTarget = this.#events
+    if (!event || this.parent.blocked) return
 
-    if (this.parent.blocked) return
-
-    if (this.parent.timeKeeper?.ready && !event.__newrelic) {
-      event.__newrelic = buildNRMetaNode(event.timestamp, this.parent.timeKeeper)
-      event.timestamp = this.parent.timeKeeper.correctAbsoluteTimestamp(event.timestamp)
-    }
+    /** because we've waited until draining to process the buffered rrweb events, we can guarantee the timekeeper exists */
+    event.timestamp = this.parent.timeKeeper.correctAbsoluteTimestamp(event.timestamp)
     event.__serialized = stringify(event)
     const eventBytes = event.__serialized.length
     /** The estimated size of the payload after compression */
@@ -179,26 +159,18 @@ export class Recorder {
     }
 
     // meta event
-    if (event.type === RRWEB_EVENT_TYPES.Meta) {
-      this.currentBufferTarget.hasMeta = true
-    }
+    this.events.hasMeta ||= event.type === RRWEB_EVENT_TYPES.Meta
     // snapshot event
-    if (event.type === RRWEB_EVENT_TYPES.FullSnapshot) {
-      this.currentBufferTarget.hasSnapshot = true
-      this.hasSeenSnapshot = true
-    }
-    this.currentBufferTarget.add(event)
+    this.events.hasSnapshot ||= this.hasSeenSnapshot ||= event.type === RRWEB_EVENT_TYPES.FullSnapshot
+
+    //* dont let the EventBuffer class double evaluate the event data size, it's a performance burden and we have special reasons to do it outside the event buffer */
+    this.events.add(event, eventBytes)
 
     // We are making an effort to try to keep payloads manageable for unloading.  If they reach the unload limit before their interval,
     // it will send immediately.  This often happens on the first snapshot, which can be significantly larger than the other payloads.
-    if (((event.type === RRWEB_EVENT_TYPES.FullSnapshot && this.currentBufferTarget.hasMeta) || payloadSize > IDEAL_PAYLOAD_SIZE) && this.parent.mode === MODE.FULL) {
-      // if we've made it to the ideal size of ~64kb before the interval timer, we should send early.
-      if (this.parent instanceof AggregateBase) {
-        this.parent.agentRef.runtime.harvester.triggerHarvestFor(this.parent)
-      } else {
-        // we are still in "preload" and it triggered a "stop point".  Make a new set, which will get pointed at on next cycle
-        this.#preloaded.push(new RecorderEvents(this.shouldFix))
-      }
+    if (((this.events.hasSnapshot && this.events.hasMeta) || payloadSize > IDEAL_PAYLOAD_SIZE) && this.parent.mode === MODE.FULL) {
+      // if we've made it to the ideal size of ~16kb before the interval timer, we should send early.
+      this.parent.agentRef.runtime.harvester.triggerHarvestFor(this.parent)
     }
   }
 
@@ -213,13 +185,13 @@ export class Recorder {
   }
 
   clearTimestamps () {
-    this.currentBufferTarget.cycleTimestamp = undefined
+    this.events.cycleTimestamp = undefined
   }
 
   /** Estimate the payload size */
   getPayloadSize (newBytes = 0) {
     // the query param padding constant gives us some padding for the other metadata to be safely injected
-    return this.estimateCompression(this.currentBufferTarget.payloadBytesEstimation + newBytes) + QUERY_PARAM_PADDING
+    return this.estimateCompression(this.events.payloadBytesEstimation + newBytes) + QUERY_PARAM_PADDING
   }
 
   /** Extensive research has yielded about an 88% compression factor on these payloads.

package/src/features/session_replay/shared/utils.js

@@ -4,7 +4,6 @@
  */
 import { gosNREUMOriginals } from '../../../common/window/nreum'
 import { canEnableSessionTracking } from '../../utils/feature-gates'
-import { originTime } from '../../../common/constants/runtime'
 
 export function hasReplayPrerequisite (agentInit) {
   return !!gosNREUMOriginals().o.MO && // Session Replay cannot work without Mutation Observer
@@ -16,18 +15,6 @@ export function isPreloadAllowed (agentInit) {
   return agentInit?.session_replay.preload === true && hasReplayPrerequisite(agentInit)
 }
 
-export function buildNRMetaNode (timestamp, timeKeeper) {
-  const correctedTimestamp = timeKeeper.correctAbsoluteTimestamp(timestamp)
-  return {
-    originalTimestamp: timestamp,
-    correctedTimestamp,
-    timestampDiff: timestamp - correctedTimestamp,
-    originTime,
-    correctedOriginTime: timeKeeper.correctedOriginTime,
-    originTimeDiff: Math.floor(originTime - timeKeeper.correctedOriginTime)
-  }
-}
-
 export function customMasker (text, element) {
   try {
     if (typeof element?.type === 'string') {

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

@@ -35,7 +35,9 @@ export class AggregateBase extends FeatureBase {
     /** @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.canHarvestEarly = true
+    /** @type {Boolean} indicates if the feature is actively in a retry deferral period */
+    this.isRetrying = false
 
     this.harvestOpts = {} // features aggregate classes can define custom opts for when their harvest is called
 
@@ -82,7 +84,7 @@ export class AggregateBase extends FeatureBase {
    * @returns void
    */
   decideEarlyHarvest () {
-    if (!this.canHarvestEarly) return
+    if (!this.canHarvestEarly || this.blocked || this.isRetrying) 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)
@@ -169,8 +171,8 @@ export class AggregateBase extends FeatureBase {
    * @param {boolean=} result.retry - whether the harvest should be retried
    */
   postHarvestCleanup (result = {}) {
-    const harvestFailed = result.sent && result.retry
-    if (harvestFailed) this.events.reloadSave(this.harvestOpts, result.targetApp?.entityGuid)
+    this.isRetrying = result.sent && result.retry
+    if (this.isRetrying) this.events.reloadSave(this.harvestOpts, result.targetApp?.entityGuid)
     this.events.clearSave(this.harvestOpts, result.targetApp?.entityGuid)
   }
 

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

@@ -44,10 +44,11 @@ export class EventBuffer {
   /**
    * Add feature-processed event to our buffer. If this event would cause our total raw size to exceed the set max payload size, it is dropped.
    * @param {any} event - any primitive type or object
+   * @param {number} [evaluatedSize] - the evalated size of the event, if already done so before storing in the event buffer
    * @returns {Boolean} true if successfully added; false otherwise
    */
-  add (event) {
-    const addSize = stringify(event)?.length || 0 // (estimate) # of bytes a directly stringified event it would take to send
+  add (event, evaluatedSize) {
+    const addSize = evaluatedSize || stringify(event)?.length || 0 // (estimate) # of bytes a directly stringified event it would take to send
     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