@newrelic/browser-agent 1.297.0 → 1.297.1-rc.1

package/src/common/wrap/wrap-function.js

@@ -11,6 +11,7 @@ import { ee } from '../event-emitter/contextual-ee'
 import { bundleId } from '../ids/bundle-id'
 
 export const flag = `nr@original:${bundleId}`
+const LONG_TASK_THRESHOLD = 50
 
 /**
  * A convenience alias of `hasOwnProperty`.
@@ -95,7 +96,7 @@ export function createWrapperWithEmitter (emitter, always) {
       safeEmit(prefix + 'start', [args, originalThis, methodName], ctx, bubble)
 
       const fnStartTime = performance.now()
-      let fnEndTime = fnStartTime
+      let fnEndTime
       try {
         result = fn.apply(originalThis, args)
         fnEndTime = performance.now()
@@ -109,16 +110,20 @@ export function createWrapperWithEmitter (emitter, always) {
       } finally {
         const duration = fnEndTime - fnStartTime
         const task = {
+          start: fnStartTime,
+          end: fnEndTime,
           duration,
-          isLongTask: duration >= 50,
+          isLongTask: duration >= LONG_TASK_THRESHOLD,
           methodName,
           thrownError
           // could add more properties here later if needed by downstream features
         }
         // standalone long task message
-        if (task.isLongTask) safeEmit('long-task', [task], ctx, bubble)
+        if (task.isLongTask) {
+          safeEmit('long-task', [task, originalThis], ctx, bubble)
+        }
         // -end message also includes the task execution info
-        safeEmit(prefix + 'end', [args, originalThis, result, task], ctx, bubble)
+        safeEmit(prefix + 'end', [args, originalThis, result], ctx, bubble)
       }
     }
   }

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

@@ -11,6 +11,7 @@ import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { parseGQL } from './gql'
 import { nullable, numeric, getAddStringContext, addCustomAttributes } from '../../../common/serialize/bel-serializer'
+import { gosNREUMOriginals } from '../../../common/window/nreum'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -45,6 +46,13 @@ export class Aggregate extends AggregateBase {
       classThis.storeXhr(...arguments, this) // this switches the context back to the class instance while passing the NR context as an argument -- see "ctx" in storeXhr
     }, this.featureName, this.ee)
 
+    this.ee.on('long-task', (task, originator) => {
+      if (originator instanceof gosNREUMOriginals().o.XHR) { // any time a long task from XHR callback is observed, update the end time for soft nav use
+        const xhrMetadata = this.ee.context(originator)
+        xhrMetadata.latestLongtaskEnd = task.end
+      }
+    })
+
     this.waitForFlags(([])).then(() => this.drain())
   }
 
@@ -113,8 +121,8 @@ export class Aggregate extends AggregateBase {
     if (event.gql) this.reportSupportabilityMetric('Ajax/Events/GraphQL/Bytes-Added', stringify(event.gql).length)
 
     const softNavInUse = Boolean(this.agentRef.features?.[FEATURE_NAMES.softNav])
-    if (softNavInUse) { // For newer soft nav (when running), pass the event to it for evaluation -- either part of an interaction or is given back
-      handle('ajax', [event], undefined, FEATURE_NAMES.softNav, this.ee)
+    if (softNavInUse) { // For newer soft nav (when running), pass the event w/ info to it for evaluation -- either part of an interaction or is given back
+      handle('ajax', [event, ctx], undefined, FEATURE_NAMES.softNav, this.ee)
     } else if (ctx.spaNode) { // For old spa (when running), if the ajax happened inside an interaction, hold it until the interaction finishes
       const interactionId = ctx.spaNode.interaction.id
       this.underSpaEvents[interactionId] ??= []

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

@@ -96,6 +96,7 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     ctx.loadCaptureCalled = false
     ctx.params = this.params || {}
     ctx.metrics = this.metrics || {}
+    ctx.latestLongtaskEnd = 0
 
     xhr.addEventListener('load', function (event) {
       captureXhrData(ctx, xhr)

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

@@ -43,8 +43,8 @@ export class Aggregate extends AggregateBase {
 
     register('err', (...args) => this.storeError(...args), this.featureName, this.ee)
     register('ierr', (...args) => this.storeError(...args), this.featureName, this.ee)
-    register('softNavFlush', (interactionId, wasFinished, softNavAttrs) =>
-      this.onSoftNavNotification(interactionId, wasFinished, softNavAttrs), this.featureName, this.ee) // when an ixn is done or cancelled
+    register('softNavFlush', (interactionId, wasFinished, softNavAttrs, interactionEndTime) =>
+      this.onSoftNavNotification(interactionId, wasFinished, softNavAttrs, interactionEndTime), this.featureName, this.ee) // when an ixn is done or cancelled
 
     this.harvestOpts.aggregatorTypes = ['err', 'ierr', 'xhr'] // the types in EventAggregator this feature cares about
 
@@ -292,12 +292,16 @@ export class Aggregate extends AggregateBase {
     delete this.bufferedErrorsUnderSpa[interaction.id]
   }
 
-  onSoftNavNotification (interactionId, wasFinished, softNavAttrs) {
+  onSoftNavNotification (interactionId, wasFinished, softNavAttrs, interactionEndTime) {
     if (this.blocked) return
 
-    this.bufferedErrorsUnderSpa[interactionId]?.forEach(jsErrorEvent =>
-      this.#storeJserrorForHarvest(jsErrorEvent, wasFinished, softNavAttrs) // this should not modify the re-used softNavAttrs contents
-    )
+    this.bufferedErrorsUnderSpa[interactionId]?.forEach(jsErrorEvent => { // this should not modify the re-used softNavAttrs contents
+      if (!wasFinished) return this.#storeJserrorForHarvest(jsErrorEvent, false, softNavAttrs)
+
+      const startTime = jsErrorEvent[3].time // in storeError fn, the newMetrics obj contains the time passed to & used by SN to seek the ixn
+      if (startTime > interactionEndTime) return this.#storeJserrorForHarvest(jsErrorEvent, false, softNavAttrs) // disassociate any error that ultimately falls outside the final ixn span
+      return this.#storeJserrorForHarvest(jsErrorEvent, true, softNavAttrs)
+    })
     delete this.bufferedErrorsUnderSpa[interactionId] // wipe the list of jserrors so they aren't duplicated by another call to the same id
   }
 }

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

@@ -43,8 +43,10 @@ export class Aggregate extends AggregateBase {
     /** set at BCS response, stored in runtime */
     this.timeKeeper = undefined
 
-    this.recorder = args?.recorder
-    this.errorNoticed = args?.errorNoticed || false
+    this.instrumentClass = args
+    // point this var here just in case it already exists and can be used by APIs (session pause, resume, etc.) before handling rum flags
+    this.recorder = this.instrumentClass?.recorder
+
     this.harvestOpts.raw = true
 
     this.isSessionTrackingEnabled = canEnableSessionTracking(agentRef.init) && !!agentRef.runtime.session
@@ -64,7 +66,7 @@ export class Aggregate extends AggregateBase {
       // if the mode changed on a different tab, it needs to update this instance to match
       this.mode = agentRef.runtime.session.state.sessionReplayMode
       if (!this.initialized || this.mode === MODE.OFF) return
-      this.recorder?.startRecording()
+      this.recorder?.startRecording(TRIGGERS.RESUME, this.mode)
     })
 
     this.ee.on(SESSION_EVENTS.UPDATE, (type, data) => {
@@ -131,7 +133,7 @@ export class Aggregate extends AggregateBase {
     this.mode = MODE.FULL
     // if the error was noticed AFTER the recorder was already imported....
     if (this.recorder && this.initialized) {
-      if (!this.agentRef.runtime.isRecording) this.recorder.startRecording()
+      if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(TRIGGERS.SWITCH_TO_FULL, this.mode) // off --> full
       this.syncWithSessionManager({ sessionReplayMode: this.mode })
     } else {
       this.initializeRecording(MODE.FULL, true)
@@ -142,9 +144,10 @@ export class Aggregate extends AggregateBase {
    * Evaluate entitlements and sampling before starting feature mechanics, importing and configuring recording library, and setting storage state
    * @param {boolean} srMode - the true/false state of the "sr" flag (aka. entitlements) from RUM response
    * @param {boolean} ignoreSession - whether to force the method to ignore the session state and use just the sample flags
+   * @param {TRIGGERS} [trigger=TRIGGERS.INITIALIZE] - the trigger that initiated the recording.  Usually TRIGGERS.INITIALIZE, but could be TRIGGERS.API since in certain cases that trigger calls this method
    * @returns {void}
    */
-  async initializeRecording (srMode, ignoreSession) {
+  async initializeRecording (srMode, ignoreSession, trigger = TRIGGERS.INITIALIZE) {
     this.initialized = true
     if (!this.entitled) return
 
@@ -156,7 +159,8 @@ export class Aggregate extends AggregateBase {
     // session replays can continue if already in progress
     const { session, timeKeeper } = this.agentRef.runtime
     this.timeKeeper = timeKeeper
-    if (this.recorder?.parent.trigger === TRIGGERS.API && this.agentRef.runtime.isRecording) {
+
+    if (this.recorder?.trigger === TRIGGERS.API && this.agentRef.runtime.isRecording) {
       this.mode = MODE.FULL
     } else if (!session.isNew && !ignoreSession) { // inherit the mode of the existing session
       this.mode = session.state.sessionReplayMode
@@ -167,21 +171,16 @@ export class Aggregate extends AggregateBase {
     // If off, then don't record (early return)
     if (this.mode === MODE.OFF) return
 
-    if (!this.recorder) {
-      try {
-        // 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.events.hasError = this.errorNoticed
-      } catch (err) {
-        return this.abort(ABORT_REASONS.IMPORT)
-      }
-    } else {
-      this.recorder.parent = this
+    try {
+      /** will return a recorder instance if already imported, otherwise, will fetch the recorder and initialize it */
+      this.recorder ??= await this.instrumentClass.importRecorder()
+    } catch (err) {
+      /** if the recorder fails to import, abort the feature */
+      return this.abort(ABORT_REASONS.IMPORT, err)
     }
 
     // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
-    if (this.mode === MODE.ERROR && this.errorNoticed) this.mode = MODE.FULL
+    if (this.mode === MODE.ERROR && this.instrumentClass.errorNoticed) { this.mode = MODE.FULL }
 
     // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
     // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
@@ -189,7 +188,7 @@ export class Aggregate extends AggregateBase {
 
     await this.prepUtils()
 
-    if (!this.agentRef.runtime.isRecording) this.recorder.startRecording()
+    if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(trigger, this.mode)
 
     this.syncWithSessionManager({ sessionReplayMode: this.mode })
   }

package/src/features/session_replay/constants.js

@@ -54,5 +54,9 @@ export const ABORT_REASONS = {
 export const QUERY_PARAM_PADDING = 5000
 
 export const TRIGGERS = {
-  API: 'api'
+  API: 'api',
+  RESUME: 'resume',
+  SWITCH_TO_FULL: 'switchToFull',
+  INITIALIZE: 'initialize',
+  PRELOAD: 'preload'
 }

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

@@ -16,9 +16,11 @@ import { setupPauseReplayAPI } from '../../../loaders/api/pauseReplay'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
+  /** @type {Promise|undefined} A promise that resolves when the recorder module is imported and added to the class. Undefined if the recorder has never been staged to import with `importRecorder`. */
+  #stagedImport
+  /** The RRWEB recorder instance, if imported */
+  recorder
 
-  #mode
-  #agentRef
   constructor (agentRef) {
     super(agentRef, FEATURE_NAME)
 
@@ -27,7 +29,6 @@ export class Instrument extends InstrumentBase {
     setupPauseReplayAPI(agentRef)
 
     let session
-    this.#agentRef = agentRef
     try {
       session = JSON.parse(localStorage.getItem(`${PREFIX}_${DEFAULT_KEY}`))
     } catch (err) { }
@@ -37,15 +38,17 @@ export class Instrument extends InstrumentBase {
     }
 
     if (this.#canPreloadRecorder(session)) {
-      this.#mode = session?.sessionReplayMode
-      this.#preloadStartRecording()
-    } else {
-      this.importAggregator(this.#agentRef, () => import(/* webpackChunkName: "session_replay-aggregate" */ '../aggregate'))
+      this.importRecorder().then(recorder => {
+        recorder.startRecording(TRIGGERS.PRELOAD, session?.sessionReplayMode)
+      }) // could handle specific fail-state behaviors with a .catch block here
     }
 
+    this.importAggregator(this.agentRef, () => import(/* webpackChunkName: "session_replay-aggregate" */ '../aggregate'), this)
+
     /** If the recorder is running, we can pass error events on to the agg to help it switch to full mode later */
     this.ee.on('err', (e) => {
-      if (this.#agentRef.runtime.isRecording) {
+      if (this.blocked) return
+      if (this.agentRef.runtime.isRecording) {
         this.errorNoticed = true
         handle(SR_EVENT_EMITTER_TYPES.ERROR_DURING_REPLAY, [e], undefined, this.featureName, this.ee)
       }
@@ -57,54 +60,50 @@ export class Instrument extends InstrumentBase {
     if (!session) { // this might be a new session if entity initializes: conservatively start recording if first-time config allows
       // Note: users with SR enabled, as well as these other configs enabled by-default, will be penalized by the recorder overhead EVEN IF they don't actually have or get
       // entitlement or sampling decision, or otherwise intentionally opted-in for the feature.
-      return isPreloadAllowed(this.#agentRef.init)
+      return isPreloadAllowed(this.agentRef.init)
     } else if (session.sessionReplayMode === MODE.FULL || session.sessionReplayMode === MODE.ERROR) {
       return true // existing sessions get to continue recording, regardless of this page's configs or if it has expired (conservatively)
     } else { // SR mode was OFF but may potentially be turned on if session resets and configs allows the new session to have replay...
-      return isPreloadAllowed(this.#agentRef.init)
+      return isPreloadAllowed(this.agentRef.init)
     }
   }
 
-  #alreadyStarted = false
   /**
-   * 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.
+   * Returns a promise that imports the recorder module. Only lets the recorder module be imported and instantiated once. Rejects if failed to import/instantiate.
+   * @returns {Promise}
    */
-  async #preloadStartRecording (trigger) {
-    if (this.#alreadyStarted) return
-    this.#alreadyStarted = true
-
-    try {
-      const { Recorder } = (await import(/* webpackChunkName: "recorder" */'../shared/recorder'))
+  importRecorder () {
+    /** if we already have a recorder fully set up, just return it */
+    if (this.recorder) return Promise.resolve(this.recorder)
+    /** conditional -- if we have never started importing, stage the import and store it in state */
+    this.#stagedImport ??= import(/* webpackChunkName: "recorder" */'../shared/recorder')
+      .then(({ Recorder }) => {
+        this.recorder = new Recorder(this)
+        /** return the recorder for promise chaining */
+        return this.recorder
+      })
+      .catch(err => {
+        this.ee.emit('internal-error', [err])
+        this.blocked = true
+        /** return the err for promise chaining */
+        throw err
+      })
 
-      // 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({ ...this, mode: this.#mode, agentRef: this.#agentRef, trigger, timeKeeper: this.#agentRef.runtime.timeKeeper }) // if TK exists due to deferred state, pass it
-      this.recorder.startRecording()
-      this.abortHandler = this.recorder.stopRecording
-    } catch (err) {
-      this.parent.ee.emit('internal-error', [err])
-    }
-    this.importAggregator(this.#agentRef, () => import(/* webpackChunkName: "session_replay-aggregate" */ '../aggregate'), { recorder: this.recorder, errorNoticed: this.errorNoticed })
+    return this.#stagedImport
   }
 
   /**
    * Called whenever startReplay API is used. That could occur any time, pre or post load.
    */
   #apiStartOrRestartReplay () {
+    if (this.blocked) return
     if (this.featAggregate) { // post-load; there's possibly already an ongoing recording
-      if (this.featAggregate.mode !== MODE.FULL) this.featAggregate.initializeRecording(MODE.FULL, true)
-    } else { // pre-load
-      this.#mode = MODE.FULL
-      this.#preloadStartRecording(TRIGGERS.API)
-      // 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.
-      if (this.recorder && this.recorder.parent.mode !== MODE.FULL) {
-        this.recorder.parent.mode = MODE.FULL
-        this.recorder.stopRecording()
-        this.recorder.startRecording()
-        this.abortHandler = this.recorder.stopRecording
-      }
+      if (this.featAggregate.mode !== MODE.FULL) this.featAggregate.initializeRecording(MODE.FULL, true, TRIGGERS.API)
+    } else {
+      this.importRecorder()
+        .then(() => {
+          this.recorder.startRecording(TRIGGERS.API, MODE.FULL)
+        }) // could handle specific fail-state behaviors with a .catch block here
     }
   }
 }

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

@@ -12,7 +12,7 @@ import { handle } from '../../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { customMasker } from './utils'
-import { IDEAL_PAYLOAD_SIZE } from '../../../common/constants/agent-constants'
+import { IDEAL_PAYLOAD_SIZE, SESSION_ERROR } from '../../../common/constants/agent-constants'
 import { warn } from '../../../common/util/console'
 import { single } from '../../../common/util/invoke'
 import { registerHandler } from '../../../common/event-emitter/register-handler'
@@ -25,11 +25,21 @@ export class Recorder {
 
   #warnCSSOnce = single(() => warn(47)) // notifies user of potential replayer issue if fix_stylesheets is off
 
-  constructor (parent) {
-    /** The parent class that instantiated the recorder */
-    this.parent = parent
+  #canRecord = true
+
+  triggerHistory = [] // useful for debugging
+
+  constructor (srInstrument) {
+    /** The parent classes that share the recorder */
+    this.srInstrument = srInstrument
+    // --- shortcuts
+    this.ee = srInstrument.ee
+    this.srFeatureName = srInstrument.featureName
+    this.agentRef = srInstrument.agentRef
+
+    this.isErrorMode = false
     /** 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
+    this.shouldFix = this.agentRef.init.session_replay.fix_stylesheets
 
     /** 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)
@@ -40,9 +50,18 @@ export class Recorder {
     /** 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 }
+    this.stopRecording = () => { this.agentRef.runtime.isRecording = false }
 
-    registerHandler(RRWEB_DATA_CHANNEL, (event, isCheckout) => { this.audit(event, isCheckout) }, this.parent.featureName, this.parent.ee)
+    registerHandler(SESSION_ERROR, () => {
+      this.#canRecord = false
+      this.stopRecording()
+    }, this.srFeatureName, this.ee)
+
+    registerHandler(RRWEB_DATA_CHANNEL, (event, isCheckout) => { this.audit(event, isCheckout) }, this.srFeatureName, this.ee)
+  }
+
+  get trigger () {
+    return this.triggerHistory[this.triggerHistory.length - 1]
   }
 
   getEvents () {
@@ -60,21 +79,29 @@ export class Recorder {
 
   /** Clears the buffer (this.events), and resets all payload metadata properties */
   clearBuffer () {
-    this.backloggedEvents = (this.parent.mode === MODE.ERROR) ? this.events : new RecorderEvents(this.shouldFix)
+    this.backloggedEvents = (this.isErrorMode) ? this.events : new RecorderEvents(this.shouldFix)
     this.events = new RecorderEvents(this.shouldFix)
   }
 
   /** Begin recording using configured recording lib */
-  startRecording () {
-    this.parent.agentRef.runtime.isRecording = true
-    const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs, inline_images, collect_fonts } = this.parent.agentRef.init.session_replay
+  startRecording (trigger, mode) {
+    if (!this.#canRecord) return
+    this.triggerHistory.push(trigger) // keep track of all triggers, useful for lifecycle debugging.  "this.trigger" returns the latest entry
+
+    this.isErrorMode = mode === MODE.ERROR
+
+    /** if the recorder is already recording... lets stop it before starting a new one */
+    this.stopRecording()
+
+    this.agentRef.runtime.isRecording = true
+    const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs, inline_images, collect_fonts } = this.agentRef.init.session_replay
 
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
     let stop
     try {
       stop = recorder({
-        emit: (event, isCheckout) => { handle(RRWEB_DATA_CHANNEL, [event, isCheckout], undefined, this.parent.featureName, this.parent.ee) },
+        emit: (event, isCheckout) => { handle(RRWEB_DATA_CHANNEL, [event, isCheckout], undefined, this.srFeatureName, this.ee) },
         blockClass: block_class,
         ignoreClass: ignore_class,
         maskTextClass: mask_text_class,
@@ -87,15 +114,15 @@ export class Recorder {
         inlineStylesheet: true,
         inlineImages: inline_images,
         collectFonts: collect_fonts,
-        checkoutEveryNms: CHECKOUT_MS[this.parent.mode],
+        checkoutEveryNms: CHECKOUT_MS[mode],
         recordAfter: 'DOMContentLoaded'
       })
     } catch (err) {
-      this.parent.ee.emit('internal-error', [err])
+      this.ee.emit('internal-error', [err])
     }
 
     this.stopRecording = () => {
-      this.parent.agentRef.runtime.isRecording = false
+      this.agentRef.runtime.isRecording = false
       stop?.()
     }
   }
@@ -108,14 +135,14 @@ export class Recorder {
    */
   audit (event, isCheckout) {
     /** An count of stylesheet objects that were blocked from accessing contents via JS */
-    const incompletes = this.parent.agentRef.init.session_replay.fix_stylesheets ? stylesheetEvaluator.evaluate() : 0
+    const incompletes = this.agentRef.init.session_replay.fix_stylesheets ? stylesheetEvaluator.evaluate() : 0
     const missingInlineSMTag = 'SessionReplay/Payload/Missing-Inline-Css/'
     /** only run the full fixing behavior (more costly) if fix_stylesheets is configured as on (default behavior) */
     if (!this.shouldFix) {
       if (incompletes > 0) {
         this.events.inlinedAllStylesheets = false
         this.#warnCSSOnce()
-        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.ee)
       }
       return this.store(event, isCheckout)
     }
@@ -128,8 +155,8 @@ export class Recorder {
           this.events.inlinedAllStylesheets = false
           this.shouldFix = false
         }
-        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
-        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.ee)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.ee)
         this.takeFullSnapshot()
       })
       /** Only start ignoring data if got a faulty snapshot */
@@ -141,10 +168,10 @@ export class Recorder {
 
   /** 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 || this.parent.blocked) return
+    if (!event || this.srInstrument.featAggregate?.blocked) return
 
     /** 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.timestamp = this.agentRef.runtime.timeKeeper.correctAbsoluteTimestamp(event.timestamp)
     event.__serialized = stringify(event)
     const eventBytes = event.__serialized.length
     /** The estimated size of the payload after compression */
@@ -153,7 +180,7 @@ export class Recorder {
     // to help reconstruct the replay later and must be included.  While waiting and buffering for errors to come through,
     // each time we see a new checkout, we can drop the old data.
     // we need to check for meta because rrweb will flag it as checkout twice, once for meta, then once for snapshot
-    if (this.parent.mode === MODE.ERROR && isCheckout && event.type === RRWEB_EVENT_TYPES.Meta) {
+    if (this.isErrorMode && isCheckout && event.type === RRWEB_EVENT_TYPES.Meta) {
       // we are still waiting for an error to throw, so keep wiping the buffer over time
       this.clearBuffer()
     }
@@ -168,16 +195,16 @@ export class Recorder {
 
     // 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 (((this.events.hasSnapshot && this.events.hasMeta) || payloadSize > IDEAL_PAYLOAD_SIZE) && this.parent.mode === MODE.FULL) {
+    if (((this.events.hasSnapshot && this.events.hasMeta) || payloadSize > IDEAL_PAYLOAD_SIZE) && !this.isErrorMode) {
       // 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)
+      this.agentRef.runtime.harvester.triggerHarvestFor(this.srInstrument.featAggregate)
     }
   }
 
   /** force the recording lib to take a full DOM snapshot.  This needs to occur in certain cases, like visibility changes */
   takeFullSnapshot () {
     try {
-      if (!this.parent.agentRef.runtime.isRecording) return
+      if (!this.agentRef.runtime.isRecording) return
       recorder.takeFullSnapshot()
     } catch (err) {
       // in the off chance we think we are recording, but rrweb does not, rrweb's lib will throw an error.  This catch is just a precaution
@@ -199,7 +226,7 @@ export class Recorder {
    * https://staging.onenr.io/037jbJWxbjy
    * */
   estimateCompression (data) {
-    if (!!this.parent.gzipper && !!this.parent.u8) return data * AVG_COMPRESSION
+    if (!!this.srInstrument.featAggregate?.gzipper && !!this.srInstrument.featAggregate?.u8) return data * AVG_COMPRESSION
     return data
   }
 }

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

@@ -7,7 +7,7 @@ import { NODE_TYPE } from '../constants'
 import { BelNode } from './bel-node'
 
 export class AjaxNode extends BelNode {
-  constructor (ajaxEvent) {
+  constructor (ajaxEvent, ajaxContext) {
     super()
     this.belType = NODE_TYPE.AJAX
     this.method = ajaxEvent.method
@@ -22,8 +22,12 @@ export class AjaxNode extends BelNode {
     this.spanTimestamp = ajaxEvent.spanTimestamp
     this.gql = ajaxEvent.gql
 
-    this.start = ajaxEvent.startTime // 5000 --- 5500 --> 10500
+    this.start = ajaxEvent.startTime
     this.end = ajaxEvent.endTime
+    if (ajaxContext?.latestLongtaskEnd) {
+      this.callbackEnd = Math.max(ajaxContext.latestLongtaskEnd, this.end) // typically lt end if non-zero, but added clamping to end just in case
+      this.callbackDuration = this.callbackEnd - this.end // callbackDuration is the time from ajax loaded to last long task observed from it
+    } else this.callbackEnd = this.end // if no long task was observed, callbackEnd is the same as end
   }
 
   serialize (parentStartTimestamp, agentRef) {
@@ -36,8 +40,8 @@ export class AjaxNode extends BelNode {
       0, // this will be overwritten below with number of attached nodes
       numeric(this.start - parentStartTimestamp), // start relative to parent start (if part of first node in payload) or first parent start
       numeric(this.end - this.start), // end is relative to start
-      numeric(this.callbackEnd),
-      numeric(this.callbackDuration),
+      numeric(this.callbackEnd - this.end), // callbackEnd is relative to end
+      numeric(this.callbackDuration), // not relative
       addString(this.method),
       numeric(this.status),
       addString(this.domain),