feat: Make soft navigations feature the default SPA (#1638)

Co-authored-by: Jordan Porter <insomniacrampage@hotmail.com>
Co-authored-by: Jordan Porter <silentsummitsoftware@gmail.com>

Author: cwli24

.github/actions/build-ab/templates/experiments.js

@@ -6,7 +6,7 @@ window.NREUM.info.licenseKey = '{{{args.abLicenseKey}}}'
 window.NREUM.init.proxy = {} // Proxy won't work for experiments
 window.NREUM.init.session_replay.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
 window.NREUM.init.session_trace.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
-window.NREUM.init.feature_flags = ['ajax_metrics_deny_list','soft_nav']
+window.NREUM.init.feature_flags = ['ajax_metrics_deny_list']
 window.NREUM.init.user_actions = {elementAttributes: ['id', 'className', 'tagName', 'type', 'ariaLabel', 'alt', 'title']}
 
 {{#if experimentScripts}}

.github/actions/build-ab/templates/latest.js

@@ -4,7 +4,7 @@ window.NREUM.loader_config.licenseKey = '{{{args.abLicenseKey}}}'
 window.NREUM.info.applicationID = '{{{args.abAppId}}}'
 window.NREUM.info.licenseKey = '{{{args.abLicenseKey}}}'
 window.NREUM.init.proxy.assets = 'https://staging-js-agent.newrelic.com/dev'
-window.NREUM.init.feature_flags = ['soft_nav','ajax_metrics_deny_list', 'register', 'register.jserrors', 'websockets']
+window.NREUM.init.feature_flags = ['ajax_metrics_deny_list', 'register', 'register.jserrors', 'websockets']
 window.NREUM.init.session_replay.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
 window.NREUM.init.session_trace.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
 window.NREUM.init.user_actions = {elementAttributes: ['id', 'className', 'tagName', 'type', 'ariaLabel', 'alt', 'title']}

.github/actions/build-ab/templates/released.js

@@ -1,7 +1,7 @@
 // config
 window.NREUM={
   init: {
-    feature_flags: ['soft_nav', 'register'], // add jserrors and generic events once the consumer(s) support it
+    feature_flags: ['register'], // add jserrors and generic events once the consumer(s) support it
     distributed_tracing: {
       enabled: true
     },

docs/warning-codes.md

@@ -133,3 +133,5 @@
 `Consent API argument must be boolean or undefined`
 ### 66
 `A new agent session has started`
+### 67
+`The "spa" feature has been deprecated and disabled. Please use/import "soft_navigations" instead for tracking of BrowserInteraction data.`

src/cdn/spa.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -17,7 +17,6 @@ import { Instrument as InstrumentXhr } from '../features/ajax/instrument'
 import { Instrument as InstrumentSessionTrace } from '../features/session_trace/instrument'
 import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument'
 import { Instrument as InstrumentSoftNav } from '../features/soft_navigations/instrument'
-import { Instrument as InstrumentSpa } from '../features/spa/instrument'
 import { Instrument as InstrumentGenericEvents } from '../features/generic_events/instrument'
 import { Instrument as InstrumentLogs } from '../features/logging/instrument'
 
@@ -32,8 +31,7 @@ new Agent({
     InstrumentErrors,
     InstrumentGenericEvents,
     InstrumentLogs,
-    InstrumentSoftNav,
-    InstrumentSpa // either the softnav or the old spa will be used (not both), but we still need to pack both to avoid dynamic import for instrument files
+    InstrumentSoftNav
   ],
   loaderType: 'spa'
 })

src/common/harvest/harvester.js

@@ -79,7 +79,7 @@ export class Harvester {
       featureName: aggregateInst.featureName,
       endpointVersion: output.endpointVersion
     })
-    output.ranSend = true
+    output.ranSend = true // Set to true if we attempted to send (even if send() returned false due to missing errorBeacon in tests)
 
     return output
 

src/features/ajax/aggregate/index.js

@@ -19,7 +19,6 @@ export class Aggregate extends AggregateBase {
   constructor (agentRef) {
     super(agentRef, FEATURE_NAME)
     setDenyList(agentRef.runtime.denyList)
-    this.underSpaEvents = {}
     const classThis = this
 
     if (!agentRef.init.ajax.block_internal) {
@@ -29,19 +28,8 @@ export class Aggregate extends AggregateBase {
       super.customAttributesAreSeparate = true
     }
 
-    // --- v Used by old spa feature
-    this.ee.on('interactionDone', (interaction, wasSaved) => {
-      if (!this.underSpaEvents[interaction.id]) return
-
-      if (!wasSaved) { // if the ixn was saved, then its ajax reqs are part of the payload whereas if it was discarded, it should still be harvested in the ajax feature itself
-        this.underSpaEvents[interaction.id].forEach((item) => this.events.add(item))
-      }
-      delete this.underSpaEvents[interaction.id]
-    })
-    // --- ^
-    // --- v Used by new soft nav
     registerHandler('returnAjax', event => this.events.add(event), this.featureName, this.ee)
-    // --- ^
+
     registerHandler('xhr', function () { // the EE-drain system not only switches "this" but also passes a new EventContext with info. Should consider platform refactor to another system which passes a mutable context around separately and predictably to avoid problems like this.
       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)
@@ -121,12 +109,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 w/ info to it for evaluation -- either part of an interaction or is given back
+    if (softNavInUse) { // when SN is 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] ??= []
-      this.underSpaEvents[interactionId].push(event)
     } else {
       this.events.add(event)
     }

src/features/jserrors/aggregate/index.js

@@ -36,16 +36,11 @@ export class Aggregate extends AggregateBase {
     this.stackReported = {}
     this.observedAt = {}
     this.pageviewReported = {}
-    this.bufferedErrorsUnderSpa = {}
     this.errorOnPage = false
 
-    // this will need to change to match whatever ee we use in the instrument
-    this.ee.on('interactionDone', (interaction, wasSaved) => this.onInteractionDone(interaction, wasSaved))
-
     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, interactionEndTime) =>
-      this.onSoftNavNotification(interactionId, wasFinished, softNavAttrs, interactionEndTime), this.featureName, this.ee) // when an ixn is done or cancelled
+    register('returnJserror', (jsErrorEvent, softNavAttrs) => this.#storeJserrorForHarvest(jsErrorEvent, softNavAttrs), this.featureName, this.ee)
 
     // 0 == off, 1 == on
     this.waitForFlags(['err']).then(([errFlag]) => {
@@ -202,45 +197,27 @@ export class Aggregate extends AggregateBase {
 
     if (this.shouldAllowMainAgentToCapture(target)) {
       const softNavInUse = Boolean(this.agentRef.features?.[FEATURE_NAMES.softNav])
-      // Note: the following are subject to potential race cond wherein if the other feature aren't fully initialized, it'll be treated as there being no associated interaction.
-      // They each will also tack on their respective properties to the params object as part of the decision flow.
-      if (softNavInUse) handle('jserror', [params, time], undefined, FEATURE_NAMES.softNav, this.ee)
-      else handle('spa-jserror', jsErrorEvent, undefined, FEATURE_NAMES.spa, this.ee)
-
-      if (params.browserInteractionId && !params._softNavFinished) { // hold onto the error until the in-progress interaction is done, eithered saved or discarded
-        this.bufferedErrorsUnderSpa[params.browserInteractionId] ??= []
-        this.bufferedErrorsUnderSpa[params.browserInteractionId].push(jsErrorEvent)
-      } else if (params._interactionId != null) { // same as above, except tailored for the way old spa does it
-        this.bufferedErrorsUnderSpa[params._interactionId] = this.bufferedErrorsUnderSpa[params._interactionId] || []
-        this.bufferedErrorsUnderSpa[params._interactionId].push(jsErrorEvent)
+      if (softNavInUse) { // pass the error to soft nav for evaluation - it will return it via 'returnJserror' when interaction is resolved
+        handle('jserror', [jsErrorEvent], undefined, FEATURE_NAMES.softNav, this.ee)
       } else {
-      // Either there is no interaction (then all these params properties will be undefined) OR there's a related soft navigation that's already completed.
-      // The old spa does not look up completed interactions at all, so there's no need to consider it.
-        this.#storeJserrorForHarvest(jsErrorEvent, params.browserInteractionId !== undefined, params._softNavAttributes)
+        this.#storeJserrorForHarvest(jsErrorEvent, false)
       }
     }
 
     // always add directly if scoped to a sub-entity, the other pathways above will be deterministic if the main agent should procede
     if (target) this.#storeJserrorForHarvest([...jsErrorEvent, target], false, params._softNavAttributes)
   }
 
-  #storeJserrorForHarvest (errorInfoArr, softNavOccurredFinished, softNavCustomAttrs = {}) {
+  #storeJserrorForHarvest (errorInfoArr, softNavCustomAttrs = {}) {
     let [type, bucketHash, params, newMetrics, localAttrs, target] = errorInfoArr
     const allCustomAttrs = {
       /** MFE specific attributes if in "multiple" mode (ie consumer version 2) */
       ...getVersion2Attributes(target, this)
     }
 
-    if (softNavOccurredFinished) {
-      Object.entries(softNavCustomAttrs).forEach(([k, v]) => setCustom(k, v)) // when an ixn finishes, it'll include stuff in jsAttributes + attrs specific to the ixn
-      bucketHash += params.browserInteractionId
-
-      delete params._softNavAttributes // cleanup temp properties from synchronous evaluation; this is harmless when async from soft nav (properties DNE)
-      delete params._softNavFinished
-    } else { // interaction was cancelled -> error should not be associated OR there was no interaction
-      Object.entries(this.agentRef.info.jsAttributes).forEach(([k, v]) => setCustom(k, v))
-      delete params.browserInteractionId
-    }
+    Object.entries(this.agentRef.info.jsAttributes).forEach(([k, v]) => setCustom(k, v))
+    Object.entries(softNavCustomAttrs).forEach(([k, v]) => setCustom(k, v)) // when an ixn finishes, it'll pass attrs specific to the ixn; if no associated ixn, this defaults to empty
+    if (params.browserInteractionId) bucketHash += params.browserInteractionId
     if (localAttrs) Object.entries(localAttrs).forEach(([k, v]) => setCustom(k, v)) // local custom attrs are applied in either case with the highest precedence
 
     const jsAttributesHash = stringHashCode(stringify(allCustomAttrs))
@@ -262,49 +239,4 @@ export class Aggregate extends AggregateBase {
   shouldAllowMainAgentToCapture (target) {
     return (!target || this.agentRef.init.api.duplicate_registered_data)
   }
-
-  // TO-DO: Remove this function when old spa is taken out. #storeJserrorForHarvest handles the work with the softnav feature.
-  onInteractionDone (interaction, wasSaved) {
-    if (!this.bufferedErrorsUnderSpa[interaction.id] || this.blocked) return
-
-    this.bufferedErrorsUnderSpa[interaction.id].forEach((item) => {
-      var allCustomAttrs = {}
-      const localCustomAttrs = item[4]
-
-      Object.entries(interaction.root.attrs.custom || {}).forEach(setCustom) // tack on custom attrs from the interaction
-      Object.entries(localCustomAttrs || {}).forEach(setCustom)
-
-      var params = item[2]
-      if (wasSaved) {
-        params.browserInteractionId = interaction.root.attrs.id
-        if (params._interactionNodeId) params.parentNodeId = params._interactionNodeId.toString()
-      }
-      delete params._interactionId
-      delete params._interactionNodeId
-
-      var hash = wasSaved ? item[1] + interaction.root.attrs.id : item[1]
-      var jsAttributesHash = stringHashCode(stringify(allCustomAttrs))
-      var aggregateHash = hash + ':' + jsAttributesHash
-
-      this.events.add([item[0], aggregateHash, params, item[3], allCustomAttrs], item[5])
-
-      function setCustom ([key, val]) {
-        allCustomAttrs[key] = (val && typeof val === 'object' ? stringify(val) : val)
-      }
-    })
-    delete this.bufferedErrorsUnderSpa[interaction.id]
-  }
-
-  onSoftNavNotification (interactionId, wasFinished, softNavAttrs, interactionEndTime) {
-    if (this.blocked) return
-
-    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
-  }
 }

src/features/soft_navigations/aggregate/index.js

@@ -4,7 +4,6 @@
  */
 import { handle } from '../../../common/event-emitter/handle'
 import { registerHandler } from '../../../common/event-emitter/register-handler'
-import { single } from '../../../common/util/invoke'
 import { loadTime } from '../../../common/vitals/load-time'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
@@ -192,27 +191,36 @@ export class Aggregate extends AggregateBase {
   }
 
   /**
-   * Decorate the passed-in params obj with properties relating to any associated interaction at the time of the timestamp.
-   * @param {Object} params reference to the local var instance in Jserrors feature's storeError
-   * @param {DOMHighResTimeStamp} timestamp time the jserror occurred
+   * Handles or redirects jserror event based on the interaction, if any, that it's tied to.
+   * @param {Array} jsErrorEvent the error event array from jserrors feature
    */
-  #handleJserror (params, timestamp) {
+  #handleJserror (jsErrorEvent) {
+    const timestamp = jsErrorEvent[3].time // in storeError fn, the newMetrics obj contains the time of the error
     const associatedInteraction = this.getInteractionFor(timestamp)
-    if (!associatedInteraction) return // do not need to decorate this jserror params
+    if (!associatedInteraction) {
+      // No interaction was happening when this error occurred, so give it back to jserrors feature for processing
+      return handle('returnJserror', [jsErrorEvent], undefined, FEATURE_NAMES.jserrors, this.ee)
+    }
 
-    // Whether the interaction is in-progress or already finished, the id will let jserror buffer it under its index, until it gets the next step instruction.
-    params.browserInteractionId = associatedInteraction.id
+    // Store the error info to be returned when interaction finishes
     if (associatedInteraction.status === INTERACTION_STATUS.FIN) {
-      // This information cannot be relayed back via handle() that flushes buffered errs because this is being called by a jserror's handle() per se and before the err is buffered.
-      params._softNavFinished = true // instead, signal that this err can be processed right away without needing to be buffered aka wait for an in-progress ixn
-      params._softNavAttributes = associatedInteraction.customAttributes
+      // Interaction already finished, return immediately with the interaction ID and attributes
+      processJserror.call(this, jsErrorEvent, associatedInteraction)
     } 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, 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
+      // Interaction still in progress, wait for it to finish or be cancelled
+      associatedInteraction.on('finished', () => processJserror.call(this, jsErrorEvent, associatedInteraction))
+      associatedInteraction.on('cancelled', () => handle('returnJserror', [jsErrorEvent], undefined, FEATURE_NAMES.jserrors, this.ee))
+    }
+
+    function processJserror (jsErrorEvent, parentInteraction) {
+      const finalEnd = parentInteraction.end
+      if (timestamp > finalEnd) { // check if error falls within the final interaction span, after any & all long task extension(s) are considered
+        return handle('returnJserror', [jsErrorEvent], undefined, FEATURE_NAMES.jserrors, this.ee)
+      }
+      // Error is within the interaction span, return with the correct interaction ID set, plus any custom attributes from the interaction
+      const params = jsErrorEvent[2]
+      params.browserInteractionId = parentInteraction.id
+      handle('returnJserror', [jsErrorEvent, parentInteraction.customAttributes], undefined, FEATURE_NAMES.jserrors, this.ee)
     }
   }
 
@@ -227,7 +235,7 @@ export class Aggregate extends AggregateBase {
       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 url>dom change process.
-        this.associatedInteraction = thisClass.interactionInProgress = new Interaction(API_TRIGGER_NAME, time, thisClass.latestRouteSetByApi)
+        this.associatedInteraction = thisClass.interactionInProgress = new Interaction(API_TRIGGER_NAME, Math.floor(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()
       }

src/features/utils/aggregate-base.js

@@ -141,7 +141,7 @@ export class AggregateBase extends FeatureBase {
   }
 
   preHarvestChecks (opts) {
-    return !this.blocked
+    return !this.blocked && !this.ee.aborted
   }
 
   /**