chore: "Soft Nav" POC

src/cdn/experimental.js

@@ -17,7 +17,8 @@ import { Instrument as InstrumentErrors } from '../features/jserrors/instrument'
 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 InstrumentSpa } from '../features/spa/instrument'
+// import { Instrument as InstrumentSpa } from '../features/spa/instrument'
+import { Instrument as InstrumentBasicSpa } from '../features/basic_spa/instrument'
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument'
 
 new Agent({
@@ -30,7 +31,8 @@ new Agent({
     InstrumentMetrics,
     InstrumentPageAction,
     InstrumentErrors,
-    InstrumentSpa
+    // InstrumentSpa,
+    InstrumentBasicSpa
   ],
   loaderType: 'experimental'
 })

src/cdn/spa.js

@@ -11,7 +11,7 @@ import { Instrument as InstrumentErrors } from '../features/jserrors/instrument'
 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 InstrumentSpa } from '../features/spa/instrument'
+import { Instrument as InstrumentBasicSpa } from '../features/basic_spa/instrument'
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument'
 
 new Agent({
@@ -24,7 +24,7 @@ new Agent({
     InstrumentMetrics,
     InstrumentPageAction,
     InstrumentErrors,
-    InstrumentSpa
+    InstrumentBasicSpa
   ],
   loaderType: 'spa'
 })

src/common/aggregate/aggregator.js

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { FEATURE_NAMES } from '../../loaders/features/features'
 import { SharedContext } from '../context/shared-context'
+import { getFeatureState } from '../util/feature-state'
 import { mapOwn } from '../util/map-own'
 
 export class Aggregator extends SharedContext {
@@ -82,12 +84,36 @@ export class Aggregator extends SharedContext {
     var hasData = false
     for (var i = 0; i < types.length; i++) {
       type = types[i]
-      results[type] = toArray(this.aggregatedData[type])
+      results[type] = this.toArray(type, this.aggregatedData[type])
+
       if (results[type].length) hasData = true
       delete this.aggregatedData[type]
     }
     return hasData ? results : null
   }
+
+  toArray (type, obj) {
+    if (typeof obj !== 'object') return []
+
+    return mapOwn(obj, (key, value) => this.getValue(key, value, type))
+  }
+
+  getValue (key, value, type) {
+    // err type can be decorated with an interaction ID if present
+    if (type !== 'err') return value
+    const shouldHold = this.checkInteractions(value) // add an interaction ID if exists
+    if (shouldHold) return
+    return value
+  }
+
+  checkInteractions (value) {
+    const spaFeature = getFeatureState({ agentIdentifier: this.sharedContext.agentIdentifier, featureName: FEATURE_NAMES.basicSpa })
+    const { shouldHold, interactions } = spaFeature?.hasInteraction?.({ timestamp: value?.metrics?.time?.t }) || {}
+    if (shouldHold) return true
+    let browserInteractionId = interactions?.[0]?.id.replace('\'', '')
+    if (browserInteractionId) value.params.browserInteractionId = browserInteractionId
+    return false
+  }
 }
 
 function aggregateMetrics (newMetrics, oldMetrics) {
@@ -159,13 +185,3 @@ function createMetricObject (value) {
     c: 1
   }
 }
-
-function toArray (obj) {
-  if (typeof obj !== 'object') return []
-
-  return mapOwn(obj, getValue)
-}
-
-function getValue (key, value) {
-  return value
-}

src/common/serialize/bel-serializer.js

@@ -44,7 +44,7 @@ export function getAddStringContext (agentIdentifier) {
   }
 }
 
-export function addCustomAttributes (attrs, addString) {
+export function addCustomAttributes (attrs, addString, shouldSerialize) {
   var attrParts = []
 
   mapOwn(attrs, function (key, val) {
@@ -83,7 +83,7 @@ export function addCustomAttributes (attrs, addString) {
     attrParts.push([type, key + (serializedValue ? ',' + serializedValue : '')])
   })
 
-  return attrParts
+  return shouldSerialize ? attrParts.map(v => ({ serialize: () => v.join(',') })) : attrParts
 }
 
 var escapable = /([,\\;])/g

src/common/timing/now.js

@@ -5,5 +5,5 @@
 
 // This is our own layer around performance.now. It's not strictly necessary, but we keep it in case of future mod-ing of the value for refactor purpose.
 export function now () {
-  return Math.round(performance.now())
+  return Math.floor(performance.now())
 }

src/common/timing/time-to-interactive.js

@@ -0,0 +1,37 @@
+import { longTask } from '../vitals/long-task'
+
+export class TimeToInteractive {
+  #ltTimer
+  #latestLT
+  #ltUnsub
+  #startTimestamp
+  #resolver
+  #rejector
+  #longTasks = 0
+
+  start ({ startTimestamp, buffered = false }) {
+    this.#startTimestamp = startTimestamp
+    this.#ltUnsub = longTask.subscribe(({ name, value, attrs }) => {
+      this.#latestLT = attrs.ltStart + value
+      this.#longTasks++
+      this.#setLtTimer()
+    }, buffered)
+    return new Promise((resolve, reject) => {
+      this.#resolver = resolve
+      this.#rejector = reject
+    })
+  }
+
+  cancel () {
+    this.#ltUnsub()
+    // this.#rejector()
+  }
+
+  #setLtTimer () {
+    clearTimeout(this.#ltTimer)
+    this.#ltTimer = setTimeout(() => {
+      this.#resolver({ value: Math.round(Math.max(this.#startTimestamp, this.#latestLT)), attrs: { startTimestamp: this.#startTimestamp, longTasks: this.#longTasks } })
+      this.#ltUnsub()
+    }, 5000)
+  }
+}

src/common/util/feature-flags.js

@@ -10,7 +10,7 @@ const bucketMap = {
   stn: [FEATURE_NAMES.sessionTrace],
   err: [FEATURE_NAMES.jserrors, FEATURE_NAMES.metrics],
   ins: [FEATURE_NAMES.pageAction],
-  spa: [FEATURE_NAMES.spa],
+  spa: [FEATURE_NAMES.spa, FEATURE_NAMES.basicSpa],
   sr: [FEATURE_NAMES.sessionReplay, FEATURE_NAMES.sessionTrace]
 }
 

src/common/util/feature-flags.test.js

@@ -53,8 +53,8 @@ test('emits the right events when feature flag = 1', () => {
 
   const sharedEE = jest.mocked(eventEmitterModule.ee.get).mock.results[0].value
 
-  // each flag gets emitted to each of its mapped features, and a feat- AND a rumresp- for every emit, so (1+2+1+1+2)*2 = 14
-  expect(handleModule.handle).toHaveBeenCalledTimes(14)
+  // each flag gets emitted to each of its mapped features, and a feat- AND a rumresp- for every emit, so (1+2+1+1+2+2)*2 = 16
+  expect(handleModule.handle).toHaveBeenCalledTimes(16)
   expect(handleModule.handle).toHaveBeenNthCalledWith(1, 'feat-stn', [], undefined, FEATURE_NAMES.sessionTrace, sharedEE)
   expect(handleModule.handle).toHaveBeenLastCalledWith('rumresp-sr', [true], undefined, FEATURE_NAMES.sessionTrace, sharedEE)
 
@@ -69,8 +69,8 @@ test('emits the right events when feature flag = 0', () => {
 
   const sharedEE = jest.mocked(eventEmitterModule.ee.get).mock.results[0].value
 
-  // each flag gets emitted to each of its mapped features, and a block- AND a rumresp- for every emit, so (1+2+1+1+2)*2 = 14
-  expect(handleModule.handle).toHaveBeenCalledTimes(14)
+  // each flag gets emitted to each of its mapped features, and a block- AND a rumresp- for every emit, so (1+2+1+1+2+2)*2 = 16
+  expect(handleModule.handle).toHaveBeenCalledTimes(16)
   expect(handleModule.handle).toHaveBeenNthCalledWith(1, 'block-stn', [], undefined, FEATURE_NAMES.sessionTrace, sharedEE)
   expect(handleModule.handle).toHaveBeenLastCalledWith('rumresp-sr', [false], undefined, FEATURE_NAMES.sessionTrace, sharedEE)
 

src/common/util/feature-state.js

@@ -0,0 +1,13 @@
+import { gosNREUM } from '../window/nreum'
+
+export const FEATURE_TYPE = {
+  AGGREGATE: 0,
+  INSTRUMENT: 1
+}
+
+export function getFeatureState ({ agentIdentifier, featureName, featureType = FEATURE_TYPE.AGGREGATE }) {
+  const nr = gosNREUM()
+  if (featureType === FEATURE_TYPE.AGGREGATE) return nr.initializedAgents[agentIdentifier]?.features?.[featureName]?.featAggregate || {}
+  if (featureType === FEATURE_TYPE.INSTRUMENT) return nr.initializedAgents[agentIdentifier]?.features?.[featureName] || {}
+  return {}
+}

src/common/vitals/constants.js

@@ -6,5 +6,6 @@ export const VITAL_NAMES = {
   CUMULATIVE_LAYOUT_SHIFT: 'cls',
   INTERACTION_TO_NEXT_PAINT: 'inp',
   LONG_TASK: 'lt',
-  TIME_TO_FIRST_BYTE: 'ttfb'
+  TIME_TO_FIRST_BYTE: 'ttfb',
+  TIME_TO_INTERACTIVE: 'tti'
 }

src/common/window/load.js

@@ -1,6 +1,6 @@
 import { windowAddEventListener, documentAddEventListener } from '../event-listener/event-listener-opts'
 
-function checkState () {
+export function checkState () {
   return (typeof document === 'undefined' || document.readyState === 'complete')
 }
 

src/features/ajax/aggregate/index.js

@@ -13,6 +13,8 @@ import { FEATURE_NAME } from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
 import { AggregateBase } from '../../utils/aggregate-base'
+import { getFeatureState } from '../../../common/util/feature-state'
+import { AjaxNode } from '../../basic_spa/aggregate/ajax-node'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -43,21 +45,6 @@ export class Aggregate extends AggregateBase {
     this.prepareHarvest = prepareHarvest
     this.getStoredEvents = function () { return { ajaxEvents, spaAjaxEvents } }
 
-    ee.on('interactionSaved', (interaction) => {
-      if (!spaAjaxEvents[interaction.id]) return
-      // remove from the spaAjaxEvents buffer, and let spa harvest it
-      delete spaAjaxEvents[interaction.id]
-    })
-    ee.on('interactionDiscarded', (interaction) => {
-      if (!spaAjaxEvents[interaction.id]) return
-
-      spaAjaxEvents[interaction.id].forEach(function (item) {
-        // move it from the spaAjaxEvents buffer to the ajaxEvents buffer for harvesting here
-        ajaxEvents.push(item)
-      })
-      delete spaAjaxEvents[interaction.id]
-    })
-
     const scheduler = new HarvestScheduler('events', {
       onFinished: onEventsHarvestFinished,
       getPayload: prepareHarvest
@@ -119,11 +106,19 @@ export class Aggregate extends AggregateBase {
         event.spanTimestamp = xhrContext.dt.timestamp
       }
 
-      // if the ajax happened inside an interaction, hold it until the interaction finishes
-      if (this.spaNode) {
-        var interactionId = this.spaNode.interaction.id
-        spaAjaxEvents[interactionId] = spaAjaxEvents[interactionId] || []
-        spaAjaxEvents[interactionId].push(event)
+      const spaFeature = getFeatureState({ agentIdentifier, featureName: FEATURE_NAMES.basicSpa })
+      const {
+        interactions
+      } = spaFeature?.hasInteraction?.({ timestamp: event.startTime }) || {}
+
+      // if the ajax happened inside an ixn window (found a match), add it to the ixn
+      if (interactions?.length) {
+        interactions.forEach(interaction => {
+          const node = new AjaxNode(agentIdentifier, event)
+          interaction.addChild(node)
+          // add the ajax event back to the ajax feature queue if the ixn cancels
+          node.on('cancelled', () => { ajaxEvents.push(event) }) // this needs to be fixed later to avoid duplicates
+        })
       } else {
         ajaxEvents.push(event)
       }
@@ -200,6 +195,9 @@ export class Aggregate extends AggregateBase {
 
       for (var i = 0; i < events.length; i++) {
         var event = events[i]
+
+        // if (interaction) console.log('ajax', event, 'has FOUND AJAX INTERACTION!', interaction)
+
         var fields = [
           numeric(event.startTime),
           numeric(event.endTime - event.startTime),

src/features/basic_spa/aggregate/ajax-node.js

@@ -0,0 +1,64 @@
+import { getAddStringContext, nullable, numeric } from '../../../common/serialize/bel-serializer'
+import { TYPE_IDS } from '../constants'
+import { BelNode } from './bel-node'
+
+export class AjaxNode extends BelNode {
+  method
+  status
+  domain
+  path
+  txSize // request body size
+  rxSize // response body size
+  requestedWith // isFetch (1) | isJSONP (2) | XMLHttpRequest ('')
+  spanId
+  traceId
+  spanTimestamp
+
+  constructor (agentIdentifier, ajaxEvent) {
+    super(agentIdentifier)
+    this.belType = TYPE_IDS.AJAX
+    this.method = ajaxEvent.method
+    this.status = ajaxEvent.status
+    this.domain = ajaxEvent.domain
+    this.path = ajaxEvent.path
+    this.txSize = ajaxEvent.requestSize
+    this.rxSize = ajaxEvent.responseSize
+    this.requestedWith = ajaxEvent.type === 'fetch' ? 1 : ajaxEvent.type === 'jsonp' ? 2 : '' // does this actually work?
+    this.spanId = ajaxEvent.spanId
+    this.traceId = ajaxEvent.traceId
+    this.spanTimestamp = ajaxEvent.spanTimestamp
+
+    this.start = ajaxEvent.startTime
+    this.end = ajaxEvent.endTime
+    this.callbackDuration = ajaxEvent.callbackDuration
+    this.callbackEnd = this.callbackDuration
+  }
+
+  serialize (startTimestamp) {
+    const addString = getAddStringContext(this.agentIdentifier)
+    const nodeList = []
+    const fields = [
+      numeric(this.belType),
+      this.children.length,
+      numeric(this.start - startTimestamp), // start relative to first seen (parent interaction)
+      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, true)
+    ]
+
+    nodeList.push(fields)
+
+    return nodeList.join(';')
+  }
+}