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

package/dist/esm/features/session_replay/aggregate/index.js

@@ -41,8 +41,9 @@ export class Aggregate extends AggregateBase {
     this.entitled = false;
     /** 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;
     this.reportSupportabilityMetric('Config/SessionReplay/Enabled');
@@ -62,7 +63,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) => {
       if (!this.recorder || !this.initialized || this.blocked || type !== SESSION_EVENT_TYPES.CROSS_TAB) return;
@@ -131,7 +132,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
       });
@@ -144,9 +145,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;
 
@@ -161,7 +163,7 @@ export class Aggregate extends AggregateBase {
       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
@@ -172,30 +174,25 @@ 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.
     // The makeHarvestPayload should ensure that no payload is returned if we're not in FULL mode...
 
     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/dist/esm/features/session_replay/constants.js

@@ -54,5 +54,9 @@ export const ABORT_REASONS = {
 /** Reserved room for query param attrs */
 export const QUERY_PARAM_PADDING = 5000;
 export const TRIGGERS = {
-  API: 'api'
+  API: 'api',
+  RESUME: 'resume',
+  SWITCH_TO_FULL: 'switchToFull',
+  INITIALIZE: 'initialize',
+  PRELOAD: 'preload'
 };

package/dist/esm/features/session_replay/instrument/index.js

@@ -15,8 +15,10 @@ import { setupRecordReplayAPI } from '../../../loaders/api/recordReplay';
 import { setupPauseReplayAPI } from '../../../loaders/api/pauseReplay';
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME;
-  #mode;
-  #agentRef;
+  /** @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;
   constructor(agentRef) {
     super(agentRef, FEATURE_NAME);
 
@@ -24,7 +26,6 @@ export class Instrument extends InstrumentBase {
     setupRecordReplayAPI(agentRef);
     setupPauseReplayAPI(agentRef);
     let session;
-    this.#agentRef = agentRef;
     try {
       session = JSON.parse(localStorage.getItem("".concat(PREFIX, "_").concat(DEFAULT_KEY)));
     } catch (err) {}
@@ -32,15 +33,16 @@ export class Instrument extends InstrumentBase {
       this.ee.on(SR_EVENT_EMITTER_TYPES.RECORD, () => this.#apiStartOrRestartReplay());
     }
     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);
       }
@@ -53,66 +55,50 @@ export class Instrument extends InstrumentBase {
       // 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');
-
-      // 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
+  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;
     });
+    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);
+      if (this.featAggregate.mode !== MODE.FULL) this.featAggregate.initializeRecording(MODE.FULL, true, TRIGGERS.API);
     } 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;
-      }
+      this.importRecorder().then(() => {
+        this.recorder.startRecording(TRIGGERS.API, MODE.FULL);
+      }); // could handle specific fail-state behaviors with a .catch block here
     }
   }
 }

package/dist/esm/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';
@@ -22,11 +22,19 @@ export class Recorder {
   #fixing = false;
   #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);
@@ -38,11 +46,18 @@ export class Recorder {
     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.agentRef.runtime.isRecording = false;
     };
+    registerHandler(SESSION_ERROR, () => {
+      this.#canRecord = false;
+      this.stopRecording();
+    }, this.srFeatureName, this.ee);
     registerHandler(RRWEB_DATA_CHANNEL, (event, isCheckout) => {
       this.audit(event, isCheckout);
-    }, this.parent.featureName, this.parent.ee);
+    }, this.srFeatureName, this.ee);
+  }
+  get trigger() {
+    return this.triggerHistory[this.triggerHistory.length - 1];
   }
   getEvents() {
     return {
@@ -59,13 +74,20 @@ 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;
+  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,
@@ -76,7 +98,7 @@ export class Recorder {
       mask_all_inputs,
       inline_images,
       collect_fonts
-    } = this.parent.agentRef.init.session_replay;
+    } = 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
@@ -84,7 +106,7 @@ export class Recorder {
     try {
       stop = recorder({
         emit: (event, isCheckout) => {
-          handle(RRWEB_DATA_CHANNEL, [event, isCheckout], undefined, this.parent.featureName, this.parent.ee);
+          handle(RRWEB_DATA_CHANNEL, [event, isCheckout], undefined, this.srFeatureName, this.ee);
         },
         blockClass: block_class,
         ignoreClass: ignore_class,
@@ -98,14 +120,14 @@ 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?.();
     };
   }
@@ -118,14 +140,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);
     }
@@ -138,8 +160,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 */
@@ -151,10 +173,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 */
@@ -163,7 +185,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();
     }
@@ -178,16 +200,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
@@ -208,7 +230,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/dist/esm/features/soft_navigations/aggregate/ajax-node.js

@@ -6,7 +6,7 @@ import { addCustomAttributes, getAddStringContext, nullable, numeric } from '../
 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;
@@ -20,8 +20,12 @@ export class AjaxNode extends BelNode {
     this.traceId = ajaxEvent.traceId;
     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) {
     const addString = getAddStringContext(agentRef.runtime.obfuscator);
@@ -34,7 +38,11 @@ export class AjaxNode extends BelNode {
     // 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), addString(this.method), numeric(this.status), addString(this.domain), addString(this.path), numeric(this.txSize), numeric(this.rxSize), this.requestedWith, addString(this.nodeId), nullable(this.spanId, addString, true) + nullable(this.traceId, addString, true) + nullable(this.spanTimestamp, numeric)];
+    numeric(this.callbackEnd - this.end),
+    // callbackEnd is relative to end
+    numeric(this.callbackDuration),
+    // not relative
+    addString(this.method), numeric(this.status), addString(this.domain), addString(this.path), numeric(this.txSize), numeric(this.rxSize), this.requestedWith, addString(this.nodeId), nullable(this.spanId, addString, true) + nullable(this.traceId, addString, true) + nullable(this.spanTimestamp, numeric)];
     let allAttachedNodes = [];
     if (typeof this.gql === 'object') allAttachedNodes = addCustomAttributes(this.gql, addString);
     this.children.forEach(node => allAttachedNodes.push(node.serialize())); // no children is expected under ajax nodes at this time

package/dist/esm/features/soft_navigations/aggregate/index.js

@@ -8,7 +8,7 @@ import { single } from '../../../common/util/invoke';
 import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte';
 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 } from '../constants';
+import { API_TRIGGER_NAME, FEATURE_NAME, INTERACTION_STATUS, INTERACTION_TRIGGERS, IPL_TRIGGER_NAME, NO_LONG_TASK_WINDOW, POPSTATE_MERGE_WINDOW, POPSTATE_TRIGGER } from '../constants';
 import { AjaxNode } from './ajax-node';
 import { InitialPageLoadInteraction } from './initial-page-load-interaction';
 import { Interaction } from './interaction';
@@ -40,7 +40,7 @@ export class Aggregate extends AggregateBase {
     });
     this.latestRouteSetByApi = null;
     this.interactionInProgress = null; // aside from the "page load" interaction, there can only ever be 1 ongoing at a time
-    this.latestHistoryUrl = null;
+    this.latestHistoryUrl = window.location.href; // the initial url is needed to get a correct oldURL in the case that the first nav is triggered by 'popstate'
     this.harvestOpts.beforeUnload = () => this.interactionInProgress?.done(); // return any withheld ajax or jserr events so they can be sent with EoL harvest
 
     this.waitForFlags(['spa']).then(([spaOn]) => {
@@ -56,14 +56,25 @@ export class Aggregate extends AggregateBase {
     // By default, a complete UI driven interaction requires event -> URL change -> DOM mod in that exact order.
     registerHandler('newUIEvent', event => this.startUIInteraction(event.type, Math.floor(event.timeStamp), event.target), this.featureName, this.ee);
     registerHandler('newURL', (timestamp, url) => {
-      // In the case of 'popstate' trigger, by the time the event fires, the URL has already changed, so we need to store what-will-be the *previous* URL for oldURL of next popstate ixn.
+      // The newURL always need to be tracked such that it becomes the oldURL of the next potential popstate ixn.
+      // Because for 'popstate' triggered newUIEVent, by the time the event fires, the page URL has already changed so the previous URL is lost if not recorded.
       this.latestHistoryUrl = url;
       this.interactionInProgress?.updateHistory(timestamp, url);
     }, this.featureName, this.ee);
     registerHandler('newDom', timestamp => {
       this.interactionInProgress?.updateDom(timestamp);
-      if (this.interactionInProgress?.seenHistoryAndDomChange()) this.interactionInProgress.done();
+      this.interactionInProgress?.checkHistoryAndDomChange();
     }, this.featureName, this.ee);
+    this.ee.on('long-task', task => {
+      if (!this.interactionInProgress?.watchLongtaskTimer) return; // no ixn in progress or it's not yet in a pending-finish state, as indicated by the lack of a watchLongtask timeout
+      clearTimeout(this.interactionInProgress.watchLongtaskTimer);
+      // Provided there isn't another long task, the ixn span will be extended to include this long task that would finish the interaction.
+      this.interactionInProgress.customEnd = task.end;
+      this.interactionInProgress.watchLongtaskTimer = setTimeout(() => this.interactionInProgress.done(), NO_LONG_TASK_WINDOW);
+
+      // Report metric on frequency of ixn extension due to long task
+      this.reportSupportabilityMetric('SoftNav/Interaction/Extended');
+    });
     this.#registerApiHandlers();
     registerHandler('ajax', this.#handleAjaxEvent.bind(this), this.featureName, this.ee);
     registerHandler('jserror', this.#handleJserror.bind(this), this.featureName, this.ee);
@@ -82,9 +93,11 @@ export class Aggregate extends AggregateBase {
   startUIInteraction(eventName, startedAt, sourceElem) {
     // this is throttled by instrumentation so that it isn't excessively called
     if (this.interactionInProgress?.createdByApi) return; // api-started interactions cannot be disrupted aka cancelled by UI events (and the vice versa applies as well)
-    if (this.interactionInProgress?.done() === false) return; // current in-progress is blocked from closing, e.g. by 'waitForEnd' api option
+    // Navs from interacting with the document will emit the UI event like click, followed by a popstate which should be squashed given some margin of time. This prevents it from cancelling the first UI ixn.
+    if (eventName === POPSTATE_TRIGGER && this.interactionInProgress?.trigger !== POPSTATE_TRIGGER && startedAt - this.interactionInProgress?.start <= POPSTATE_MERGE_WINDOW) return;
+    if (this.interactionInProgress?.done() === false) return; // current in-progress is blocked from closing if true, e.g. by 'waitForEnd' api option; notice this cancels/finishes existing in-progress ixn
 
-    const oldURL = eventName === INTERACTION_TRIGGERS[3] ? this.latestHistoryUrl : undefined; // see related comment in 'newURL' handler above, 'popstate'
+    const oldURL = eventName === POPSTATE_TRIGGER ? this.latestHistoryUrl : undefined; // see related comment in 'newURL' handler above, 'popstate'
     this.interactionInProgress = new Interaction(eventName, startedAt, this.latestRouteSetByApi, oldURL);
     if (eventName === INTERACTION_TRIGGERS[0]) {
       // 'click'
@@ -147,22 +160,30 @@ export class Aggregate extends AggregateBase {
   /**
    * Handles or redirect ajax event based on the interaction, if any, that it's tied to.
    * @param {Object} event see Ajax feature's storeXhr function for object definition
+   * @param {Object} metadata reference to the ajax context, used to pass long task info
    */
-  #handleAjaxEvent(event) {
+  #handleAjaxEvent(event, metadata) {
     const associatedInteraction = this.getInteractionFor(event.startTime);
     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(event, associatedInteraction); // tack ajax onto the ixn object awaiting harvest
+      if (associatedInteraction.status === INTERACTION_STATUS.FIN) processAjax.call(this, event, metadata, 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(event, associatedInteraction));
+        associatedInteraction.on('finished', () => processAjax.call(this, event, metadata, associatedInteraction));
         associatedInteraction.on('cancelled', () => handle('returnAjax', [event], undefined, FEATURE_NAMES.ajax, this.ee));
       }
     }
-    function processAjax(event, parentInteraction) {
-      const newNode = new AjaxNode(event);
+    function processAjax(event, metadata, parentInteraction) {
+      const finalEnd = parentInteraction.end; // assume: by the time the 'finished' event occurs & this executes, the ixn end time accounts for any long task extension + lookback window exclusion
+      if (event.startTime > finalEnd) {
+        handle('returnAjax', [event], undefined, FEATURE_NAMES.ajax, this.ee); // falling outside the final span, returned as standalone
+        return;
+      }
+
+      // Metadata(ctx) should contain any long task end time associated with this XHR which should be up-to-date by the time the in-progress ixn & ajax children are being finalized for harvest.
+      const newNode = new AjaxNode(event, metadata);
       parentInteraction.addChild(newNode);
     }
   }
@@ -185,7 +206,7 @@ export class Aggregate extends AggregateBase {
     } else {
       // These callbacks may be added multiple times for an ixn, but just a single run will deal with all jserrors associated with the interaction.
       // As such, be cautious not to use the params object since that's tied to one specific jserror and won't affect the rest of them.
-      associatedInteraction.on('finished', single(() => handle('softNavFlush', [associatedInteraction.id, true, associatedInteraction.customAttributes], undefined, FEATURE_NAMES.jserrors, this.ee)));
+      associatedInteraction.on('finished', single(() => handle('softNavFlush', [associatedInteraction.id, true, associatedInteraction.customAttributes, associatedInteraction.end], undefined, FEATURE_NAMES.jserrors, this.ee)));
       associatedInteraction.on('cancelled', single(() => handle('softNavFlush', [associatedInteraction.id, false, undefined], undefined, FEATURE_NAMES.jserrors, this.ee))); // don't take custom attrs from cancelled ixns
     }
   }
@@ -200,7 +221,7 @@ export class Aggregate extends AggregateBase {
       this.associatedInteraction = thisClass.getInteractionFor(time);
       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 new api-driven interaction will be the target of any subsequent .interaction() call, until it is closed by EITHER .end() OR the regular url>dom change process.
         this.associatedInteraction = thisClass.interactionInProgress = new Interaction(API_TRIGGER_NAME, time, thisClass.latestRouteSetByApi);
         thisClass.domObserver.observe(document.body, {
           attributes: true,
@@ -210,10 +231,13 @@ export class Aggregate extends AggregateBase {
         }); // start observing for DOM changes like a regular UI-driven interaction
         thisClass.setClosureHandlers();
       }
-      if (waitForEnd === true) this.associatedInteraction.keepOpenUntilEndApi = true;
+      if (waitForEnd === true) {
+        this.associatedInteraction.keepOpenUntilEndApi = true;
+        clearTimeout(this.associatedInteraction.cancellationTimer); // get rid of the auto-cancel 30s timer for UI ixns when users specify waitForEnd manual override
+      }
     }, thisClass.featureName, thisClass.ee);
     registerHandler(INTERACTION_API + 'end', function (timeNow) {
-      this.associatedInteraction.done(timeNow);
+      this.associatedInteraction.done(timeNow, true);
     }, thisClass.featureName, thisClass.ee);
     registerHandler(INTERACTION_API + 'save', function () {
       this.associatedInteraction.forceSave = true;