@newrelic/browser-agent 0.1.229 → 0.1.231

package/src/features/spa/aggregate/interaction-node.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+var MAX_NODES = 128
+
+var lastId = 0
+
+export function InteractionNode (interaction, parent, type, timestamp) {
+  Object.defineProperty(this, 'interaction', {
+    value: interaction, writable: true // enumerable: false -- by default, which hides this prop from obj (iterations)
+  })
+  this.parent = parent
+  this.id = ++lastId
+  this.type = type
+  this.children = []
+  this.end = null
+  this.jsEnd = this.start = timestamp
+  this.jsTime = 0
+  this.attrs = {}
+  this.cancelled = false
+}
+
+var InteractionNodePrototype = InteractionNode.prototype
+
+/**
+ * @param {string} type
+ * @param {number} timestamp
+ * @param {string} name
+ * @param {bool} dontWait - When true, the interaction will not immediately start waiting
+ *                          for this node to complete. This is used when the creation of
+ *                          the node and its start happen at different times (e.g. XHR).
+ */
+InteractionNodePrototype.child = function child (type, timestamp, name, dontWait) {
+  var interaction = this.interaction
+  if (interaction.end || interaction.nodes >= MAX_NODES) return null
+
+  interaction.onNodeAdded(this)
+
+  var node = new InteractionNode(interaction, this, type, timestamp)
+  node.attrs.name = name
+  interaction.nodes++
+  if (!dontWait) {
+    interaction.remaining++
+  }
+  return node
+}
+
+InteractionNodePrototype.callback = function addCallbackTime (exclusiveTime, end) {
+  var node = this
+
+  node.jsTime += exclusiveTime
+  if (end > node.jsEnd) {
+    node.jsEnd = end
+    node.interaction.lastCb = end
+  }
+}
+
+InteractionNodePrototype.cancel = function cancel () {
+  this.cancelled = true
+  var interaction = this.interaction
+  interaction.remaining--
+}
+
+InteractionNodePrototype.finish = function finish (timestamp) {
+  var node = this
+  if (node.end) return
+  node.end = timestamp
+
+  // Find the next parent node that is not cancelled
+  let parent = node.parent
+  while (parent?.cancelled) parent = parent.parent
+
+  // Assign the node to the non-cancelled parent node
+  if (parent) parent.children.push(node)
+  node.parent = null
+
+  // Update the interaction remaining counter
+  var interaction = this.interaction
+  interaction.remaining--
+  interaction.lastFinish = timestamp
+  // check if interaction has finished, (this is needed for older browsers for unknown reasons)
+  interaction.checkFinish()
+}

package/src/features/spa/aggregate/interaction-node.test.js

@@ -0,0 +1,17 @@
+import { faker } from '@faker-js/faker'
+import { InteractionNode } from './interaction-node'
+
+test('finishing node with cancelled parent should not throw an error', () => {
+  const interaction = {
+    remaining: 0,
+    onNodeAdded: jest.fn(),
+    checkFinish: jest.fn()
+  }
+  const interactionRootNode = new InteractionNode(interaction, null, 'interaction', faker.date.past().getUTCSeconds())
+  const interactionNode = interactionRootNode.child('test', faker.date.past().getUTCSeconds(), 'test', false)
+
+  interactionRootNode.cancel()
+  interactionNode.finish()
+
+  expect(interactionRootNode.children.length).toEqual(0)
+})

package/src/features/spa/aggregate/interaction.js

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getInfo, getRuntime, originals } from '../../../common/config/config'
+import { mapOwn } from '../../../common/util/map-own'
+import { ee } from '../../../common/event-emitter/contextual-ee'
+import { InteractionNode } from './interaction-node'
+import { now } from '../../../common/timing/now'
+
+var originalSetTimeout = originals.ST
+var originalClearTimeout = originals.CT
+
+var lastId = {}
+
+export function Interaction (eventName, timestamp, url, routeName, onFinished, agentIdentifier) {
+  this.agentIdentifier = agentIdentifier
+  this.ee = ee.get(agentIdentifier)
+
+  lastId[agentIdentifier] = 0
+  this.id = ++lastId[agentIdentifier]
+  this.eventName = eventName
+  this.nodes = 0
+  this.remaining = 0
+  this.finishTimer = null
+  this.checkingFinish = false
+  this.lastCb = this.lastFinish = timestamp
+  this.handlers = []
+  this.onFinished = onFinished
+  this.done = false
+
+  var root = this.root = new InteractionNode(this, null, 'interaction', timestamp)
+  var attrs = root.attrs
+
+  attrs.trigger = eventName
+  attrs.initialPageURL = getRuntime(agentIdentifier).origin
+  attrs.oldRoute = routeName
+  attrs.newURL = attrs.oldURL = url
+  attrs.custom = {}
+  attrs.store = {}
+}
+
+var InteractionPrototype = Interaction.prototype
+
+InteractionPrototype.checkFinish = function checkFinish () {
+  var interaction = this
+
+  if (interaction.remaining > 0) {
+    interaction._resetFinishCheck()
+    return
+  }
+
+  if (interaction.checkingFinish) {
+    return
+  }
+
+  if (interaction.root.end !== null) return
+
+  interaction._resetFinishCheck()
+
+  interaction.checkingFinish = true
+  interaction.finishTimer = originalSetTimeout(() => {
+    interaction.checkingFinish = false
+    interaction.finishTimer = originalSetTimeout(() => {
+      interaction.finishTimer = null
+      if (interaction.remaining <= 0) interaction.finish()
+    }, 1)
+  }, 0)
+}
+
+InteractionPrototype.setNewURL = function setNewURL (url) {
+  this.root.attrs.newURL = url
+}
+
+InteractionPrototype.setNewRoute = function setNewRoute (route) {
+  this.root.attrs.newRoute = route
+}
+
+InteractionPrototype.onNodeAdded = function onNodeAdded () {
+  this._resetFinishCheck()
+}
+
+InteractionPrototype._resetFinishCheck = function _resetFinishCheck () {
+  if (this.finishTimer) {
+    originalClearTimeout(this.finishTimer)
+    this.finishTimer = null
+    this.checkingFinish = false
+  }
+}
+
+// serialize report and remove nodes from map
+InteractionPrototype.finish = function finishInteraction () {
+  var interaction = this
+  var root = interaction.root
+  if (root.end !== null) return
+  var endTimestamp = Math.max(interaction.lastCb, interaction.lastFinish)
+  var delta = now() - endTimestamp
+  var attrs = root.attrs
+  var customAttrs = attrs.custom
+
+  if (this.onFinished) {
+    this.onFinished(this)
+  }
+
+  mapOwn(getInfo(interaction.agentIdentifier).jsAttributes, function (attr, value) {
+    if (!(attr in customAttrs)) customAttrs[attr] = value
+  })
+
+  root.end = endTimestamp
+  interaction.ee.emit('interaction', [this])
+}

package/src/features/spa/aggregate/serializer.js

@@ -0,0 +1,198 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { cleanURL } from '../../../common/url/clean-url'
+import { mapOwn } from '../../../common/util/map-own'
+import { nullable, numeric, getAddStringContext, addCustomAttributes } from '../../../common/serialize/bel-serializer'
+import { SharedContext } from '../../../common/context/shared-context'
+import { getInfo } from '../../../common/config/config'
+
+export class Serializer extends SharedContext {
+  constructor (parent) {
+    super(parent)
+
+    /**
+     * This variable is used to calculate an interactions ending offset when the
+     * harvest includes multiple interactions. This variable is set by the first
+     * interaction processed and used by subsequent interactions in the same harvest.
+     * See https://issues.newrelic.com/browse/NEWRELIC-5498
+     * @type {number|undefined}
+     */
+    this.firstTimestamp = undefined
+  }
+
+  serializeMultiple (interactions, offset, navTiming) {
+    const info = getInfo(this.sharedContext.agentIdentifier)
+    var addString = getAddStringContext(this.sharedContext.agentIdentifier)
+    var serialized = 'bel.7'
+    interactions.forEach((interaction) => {
+      serialized += ';' + this.serializeInteraction(interaction.root, offset, navTiming, interaction.routeChange, addString, info)
+    })
+    this.firstTimestamp = undefined
+    return serialized
+  }
+
+  serializeSingle (root, offset, navTiming, isRouteChange) {
+    const info = getInfo(this.sharedContext.agentIdentifier)
+    var addString = getAddStringContext(this.sharedContext.agentIdentifier)
+    var serialized = 'bel.7;' + this.serializeInteraction(root, offset, navTiming, isRouteChange, addString, info)
+    this.firstTimestamp = undefined
+    return serialized
+  }
+
+  serializeInteraction (root, offset, navTiming, isRouteChange, addString, info) {
+    offset = offset || 0
+    var isInitialPage = root.attrs.trigger === 'initialPageLoad'
+    var typeIdsByName = {
+      interaction: 1,
+      ajax: 2,
+      customTracer: 4
+    }
+
+    // Include the hash fragment with all SPA data
+    var includeHashFragment = true
+
+    const addNode = (node, nodeList) => {
+      if (node.type === 'customEnd') return nodeList.push([3, numeric(node.end - this.firstTimestamp)])
+      var typeName = node.type
+      var typeId = typeIdsByName[typeName]
+      var startTimestamp = node.start
+      var childCount = node.children.length
+      var attrCount = 0
+      var apmAttributes = info.atts
+      var hasNavTiming = isInitialPage && navTiming.length && typeId === 1
+      var children = []
+      var attrs = node.attrs
+      var metrics = attrs.metrics
+      var params = attrs.params
+      var queueTime = info.queueTime
+      var appTime = info.applicationTime
+
+      if (typeof this.firstTimestamp === 'undefined') {
+        startTimestamp += offset
+        this.firstTimestamp = startTimestamp
+      } else {
+        startTimestamp -= this.firstTimestamp
+      }
+
+      var fields = [
+        numeric(startTimestamp),
+        numeric(node.end - node.start),
+        numeric(node.jsEnd - node.end),
+        numeric(node.jsTime)
+      ]
+
+      switch (typeId) {
+        case 1:
+          fields[2] = numeric(node.jsEnd - this.firstTimestamp)
+          fields.push(
+            addString(attrs.trigger),
+            addString(cleanURL(attrs.initialPageURL, includeHashFragment)),
+            addString(cleanURL(attrs.oldURL, includeHashFragment)),
+            addString(cleanURL(attrs.newURL, includeHashFragment)),
+            addString(attrs.customName),
+            isInitialPage ? '' : isRouteChange ? 1 : 2,
+            nullable(isInitialPage && queueTime, numeric, true) +
+            nullable(isInitialPage && appTime, numeric, true) +
+            nullable(attrs.oldRoute, addString, true) +
+            nullable(attrs.newRoute, addString, true) +
+            addString(attrs.id),
+            addString(node.id),
+            nullable(attrs.firstPaint, numeric, true) +
+            nullable(attrs.firstContentfulPaint, numeric, false)
+          )
+
+          var attrParts = addCustomAttributes(attrs.custom, addString)
+          children = children.concat(attrParts)
+          attrCount = attrParts.length
+
+          if (apmAttributes) {
+            childCount++
+            children.push('a,' + addString(apmAttributes))
+          }
+
+          break
+
+        case 2:
+          fields.push(
+            addString(params.method),
+            numeric(params.status),
+            addString(params.host),
+            addString(params.pathname),
+            numeric(metrics.txSize),
+            numeric(metrics.rxSize),
+            attrs.isFetch ? 1 : (attrs.isJSONP ? 2 : ''),
+            addString(node.id),
+            nullable(node.dt && node.dt.spanId, addString, true) +
+            nullable(node.dt && node.dt.traceId, addString, true) +
+            nullable(node.dt && node.dt.timestamp, numeric, false)
+          )
+          break
+
+        case 4:
+          var tracedTime = attrs.tracedTime
+          fields.push(
+            addString(attrs.name),
+            nullable(tracedTime, numeric, true) +
+            addString(node.id)
+          )
+          break
+      }
+
+      for (var i = 0; i < node.children.length; i++) {
+        addNode(node.children[i], children)
+      }
+
+      fields.unshift(
+        numeric(typeId),
+        numeric(childCount += attrCount)
+      )
+
+      nodeList.push(fields)
+
+      if (childCount) {
+        nodeList.push(children.join(';'))
+      }
+
+      if (hasNavTiming) {
+        // this build up the navTiming node
+        // it for each navTiming value (pre aggregated in nav-timing.js):
+        // we initialize the seperator to ',' (seperates the nodeType id from the first value)
+        // we initialize the navTiming node to 'b' (the nodeType id)
+        // if the value is present:
+        //   we add the seperator followed by the value
+        // otherwise
+        //   we add null seperator ('!') to the navTimingNode
+        //   we set the seperator to an empty string since we already wrote it above
+        //   the reason for writing the null seperator instead of setting the seperator
+        //   is to ensure we still write it if the null is the last navTiming value.
+
+        var seperator = ','
+        var navTimingNode = 'b'
+        var prev = 0
+
+        // get all navTiming values except navigationStart
+        // (since its the same as interaction.start)
+        // and limit to just the first 20 values we know about
+        mapOwn(navTiming.slice(1, 21), function (i, v) {
+          if (v !== void 0) {
+            navTimingNode += seperator + numeric(v - prev)
+            seperator = ','
+            prev = v
+          } else {
+            navTimingNode += seperator + '!'
+            seperator = ''
+          }
+        })
+        nodeList.push(navTimingNode)
+      } else if (typeId === 1) {
+        nodeList.push('')
+      }
+
+      return nodeList
+    }
+
+    return addNode(root, []).join(';')
+  }
+}

package/src/features/spa/constants.js

@@ -0,0 +1,36 @@
+import { originals } from '../../common/config/config'
+import { globalScope } from '../../common/util/global-scope'
+import { FEATURE_NAMES } from '../../loaders/features/features'
+
+export const FEATURE_NAME = FEATURE_NAMES.spa
+export const INTERACTION_EVENTS = [
+  'click',
+  'submit',
+  'keypress',
+  'keydown',
+  'keyup',
+  'change'
+]
+
+export const MAX_TIMER_BUDGET = 999
+export const FN_START = 'fn-start'
+export const FN_END = 'fn-end'
+export const CB_START = 'cb-start'
+export const INTERACTION_API = 'api-ixn-'
+export const REMAINING = 'remaining'
+export const INTERACTION = 'interaction'
+export const SPA_NODE = 'spaNode'
+export const JSONP_NODE = 'jsonpNode'
+export const FETCH_START = 'fetch-start'
+export const FETCH_DONE = 'fetch-done'
+export const FETCH_BODY = 'fetch-body-'
+export const JSONP_END = 'jsonp-end'
+
+export const originalSetTimeout = originals.ST
+
+export const START = '-start'
+export const END = '-end'
+export const BODY = '-body'
+export const CB_END = 'cb' + END
+export const JS_TIME = 'jsTime'
+export const FETCH = 'fetch'

package/src/features/spa/index.js

@@ -0,0 +1 @@
+export { Instrument as Spa } from './instrument/index'

package/src/features/spa/instrument/index.js

@@ -0,0 +1,114 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import {
+  wrapMutation, wrapPromise, wrapHistory, wrapTimer, wrapFetch, wrapXhr, wrapJsonP
+} from '../../../common/wrap'
+import { eventListenerOpts } from '../../../common/event-listener/event-listener-opts'
+import { InstrumentBase } from '../../utils/instrument-base'
+import { getRuntime } from '../../../common/config/config'
+import { now } from '../../../common/timing/now'
+import * as CONSTANTS from '../constants'
+import { isBrowserScope } from '../../../common/util/global-scope'
+
+const {
+  FEATURE_NAME, START, END, BODY, CB_END, JS_TIME, FETCH, FN_START, CB_START, FN_END
+} = CONSTANTS
+
+export class Instrument extends InstrumentBase {
+  static featureName = FEATURE_NAME
+  constructor (agentIdentifier, aggregator, auto = true) {
+    super(agentIdentifier, aggregator, FEATURE_NAME, auto)
+    if (!isBrowserScope) return // SPA not supported outside web env
+
+    if (!getRuntime(agentIdentifier).xhrWrappable) return
+
+    try {
+      this.removeOnAbort = new AbortController()
+    } catch (e) {}
+
+    let depth = 0
+    let startHash
+
+    const tracerEE = this.ee.get('tracer')
+    const jsonpEE = wrapJsonP(this.ee)
+    const promiseEE = wrapPromise(this.ee)
+    const timerEE = wrapTimer(this.ee)
+    const xhrEE = wrapXhr(this.ee)
+    const eventsEE = this.ee.get('events') // wrapXhr will call wrapEvents
+    const fetchEE = wrapFetch(this.ee)
+    const historyEE = wrapHistory(this.ee)
+    const mutationEE = wrapMutation(this.ee)
+
+    this.ee.on(FN_START, startTimestamp)
+    promiseEE.on(CB_START, startTimestamp)
+    jsonpEE.on(CB_START, startTimestamp)
+
+    this.ee.on(FN_END, endTimestamp)
+    promiseEE.on(CB_END, endTimestamp)
+    jsonpEE.on(CB_END, endTimestamp)
+
+    this.ee.buffer([FN_START, FN_END, 'xhr-resolved'], this.featureName)
+    eventsEE.buffer([FN_START], this.featureName)
+    timerEE.buffer(['setTimeout' + END, 'clearTimeout' + START, FN_START], this.featureName)
+    xhrEE.buffer([FN_START, 'new-xhr', 'send-xhr' + START], this.featureName)
+    fetchEE.buffer([FETCH + START, FETCH + '-done', FETCH + BODY + START, FETCH + BODY + END], this.featureName)
+    historyEE.buffer(['newURL'], this.featureName)
+    mutationEE.buffer([FN_START], this.featureName)
+    promiseEE.buffer(['propagate', CB_START, CB_END, 'executor-err', 'resolve' + START], this.featureName)
+    tracerEE.buffer([FN_START, 'no-' + FN_START], this.featureName)
+    jsonpEE.buffer(['new-jsonp', 'cb-start', 'jsonp-error', 'jsonp-end'], this.featureName)
+
+    timestamp(fetchEE, FETCH + START)
+    timestamp(fetchEE, FETCH + '-done')
+    timestamp(jsonpEE, 'new-jsonp')
+    timestamp(jsonpEE, 'jsonp-end')
+    timestamp(jsonpEE, 'cb-start')
+
+    historyEE.on('pushState-end', trackURLChange)
+    historyEE.on('replaceState-end', trackURLChange)
+
+    window.addEventListener('hashchange', trackURLChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+    window.addEventListener('load', trackURLChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+    window.addEventListener('popstate', function () {
+      trackURLChange(0, depth > 1)
+    }, eventListenerOpts(true, this.removeOnAbort?.signal))
+
+    function trackURLChange (unusedArgs, hashChangedDuringCb) {
+      historyEE.emit('newURL', ['' + window.location, hashChangedDuringCb])
+    }
+
+    function startTimestamp () {
+      depth++
+      startHash = window.location.hash
+      this[FN_START] = now()
+    }
+
+    function endTimestamp () {
+      depth--
+      if (window.location.hash !== startHash) {
+        trackURLChange(0, true)
+      }
+
+      var time = now()
+      this[JS_TIME] = (~~this[JS_TIME]) + time - this[FN_START]
+      this[FN_END] = time
+    }
+
+    function timestamp (ee, type) {
+      ee.on(type, function () {
+        this[type] = now()
+      })
+    }
+
+    this.abortHandler = this.#abort
+    this.importAggregator()
+  }
+
+  /** Restoration and resource release tasks to be done if SPA loader is being aborted. Unwind changes to globals and subscription to DOM events. */
+  #abort () {
+    this.removeOnAbort?.abort()
+    this.abortHandler = undefined // weakly allow this abort op to run only once
+  }
+}

package/src/features/utils/aggregate-base.js

@@ -0,0 +1,7 @@
+import { FeatureBase } from './feature-base'
+
+export class AggregateBase extends FeatureBase {
+  constructor (agentIdentifier, aggregator, featureName) {
+    super(agentIdentifier, aggregator, featureName)
+  }
+}

package/src/features/utils/feature-base.js

@@ -0,0 +1,51 @@
+import { getInfo, isConfigured, getRuntime } from '../../common/config/config'
+import { ee } from '../../common/event-emitter/contextual-ee'
+import { configure } from '../../loaders/configure/configure'
+import { gosCDN } from '../../common/window/nreum'
+
+export class FeatureBase {
+  constructor (agentIdentifier, aggregator, featureName) {
+    /** @type {string} */
+    this.agentIdentifier = agentIdentifier
+    /** @type {Aggregator} */
+    this.aggregator = aggregator
+    /** @type {ContextualEE} */
+    this.ee = ee.get(agentIdentifier, getRuntime(this.agentIdentifier).isolatedBacklog)
+    /** @type {string} */
+    this.featureName = featureName
+    /**
+     * Blocked can be used to prevent aggregation and harvest after inititalization time of the feature.
+     * This can currently happen if RUM response setToken flag is 0, which is tied to ingest account entitlement info.
+     * @type {boolean}
+     */
+    this.blocked = false
+
+    this.checkConfiguration()
+  }
+
+  /**
+   * Checks for additional `jsAttributes` items to support backward compatibility with implementations of the agent where
+   * loader configurations may appear after the loader code is executed.
+   */
+  checkConfiguration () {
+    // NOTE: This check has to happen at aggregator load time, but could be moved to `AggregateBase`.
+    if (!isConfigured(this.agentIdentifier)) {
+      let jsAttributes = { ...gosCDN().info?.jsAttributes }
+      try {
+        jsAttributes = {
+          ...jsAttributes,
+          ...getInfo(this.agentIdentifier)?.jsAttributes
+        }
+      } catch (err) {
+        // do nothing
+      }
+      configure(this.agentIdentifier, {
+        ...gosCDN(),
+        info: {
+          ...gosCDN().info,
+          jsAttributes
+        }
+      })
+    }
+  }
+}

package/src/features/utils/handler-cache.js

@@ -0,0 +1,60 @@
+
+/**
+ * A class to defer callback execution until a decision can be reached
+ */
+export class HandlerCache {
+  /** @private @type {boolean | undefined} */
+  #decision = undefined
+  /** @private @type {boolean} */
+  #shouldsettle = true
+  /** @private @type {Function[]} */
+  #cache = []
+  /** @private @type {Timeout} */
+  #settleTimer = setTimeout(() => this.#close(), 5000)
+
+  /**
+     * tell the handlerCache that its ok to immediately execute the callbacks that are triggered by the ee from this moment on
+     * and execute all the storage callbacks saved up in the handlerCache
+     * @private
+     */
+  #drain () {
+    this.#cache.forEach(h => h())
+    this.#cache = []
+    clearTimeout(this.#settleTimer)
+  }
+
+  /**
+     * tell the handlerCache not to execute any of the storage callbacks
+     * and wipe out all the storage callbacks saved up in the handlerCache
+     * @private
+     */
+  #close () {
+    this.#shouldsettle = false
+    this.#cache = []
+  }
+
+  /**
+     * Wrap callback functions with this method to defer their execution until a decision has been reached
+     * @param {Function} handler
+     * @returns {void}
+     */
+  settle (handler) {
+    if (this.#decision === false || this.#shouldsettle === false) return
+    else if (this.#decision === undefined) this.#cache.push(handler)
+    else handler()
+  }
+
+  /**
+     * Make a decision about what to do with the cache of callbacks.
+     * --- if true: tell the handlerCache that its ok to immediately execute the callbacks that are triggered by the ee from this moment on
+     * and execute all the storage callbacks saved up in the handlerCache ---
+     * --- if false: tell the handlerCache not to execute any of the storage callbacks
+     * and wipe out all the storage callbacks saved up in the handlerCache
+     * @param {boolean} decision
+     */
+  decide (decision) {
+    this.#decision = decision
+    if (decision === false) this.#close()
+    if (decision === true) this.#drain()
+  }
+}