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

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;

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

@@ -7,7 +7,7 @@ import { generateUuid } from '../../../common/ids/unique-id';
 import { addCustomAttributes, getAddStringContext, nullable, numeric } from '../../../common/serialize/bel-serializer';
 import { now } from '../../../common/timing/now';
 import { cleanURL } from '../../../common/url/clean-url';
-import { NODE_TYPE, INTERACTION_STATUS, INTERACTION_TYPE, API_TRIGGER_NAME, IPL_TRIGGER_NAME } from '../constants';
+import { NODE_TYPE, INTERACTION_STATUS, INTERACTION_TYPE, API_TRIGGER_NAME, IPL_TRIGGER_NAME, NO_LONG_TASK_WINDOW } from '../constants';
 import { BelNode } from './bel-node';
 
 /**
@@ -29,7 +29,9 @@ export class Interaction extends BelNode {
   createdByApi = false;
   keepOpenUntilEndApi = false;
   onDone = [];
+  customEnd = 0;
   cancellationTimer;
+  watchLongtaskTimer;
   constructor(uiEvent, uiEventTimestamp, currentRouteKnown, currentUrl) {
     super();
     this.belType = NODE_TYPE.INTERACTION;
@@ -41,36 +43,48 @@ export class Interaction extends BelNode {
     if (this.trigger === API_TRIGGER_NAME) this.createdByApi = true;
     this.newURL = this.oldURL = currentUrl || globalScope?.location.href;
   }
-  updateDom(timestamp) {
-    this.domTimestamp = timestamp || now(); // default timestamp should be precise for accurate isActiveDuring calculations
-  }
   updateHistory(timestamp, newUrl) {
-    this.newURL = newUrl || '' + globalScope?.location;
+    if (this.domTimestamp > 0) return; // url is locked once ui>url>dom change sequence is seen
+    if (!newUrl || newUrl === this.oldURL) return; // url must be different for interaction heuristic to proceed
+    this.newURL = newUrl;
     this.historyTimestamp = timestamp || now();
   }
-  seenHistoryAndDomChange() {
-    return this.historyTimestamp > 0 && this.domTimestamp > this.historyTimestamp; // URL must change before DOM does
+  updateDom(timestamp) {
+    if (!this.historyTimestamp || timestamp < this.historyTimestamp) return; // dom change must come after (any) url change, though this can be updated multiple times, taking the last dom timestamp
+    this.domTimestamp = timestamp || now(); // default timestamp should be precise for accurate isActiveDuring calculations
+  }
+  checkHistoryAndDomChange() {
+    if (!(this.historyTimestamp > 0 && this.domTimestamp > this.historyTimestamp)) return false;
+    if (this.status === INTERACTION_STATUS.PF) return true; // indicate the finishing process has already started for this interaction
+    this.status = INTERACTION_STATUS.PF; // set for eventual harvest
+
+    // Once the fixed reqs for a nav has been met, start a X countdown timer that watches for any long task, if it doesn't already exist, before completing the interaction.
+    clearTimeout(this.cancellationTimer); // "pending-finish" ixns cannot be auto cancelled anymore
+    this.watchLongtaskTimer ??= setTimeout(() => this.done(), NO_LONG_TASK_WINDOW);
+    // Notice that by not providing a specific end time to `.done()`, the ixn will use the dom timestamp in the event of no long task, which is what we want.
+    return true;
   }
   on(event, cb) {
     if (!this.eventSubscription.has(event)) throw new Error('Cannot subscribe to non pre-defined events.');
     if (typeof cb !== 'function') throw new Error('Must supply function as callback.');
     this.eventSubscription.get(event).push(cb);
   }
-  done(customEndTime) {
-    // User could've mark this interaction--regardless UI or api started--as "don't close until .end() is called on it". Only .end provides a timestamp; the default flows do not.
-    if (this.keepOpenUntilEndApi && customEndTime === undefined) return false;
+  done(customEndTime = this.customEnd, calledByApi = false) {
+    // User could've mark this interaction--regardless UI or api started--as "don't close until .end() is called on it".
+    if (this.keepOpenUntilEndApi && !calledByApi) return false;
     // If interaction is already closed, this is a no-op. However, returning true lets startUIInteraction know that it CAN start a new interaction, as this one is done.
-    if (this.status !== INTERACTION_STATUS.IP) return true;
+    if (this.status === INTERACTION_STATUS.FIN || this.status === INTERACTION_STATUS.CAN) return true;
+    clearTimeout(this.cancellationTimer); // clean up timers in case this is called by any flow that doesn't already do so
+    clearTimeout(this.watchLongtaskTimer);
     this.onDone.forEach(apiProvidedCb => apiProvidedCb(this.customDataByApi)); // this interaction's .save or .ignore can still be set by these user provided callbacks for example
 
     if (this.forceIgnore) this.#cancel(); // .ignore() always has precedence over save actions
-    else if (this.seenHistoryAndDomChange()) this.#finish(customEndTime); // then this should've already finished while it was the interactionInProgress, with a natural end time
+    else if (this.status === INTERACTION_STATUS.PF) this.#finish(customEndTime); // then this should've already finished while it was the interactionInProgress, with a natural end time
     else if (this.forceSave) this.#finish(customEndTime || performance.now()); // a manually saved ixn (did not fulfill conditions) must have a specified end time, if one wasn't provided
     else this.#cancel();
     return true;
   }
-  #finish(customEndTime = 0) {
-    clearTimeout(this.cancellationTimer);
+  #finish(customEndTime) {
     this.end = Math.max(this.domTimestamp, this.historyTimestamp, customEndTime);
     this.status = INTERACTION_STATUS.FIN;
 
@@ -79,7 +93,6 @@ export class Interaction extends BelNode {
     callbacks.forEach(fn => fn());
   }
   #cancel() {
-    clearTimeout(this.cancellationTimer);
     this.status = INTERACTION_STATUS.CAN;
 
     // Run all the callbacks listening to this interaction's potential cancellation.
@@ -90,12 +103,13 @@ export class Interaction extends BelNode {
   /**
    * Given a timestamp, determine if it falls within this interaction's span, i.e. if this was the active interaction during that time.
    * For in-progress interactions, this only compares the time with the start of span. Cancelled interactions are not considered active at all.
+   * Pending-finish interactions are also considered still active wrt assigning ajax or jserrors to them during the wait period.
    * @param {DOMHighResTimeStamp} timestamp
    * @returns True or false boolean.
    */
   isActiveDuring(timestamp) {
-    if (this.status === INTERACTION_STATUS.IP) return this.start <= timestamp;
-    return this.status === INTERACTION_STATUS.FIN && this.start <= timestamp && this.end > timestamp;
+    if (this.status === INTERACTION_STATUS.IP || this.status === INTERACTION_STATUS.PF) return this.start <= timestamp;
+    return this.status === INTERACTION_STATUS.FIN && this.start <= timestamp && timestamp < this.end;
   }
 
   // Following are virtual properties overridden by a subclass:
@@ -123,10 +137,10 @@ export class Interaction extends BelNode {
     // the very 1st ixn does not require offset so it should fallback to a 0 while rest is offset by the very 1st ixn's start
     numeric(this.end - this.start),
     // end -- relative to start
-    numeric(this.callbackEnd),
-    // cbEnd -- relative to start; not used by BrowserInteraction events
-    numeric(this.callbackDuration),
-    // not relative
+    numeric(0),
+    // callbackEnd -- relative to start; not used by BrowserInteraction events so these are always 0
+    numeric(0),
+    // not relative; always 0 for BrowserInteraction
     addString(this.trigger), addString(cleanURL(this.initialPageURL, true)), addString(cleanURL(this.oldURL, true)), addString(cleanURL(this.newURL, true)), addString(this.customName), ixnType, nullable(this.queueTime, numeric, true) + nullable(this.appTime, numeric, true) + nullable(this.oldRoute, addString, true) + nullable(this.newRoute, addString, true) + addString(this.id), addString(this.nodeId), nullable(this.firstPaint, numeric, true) + nullable(this.firstContentfulPaint, numeric)];
     const customAttributes = {
       ...agentRef.info.jsAttributes,

package/dist/esm/features/soft_navigations/constants.js

@@ -7,13 +7,15 @@ export const INTERACTION_TRIGGERS = ['click',
 // e.g. user clicks link or the page back/forward buttons
 'keydown',
 // e.g. user presses left and right arrow key to switch between displayed photo gallery
-'submit',
-// e.g. user clicks submit butotn or presses enter while editing a form field
-'popstate' // history api is used to navigate back and forward
+'submit' // e.g. user clicks submit butotn or presses enter while editing a form field
 ];
+export const POPSTATE_TRIGGER = 'popstate'; // e.g. user clicks browser back/forward button or history API is used programmatically
 export const API_TRIGGER_NAME = 'api';
 export const IPL_TRIGGER_NAME = 'initialPageLoad';
 export const FEATURE_NAME = FEATURE_NAMES.softNav;
+export const NO_LONG_TASK_WINDOW = 5000; // purpose is to wait 5 seconds wherein no long task is detected
+export const POPSTATE_MERGE_WINDOW = 500; // "coalesce" (discard) a popstate that happen within this period following an INTERACTION_TRIGGER opening ixn, e.g. click->popstate
+
 export const INTERACTION_TYPE = {
   INITIAL_PAGE_LOAD: '',
   ROUTE_CHANGE: 1,
@@ -27,6 +29,8 @@ export const NODE_TYPE = {
 };
 export const INTERACTION_STATUS = {
   IP: 'in progress',
+  PF: 'pending finish',
+  // interaction meets the hard criteria but is awaiting flexible conditions to fully finish
   FIN: 'finished',
   CAN: 'cancelled'
 };

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

@@ -9,7 +9,7 @@ import { windowAddEventListener } from '../../../common/event-listener/event-lis
 import { debounce } from '../../../common/util/invoke';
 import { wrapHistory } from '../../../common/wrap/wrap-history';
 import { InstrumentBase } from '../../utils/instrument-base';
-import { FEATURE_NAME, INTERACTION_TRIGGERS } from '../constants';
+import { FEATURE_NAME, INTERACTION_TRIGGERS, POPSTATE_TRIGGER } from '../constants';
 import { now } from '../../../common/timing/now';
 import { setupInteractionAPI } from '../../../loaders/api/interaction';
 
@@ -30,19 +30,22 @@ export class Instrument extends InstrumentBase {
     if (!isBrowserScope || !gosNREUMOriginals().o.MO) return; // soft navigations is not supported outside web env or browsers without the mutation observer API
 
     const historyEE = wrapHistory(this.ee);
+    try {
+      this.removeOnAbort = new AbortController();
+    } catch (e) {}
     INTERACTION_TRIGGERS.forEach(trigger => {
       windowAddEventListener(trigger, evt => {
         processUserInteraction(evt);
-      }, true);
+      }, true, this.removeOnAbort?.signal);
     });
     const trackURLChange = () => handle('newURL', [now(), '' + window.location], undefined, this.featureName, this.ee);
     historyEE.on('pushState-end', trackURLChange);
     historyEE.on('replaceState-end', trackURLChange);
-    try {
-      this.removeOnAbort = new AbortController();
-    } catch (e) {}
-    const trackURLChangeEvent = evt => handle('newURL', [evt.timeStamp, '' + window.location], undefined, this.featureName, this.ee);
-    windowAddEventListener('popstate', trackURLChangeEvent, true, this.removeOnAbort?.signal);
+    windowAddEventListener(POPSTATE_TRIGGER, evt => {
+      // popstate is unique in that it serves as BOTH a UI event and a notification of URL change
+      processUserInteraction(evt);
+      handle('newURL', [evt.timeStamp, '' + window.location], undefined, this.featureName, this.ee);
+    }, true, this.removeOnAbort?.signal);
     let oncePerFrame = false; // attempt to reduce dom noice since the observer runs very frequently with below options
     const domObserver = new (gosNREUMOriginals().o.MO)((domChanges, observer) => {
       if (oncePerFrame) return;

package/dist/types/common/wrap/wrap-function.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrap-function.d.ts","sourceRoot":"","sources":["../../../../src/common/wrap/wrap-function.js"],"names":[],"mappings":"AA6BA;;;;;GAKG;AACH,mDAJW,MAAM,UACN,OAAO,YA+IjB;AAgBD;;;;;;;;GAQG;AACH,2BANW,MAAM,MACN,MAAM,YACN,MAAM,GAEJ,MAAM,CA2BlB;AArND,0BAA6C"}
+{"version":3,"file":"wrap-function.d.ts","sourceRoot":"","sources":["../../../../src/common/wrap/wrap-function.js"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,mDAJW,MAAM,UACN,OAAO,YAmJjB;AAgBD;;;;;;;;GAQG;AACH,2BANW,MAAM,MACN,MAAM,YACN,MAAM,GAEJ,MAAM,CA2BlB;AA1ND,0BAA6C"}

package/dist/types/features/ajax/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/ajax/aggregate/index.js"],"names":[],"mappings":"AAcA;IACE,2BAAiC;IAEjC,2BA+BC;IA5BC,mBAAwB;IA8B1B,6FA0EC;IAED,iDA6CC;CACF;8BAlK6B,4BAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/ajax/aggregate/index.js"],"names":[],"mappings":"AAeA;IACE,2BAAiC;IAEjC,2BAsCC;IAnCC,mBAAwB;IAqC1B,6FA0EC;IAED,iDA6CC;CACF;8BA1K6B,4BAA4B"}

package/dist/types/features/ajax/instrument/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/ajax/instrument/index.js"],"names":[],"mappings":"AA6BA;IACE,2BAAiC;IACjC,2BAkCC;IA/BC,OAA0B;IAE1B,8DAAkF;CA8BrF;AAkWD,qCAA8B;+BArZC,6BAA6B;mBAFzC,uBAAuB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/ajax/instrument/index.js"],"names":[],"mappings":"AA6BA;IACE,2BAAiC;IACjC,2BAkCC;IA/BC,OAA0B;IAE1B,8DAAkF;CA8BrF;AAmWD,qCAA8B;+BAtZC,6BAA6B;mBAFzC,uBAAuB"}

package/dist/types/features/jserrors/aggregate/index.d.ts

@@ -42,7 +42,7 @@ export class Aggregate extends AggregateBase {
     */
     shouldAllowMainAgentToCapture(entityGuid: string): boolean;
     onInteractionDone(interaction: any, wasSaved: any): void;
-    onSoftNavNotification(interactionId: any, wasFinished: any, softNavAttrs: any): void;
+    onSoftNavNotification(interactionId: any, wasFinished: any, softNavAttrs: any, interactionEndTime: any): void;
     #private;
 }
 export type StackInfo = import("./compute-stack-trace.js").StackInfo;

package/dist/types/features/jserrors/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/jserrors/aggregate/index.js"],"names":[],"mappings":"AAyBA;;GAEG;AAEH;IACE,2BAAiC;IACjC,2BA4BC;IAzBC,kBAAuB;IACvB,eAAoB;IACpB,qBAA0B;IAC1B,2BAAgC;IAChC,qBAAwB;IAuB1B,oDAEC;IAED;;;MAcC;IAED;;;;;;OAMG;IACH,qCAHW,SAAS,GACP,MAAM,CAgBlB;IAED;;;;;;;;;;OAUG;IACH,gBATW,KAAK,GAAC,aAAa,QACnB,MAAM,aACN,OAAO,YAAC,qBACR,MAAM,YAAC,cACP,OAAO,YAAC,kBACR,MAAM,YAAC,+BAiHjB;IA4BD;;;;;MAKE;IACF,0CAHU,MAAM,GACJ,OAAO,CAIlB;IAGD,yDA6BC;IAED,qFAOC;;CACF;wBApRY,OAAO,0BAA0B,EAAE,SAAS;8BAT3B,4BAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/jserrors/aggregate/index.js"],"names":[],"mappings":"AAyBA;;GAEG;AAEH;IACE,2BAAiC;IACjC,2BA4BC;IAzBC,kBAAuB;IACvB,eAAoB;IACpB,qBAA0B;IAC1B,2BAAgC;IAChC,qBAAwB;IAuB1B,oDAEC;IAED;;;MAcC;IAED;;;;;;OAMG;IACH,qCAHW,SAAS,GACP,MAAM,CAgBlB;IAED;;;;;;;;;;OAUG;IACH,gBATW,KAAK,GAAC,aAAa,QACnB,MAAM,aACN,OAAO,YAAC,qBACR,MAAM,YAAC,cACP,OAAO,YAAC,kBACR,MAAM,YAAC,+BAiHjB;IA4BD;;;;;MAKE;IACF,0CAHU,MAAM,GACJ,OAAO,CAIlB;IAGD,yDA6BC;IAED,8GAWC;;CACF;wBAxRY,OAAO,0BAA0B,EAAE,SAAS;8BAT3B,4BAA4B"}

package/dist/types/features/soft_navigations/aggregate/ajax-node.d.ts

@@ -1,5 +1,5 @@
 export class AjaxNode extends BelNode {
-    constructor(ajaxEvent: any);
+    constructor(ajaxEvent: any, ajaxContext: any);
     belType: number;
     method: any;
     status: any;
@@ -12,6 +12,7 @@ export class AjaxNode extends BelNode {
     traceId: any;
     spanTimestamp: any;
     gql: any;
+    callbackEnd: any;
     serialize(parentStartTimestamp: any, agentRef: any): string;
 }
 import { BelNode } from './bel-node';

package/dist/types/features/soft_navigations/aggregate/ajax-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ajax-node.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/ajax-node.js"],"names":[],"mappings":"AAQA;IACE,4BAiBC;IAfC,gBAA6B;IAC7B,YAA8B;IAC9B,YAA8B;IAC9B,YAA8B;IAC9B,UAA0B;IAC1B,YAAmC;IACnC,YAAoC;IACpC,+BAAwD;IACxD,YAA8B;IAC9B,aAAgC;IAChC,mBAA4C;IAC5C,SAAwB;IAM1B,4DA+BC;CACF;wBAtDuB,YAAY"}
+{"version":3,"file":"ajax-node.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/ajax-node.js"],"names":[],"mappings":"AAQA;IACE,8CAqBC;IAnBC,gBAA6B;IAC7B,YAA8B;IAC9B,YAA8B;IAC9B,YAA8B;IAC9B,UAA0B;IAC1B,YAAmC;IACnC,YAAoC;IACpC,+BAAwD;IACxD,YAA8B;IAC9B,aAAgC;IAChC,mBAA4C;IAC5C,SAAwB;IAKtB,iBAAoE;IAKxE,4DA+BC;CACF;wBA1DuB,YAAY"}

package/dist/types/features/soft_navigations/aggregate/index.d.ts

@@ -8,7 +8,7 @@ export class Aggregate extends AggregateBase {
     initialPageLoadInteraction: InitialPageLoadInteraction;
     latestRouteSetByApi: any;
     interactionInProgress: Interaction | null;
-    latestHistoryUrl: any;
+    latestHistoryUrl: string;
     serializer(eventBuffer: any): string;
     startUIInteraction(eventName: any, startedAt: any, sourceElem: any): void;
     setClosureHandlers(): void;

package/dist/types/features/soft_navigations/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/index.js"],"names":[],"mappings":"AAeA;IACE,2BAAiC;IACjC;;OAsDC;IAjDC,2BAAwC;IACxC,iBAA8B;IAE9B,uDAA0E;IAe1E,yBAA+B;IAC/B,0CAAiC;IACjC,sBAA4B;IA+B9B,qCAUC;IAED,0EAiBC;IAED,2BAiBC;IAED;;;;;;;OAOG;IACH,6BAHW,mBAAmB,OAsB7B;;CA6FF;8BA1O6B,4BAA4B;2CAGf,iCAAiC;4BAChD,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/index.js"],"names":[],"mappings":"AAeA;IACE,2BAAiC;IACjC;;OAiEC;IA5DC,2BAAwC;IACxC,iBAA8B;IAE9B,uDAA0E;IAe1E,yBAA+B;IAC/B,0CAAiC;IACjC,yBAA4C;IA0C9C,qCAUC;IAED,0EAmBC;IAED,2BAiBC;IAED;;;;;;;OAOG;IACH,6BAHW,mBAAmB,OAsB7B;;CAwGF;8BAlQ6B,4BAA4B;2CAGf,iCAAiC;4BAChD,eAAe"}

package/dist/types/features/soft_navigations/aggregate/interaction.d.ts

@@ -18,7 +18,9 @@ export class Interaction extends BelNode {
     createdByApi: boolean;
     keepOpenUntilEndApi: boolean;
     onDone: any[];
+    customEnd: number;
     cancellationTimer: any;
+    watchLongtaskTimer: any;
     belType: number;
     trigger: any;
     oldRoute: any;
@@ -27,14 +29,15 @@ export class Interaction extends BelNode {
     forceIgnore: boolean;
     newURL: any;
     oldURL: any;
-    updateDom(timestamp: any): void;
     updateHistory(timestamp: any, newUrl: any): void;
-    seenHistoryAndDomChange(): boolean;
+    updateDom(timestamp: any): void;
+    checkHistoryAndDomChange(): boolean;
     on(event: any, cb: any): void;
-    done(customEndTime: any): boolean;
+    done(customEndTime?: number, calledByApi?: boolean): boolean;
     /**
      * Given a timestamp, determine if it falls within this interaction's span, i.e. if this was the active interaction during that time.
      * For in-progress interactions, this only compares the time with the start of span. Cancelled interactions are not considered active at all.
+     * Pending-finish interactions are also considered still active wrt assigning ajax or jserrors to them during the wait period.
      * @param {DOMHighResTimeStamp} timestamp
      * @returns True or false boolean.
      */

package/dist/types/features/soft_navigations/aggregate/interaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/interaction.js"],"names":[],"mappings":"AAYA;;IAEI;AACJ;IAkBE,0FAaC;IA9BD,WAAmB;IACnB,uBAAgC;IAChC,gBAAU;IACV,qBAAqB;IACrB,oBAAoB;IACpB,eAAS;IACT,aAAO;IACP,cAAQ;IACR,+EAA+E;IAC/E,eAA8B;IAC9B,qBAAgB;IAChB,yBAAoB;IACpB,sBAAoB;IACpB,6BAA2B;IAC3B,cAAW;IACX,uBAAiB;IAIf,gBAAoC;IACpC,aAAsB;IAEtB,cAAiC;IACjC,wCAGE;IACF,mBAAyC;IAAxB,qBAAwB;IAEzC,YAAsE;IAAxD,YAAwD;IAGxE,gCAEC;IAED,iDAGC;IAED,mCAEC;IAED,8BAIC;IAED,kCAaC;IAqBD;;;;;OAKG;IACH,0BAHW,mBAAmB,WAM7B;IAGD,uBAAoB;IACpB,iCAA8B;IAC9B,sBAAmB;IAEnB;;;;;OAKG;IACH,qDAHW,KAAK,UAgDf;;CACF;wBA/JuB,YAAY"}
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/aggregate/interaction.js"],"names":[],"mappings":"AAYA;;IAEI;AACJ;IAoBE,0FAaC;IAhCD,WAAmB;IACnB,uBAAgC;IAChC,gBAAU;IACV,qBAAqB;IACrB,oBAAoB;IACpB,eAAS;IACT,aAAO;IACP,cAAQ;IACR,+EAA+E;IAC/E,eAA8B;IAC9B,qBAAgB;IAChB,yBAAoB;IACpB,sBAAoB;IACpB,6BAA2B;IAC3B,cAAW;IACX,kBAAa;IACb,uBAAiB;IACjB,wBAAkB;IAIhB,gBAAoC;IACpC,aAAsB;IAEtB,cAAiC;IACjC,wCAGE;IACF,mBAAyC;IAAxB,qBAAwB;IAEzC,YAAsE;IAAxD,YAAwD;IAGxE,iDAKC;IAED,gCAGC;IAED,oCAUC;IAED,8BAIC;IAED,6DAeC;IAmBD;;;;;;OAMG;IACH,0BAHW,mBAAmB,WAM7B;IAGD,uBAAoB;IACpB,iCAA8B;IAC9B,sBAAmB;IAEnB;;;;;OAKG;IACH,qDAHW,KAAK,UAgDf;;CACF;wBA7KuB,YAAY"}

package/dist/types/features/soft_navigations/constants.d.ts

@@ -1,7 +1,10 @@
 export const INTERACTION_TRIGGERS: string[];
+export const POPSTATE_TRIGGER: "popstate";
 export const API_TRIGGER_NAME: "api";
 export const IPL_TRIGGER_NAME: "initialPageLoad";
 export const FEATURE_NAME: string;
+export const NO_LONG_TASK_WINDOW: 5000;
+export const POPSTATE_MERGE_WINDOW: 500;
 export namespace INTERACTION_TYPE {
     let INITIAL_PAGE_LOAD: string;
     let ROUTE_CHANGE: number;
@@ -15,6 +18,7 @@ export namespace NODE_TYPE {
 }
 export namespace INTERACTION_STATUS {
     let IP: string;
+    let PF: string;
     let FIN: string;
     let CAN: string;
 }

package/dist/types/features/soft_navigations/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/features/soft_navigations/constants.js"],"names":[],"mappings":"AAMA,4CAKC;AACD,+BAAgC,KAAK,CAAA;AACrC,+BAAgC,iBAAiB,CAAA;AAEjD,kCAAiD"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/features/soft_navigations/constants.js"],"names":[],"mappings":"AAMA,4CAIC;AACD,+BAAgC,UAAU,CAAA;AAC1C,+BAAgC,KAAK,CAAA;AACrC,+BAAgC,iBAAiB,CAAA;AAEjD,kCAAiD;AACjD,kCAAmC,IAAI,CAAA;AACvC,oCAAqC,GAAG,CAAA"}

package/dist/types/features/soft_navigations/instrument/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/instrument/index.js"],"names":[],"mappings":"AAsBA;IACE,2BAAiC;IACjC,2BAiDC;IA5BG,2CAA0C;CA6B/C;AAED,wCAAiC;+BAlEF,6BAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/soft_navigations/instrument/index.js"],"names":[],"mappings":"AAsBA;IACE,2BAAiC;IACjC,2BAkDC;IAxCG,2CAA0C;CAyC/C;AAED,wCAAiC;+BAnEF,6BAA6B"}

package/package.json

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

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
   }
 }