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

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),

package/src/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()
 
@@ -85,9 +96,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'
@@ -153,21 +166,29 @@ 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)
     }
   }
@@ -191,7 +212,7 @@ export class Aggregate extends AggregateBase {
       // 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)))
+        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
     }
@@ -207,14 +228,17 @@ 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, childList: true, subtree: true, characterData: true }) // 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) }, thisClass.featureName, thisClass.ee)
+    registerHandler(INTERACTION_API + 'end', function (timeNow) { this.associatedInteraction.done(timeNow, true) }, thisClass.featureName, thisClass.ee)
     registerHandler(INTERACTION_API + 'save', function () { this.associatedInteraction.forceSave = true }, thisClass.featureName, thisClass.ee)
     registerHandler(INTERACTION_API + 'ignore', function () { this.associatedInteraction.forceIgnore = true }, thisClass.featureName, thisClass.ee)
 

package/src/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()
@@ -46,17 +48,28 @@ export class Interaction extends BelNode {
     this.newURL = this.oldURL = (currentUrl || globalScope?.location.href)
   }
 
+  updateHistory (timestamp, newUrl) {
+    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())
+  }
+
   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
   }
 
-  updateHistory (timestamp, newUrl) {
-    this.newURL = newUrl || '' + globalScope?.location
-    this.historyTimestamp = (timestamp || now())
-  }
+  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
 
-  seenHistoryAndDomChange () {
-    return this.historyTimestamp > 0 && this.domTimestamp > this.historyTimestamp // URL must change before DOM does
+    // 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) {
@@ -65,23 +78,24 @@ export class Interaction extends BelNode {
     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
 
@@ -91,7 +105,6 @@ export class Interaction extends BelNode {
   }
 
   #cancel () {
-    clearTimeout(this.cancellationTimer)
     this.status = INTERACTION_STATUS.CAN
 
     // Run all the callbacks listening to this interaction's potential cancellation.
@@ -102,12 +115,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:
@@ -136,8 +150,8 @@ export class Interaction extends BelNode {
       0, // this will be overwritten below with number of attached nodes
       numeric(this.start - (isFirstIxnOfPayload ? 0 : firstStartTimeOfPayload)), // 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)),

package/src/features/soft_navigations/constants.js

@@ -7,13 +7,15 @@ import { FEATURE_NAMES } from '../../loaders/features/features'
 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: '',
@@ -30,6 +32,7 @@ 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/src/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'
 
@@ -31,22 +31,23 @@ 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) => {