@newrelic/browser-agent 1.252.1 → 1.253.0

package/src/features/session_replay/aggregate/index.js

@@ -12,7 +12,7 @@
 
 import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler'
-import { ABORT_REASONS, FEATURE_NAME, MAX_PAYLOAD_SIZE, QUERY_PARAM_PADDING, RRWEB_EVENT_TYPES } from '../constants'
+import { ABORT_REASONS, FEATURE_NAME, MAX_PAYLOAD_SIZE, QUERY_PARAM_PADDING, RRWEB_EVENT_TYPES, SR_EVENT_EMITTER_TYPES } from '../constants'
 import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { sharedChannel } from '../../../common/constants/shared-channel'
@@ -55,102 +55,93 @@ export class Aggregate extends AggregateBase {
 
     handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/Enabled'], undefined, FEATURE_NAMES.metrics, this.ee)
 
-    const shouldSetup = (
-      getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true &&
-      getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true
-    )
-
-    if (shouldSetup) {
-      // The SessionEntity class can emit a message indicating the session was cleared and reset (expiry, inactivity). This feature must abort and never resume if that occurs.
-      this.ee.on(SESSION_EVENTS.RESET, () => {
-        this.scheduler.runHarvest()
-        this.abort(ABORT_REASONS.RESET)
-      })
-
-      // The SessionEntity class can emit a message indicating the session was paused (visibility change). This feature must stop recording if that occurs.
-      this.ee.on(SESSION_EVENTS.PAUSE, () => { this.recorder?.stopRecording() })
-      // The SessionEntity class can emit a message indicating the session was resumed (visibility change). This feature must start running again (if already running) if that occurs.
-      this.ee.on(SESSION_EVENTS.RESUME, () => {
-        if (!this.recorder) return
-        // if the mode changed on a different tab, it needs to update this instance to match
-        const { session } = getRuntime(this.agentIdentifier)
-        this.mode = session.state.sessionReplayMode
-        if (!this.initialized || this.mode === MODE.OFF) return
-        this.recorder?.startRecording()
-      })
+    // The SessionEntity class can emit a message indicating the session was cleared and reset (expiry, inactivity). This feature must abort and never resume if that occurs.
+    this.ee.on(SESSION_EVENTS.RESET, () => {
+      this.scheduler.runHarvest()
+      this.abort(ABORT_REASONS.RESET)
+    })
+
+    // The SessionEntity class can emit a message indicating the session was paused (visibility change). This feature must stop recording if that occurs.
+    this.ee.on(SESSION_EVENTS.PAUSE, () => { this.recorder?.stopRecording() })
+    // The SessionEntity class can emit a message indicating the session was resumed (visibility change). This feature must start running again (if already running) if that occurs.
+    this.ee.on(SESSION_EVENTS.RESUME, () => {
+      if (!this.recorder) return
+      // if the mode changed on a different tab, it needs to update this instance to match
+      const { session } = getRuntime(this.agentIdentifier)
+      this.mode = session.state.sessionReplayMode
+      if (!this.initialized || this.mode === MODE.OFF) return
+      this.recorder?.startRecording()
+    })
+
+    this.ee.on(SESSION_EVENTS.UPDATE, (type, data) => {
+      if (!this.recorder || !this.initialized || this.blocked || type !== SESSION_EVENT_TYPES.CROSS_TAB) return
+      if (this.mode !== MODE.OFF && data.sessionReplayMode === MODE.OFF) this.abort(ABORT_REASONS.CROSS_TAB)
+      this.mode = data.sessionReplay
+    })
+
+    // Bespoke logic for blobs endpoint.
+    this.scheduler = new HarvestScheduler('browser/blobs', {
+      onFinished: this.onHarvestFinished.bind(this),
+      retryDelay: this.harvestTimeSeconds,
+      getPayload: this.prepareHarvest.bind(this),
+      raw: true
+    }, this)
+
+    registerHandler(SR_EVENT_EMITTER_TYPES.RECORD, () => {
+      // if it has aborted or BCS returned bad entitlements, do not allow
+      if (this.blocked || !this.entitled) return
+      // if it isnt already (fully) initialized... initialize it
+      if (!this.recorder) this.initializeRecording(false, true, true)
+      // its been initialized and imported the recorder but its not recording (mode === off || error)
+      else if (this.mode !== MODE.FULL) this.switchToFull()
+      // if it gets all the way to here, that means a full session is already recording... do nothing
+    }, this.featureName, this.ee)
+
+    registerHandler(SR_EVENT_EMITTER_TYPES.PAUSE, () => {
+      this.forceStop(this.mode !== MODE.ERROR)
+    }, this.featureName, this.ee)
+
+    // Wait for an error to be reported.  This currently is wrapped around the "Error" feature.  This is a feature-feature dependency.
+    // This was to ensure that all errors, including those on the page before load and those handled with "noticeError" are accounted for. Needs evalulation
+    registerHandler('errorAgg', (e) => {
+      this.errorNoticed = true
+      if (this.recorder) this.recorder.currentBufferTarget.hasError = true
+      // run once
+      if (this.mode === MODE.ERROR && globalScope?.document.visibilityState === 'visible') {
+        this.switchToFull()
+      }
+    }, this.featureName, this.ee)
 
-      this.ee.on(SESSION_EVENTS.UPDATE, (type, data) => {
-        if (!this.recorder || !this.initialized || this.blocked || type !== SESSION_EVENT_TYPES.CROSS_TAB) return
-        if (this.mode !== MODE.OFF && data.sessionReplayMode === MODE.OFF) this.abort(ABORT_REASONS.CROSS_TAB)
-        this.mode = data.sessionReplay
-      })
+    const { error_sampling_rate, sampling_rate, autoStart, block_selector, mask_text_selector, mask_all_inputs, inline_stylesheet, inline_images, collect_fonts } = getConfigurationValue(this.agentIdentifier, 'session_replay')
 
-      // Bespoke logic for blobs endpoint.
-      this.scheduler = new HarvestScheduler('browser/blobs', {
-        onFinished: this.onHarvestFinished.bind(this),
-        retryDelay: this.harvestTimeSeconds,
-        getPayload: this.prepareHarvest.bind(this),
-        raw: true
-      }, this)
-
-      if (this.recorder?.getEvents().type === 'preloaded') {
-        this.prepUtils().then(() => {
-          this.scheduler.runHarvest()
-        })
+    this.waitForFlags(['sr']).then(([flagOn]) => {
+      this.entitled = flagOn
+      if (!this.entitled && this.recorder?.recording) {
+        this.abort(ABORT_REASONS.ENTITLEMENTS)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/EnabledNotEntitled/Detected'], undefined, FEATURE_NAMES.metrics, this.ee)
+        return
       }
-
-      registerHandler('recordReplay', () => {
-        // if it has aborted or BCS returned bad entitlements, do not allow
-        if (this.blocked || !this.entitled) return
-        // if it isnt already (fully) initialized... initialize it
-        if (!this.recorder) this.initializeRecording(false, true, true)
-        // its been initialized and imported the recorder but its not recording (mode === off || error)
-        else if (this.mode !== MODE.FULL) this.switchToFull()
-        // if it gets all the way to here, that means a full session is already recording... do nothing
-      }, this.featureName, this.ee)
-
-      registerHandler('pauseReplay', () => {
-        this.forceStop(this.mode !== MODE.ERROR)
-      }, this.featureName, this.ee)
-
-      // Wait for an error to be reported.  This currently is wrapped around the "Error" feature.  This is a feature-feature dependency.
-      // This was to ensure that all errors, including those on the page before load and those handled with "noticeError" are accounted for. Needs evalulation
-      registerHandler('errorAgg', (e) => {
-        this.errorNoticed = true
-        if (this.recorder) this.recorder.currentBufferTarget.hasError = true
-        // run once
-        if (this.mode === MODE.ERROR && globalScope?.document.visibilityState === 'visible') {
-          this.switchToFull()
-        }
-      }, this.featureName, this.ee)
-
-      const { error_sampling_rate, sampling_rate, autoStart, block_selector, mask_text_selector, mask_all_inputs, inline_stylesheet, inline_images, collect_fonts } = getConfigurationValue(this.agentIdentifier, 'session_replay')
-
-      this.waitForFlags(['sr']).then(([flagOn]) => {
-        this.entitled = flagOn
-        if (!this.entitled && this.recorder?.recording) {
-          this.recorder.abort(ABORT_REASONS.ENTITLEMENTS)
-          handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/EnabledNotEntitled/Detected'], undefined, FEATURE_NAMES.metrics, this.ee)
-        }
-        this.initializeRecording(
-          (Math.random() * 100) < error_sampling_rate,
-          (Math.random() * 100) < sampling_rate
-        )
-      }).then(() => sharedChannel.onReplayReady(this.mode)) // notify watchers that replay started with the mode
-
-      /** Detect if the default configs have been altered and report a SM.  This is useful to evaluate what the reasonable defaults are across a customer base over time */
-      if (!autoStart) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/AutoStart/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (collect_fonts === true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/CollectFonts/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (inline_stylesheet !== true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineStylesheet/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (inline_images === true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineImages/Modifed'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (mask_all_inputs !== true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskAllInputs/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (block_selector !== '[data-nr-block]') handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/BlockSelector/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-      if (mask_text_selector !== '*') handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskTextSelector/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
-
-      handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/SamplingRate/Value', sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
-      handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/ErrorSamplingRate/Value', error_sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
-      this.drain()
-    }
+      this.initializeRecording(
+        (Math.random() * 100) < error_sampling_rate,
+        (Math.random() * 100) < sampling_rate
+      )
+    }).then(() => {
+      if (this.mode === MODE.OFF) args?.recorder?.stopRecording() // stop any conservative preload recording launched by instrument
+      sharedChannel.onReplayReady(this.mode) // notify watchers that replay started with the mode
+    })
+
+    /** Detect if the default configs have been altered and report a SM.  This is useful to evaluate what the reasonable defaults are across a customer base over time */
+    if (!autoStart) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/AutoStart/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (collect_fonts === true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/CollectFonts/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (inline_stylesheet !== true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineStylesheet/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (inline_images === true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineImages/Modifed'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (mask_all_inputs !== true) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskAllInputs/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (block_selector !== '[data-nr-block]') handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/BlockSelector/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+    if (mask_text_selector !== '*') handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskTextSelector/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+
+    handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/SamplingRate/Value', sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
+    handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/ErrorSamplingRate/Value', error_sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
+    this.drain()
   }
 
   switchToFull () {
@@ -197,6 +188,12 @@ export class Aggregate extends AggregateBase {
       }
     }
 
+    if (this.recorder?.getEvents().type === 'preloaded') {
+      this.prepUtils().then(() => {
+        this.scheduler.runHarvest()
+      })
+    }
+
     if (!this.recorder) {
       try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
@@ -374,7 +371,7 @@ export class Aggregate extends AggregateBase {
     this.syncWithSessionManager({ sessionReplayMode: this.mode })
     this.recorder?.clearTimestamps?.()
     this.ee.emit('REPLAY_ABORTED')
-    this.recorder?.clearBuffer?.()
+    while (this.recorder?.getEvents().events.length) this.recorder?.clearBuffer?.()
   }
 
   syncWithSessionManager (state = {}) {

package/src/features/session_replay/constants.js

@@ -3,6 +3,11 @@ import { FEATURE_NAMES } from '../../loaders/features/features'
 
 export const FEATURE_NAME = FEATURE_NAMES.sessionReplay
 
+export const SR_EVENT_EMITTER_TYPES = {
+  RECORD: 'recordReplay',
+  PAUSE: 'pauseReplay'
+}
+
 export const AVG_COMPRESSION = 0.12
 export const RRWEB_EVENT_TYPES = {
   DomContentLoaded: 0,

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

@@ -9,23 +9,37 @@
  * It is not production ready, and is not intended to be imported or implemented in any build of the browser agent until
  * functionality is validated and a full user experience is curated.
  */
-import { MODE } from '../../../common/session/constants'
+import { DEFAULT_KEY, MODE, PREFIX } from '../../../common/session/constants'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME } from '../constants'
+import { isPreloadAllowed } from '../shared/utils'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
   constructor (agentIdentifier, aggregator, auto = true) {
     super(agentIdentifier, aggregator, FEATURE_NAME, auto)
+    let session
     try {
-      const session = JSON.parse(localStorage.getItem('NRBA_SESSION'))
-      if (session.sessionReplayMode !== MODE.OFF) {
-        this.#startRecording(session.sessionReplayMode)
-      } else {
-        this.importAggregator({})
-      }
-    } catch (err) {
-      this.importAggregator({})
+      session = JSON.parse(localStorage.getItem(`${PREFIX}_${DEFAULT_KEY}`))
+    } catch (err) { }
+
+    if (this.#canPreloadRecorder(session)) {
+      this.#startRecording(session?.sessionReplayMode)
+    } else {
+      this.importAggregator()
+    }
+  }
+
+  // At this point wherein session state exists already but we haven't init SessionEntity aka verify timers.
+  #canPreloadRecorder (session) {
+    if (!session) { // this might be a new session if entity initializes: conservatively start recording if first-time config allows
+      // Note: users with SR enabled, as well as these other configs enabled by-default, will be penalized by the recorder overhead EVEN IF they don't actually have or get
+      // entitlement or sampling decision, or otherwise intentionally opted-in for the feature.
+      return isPreloadAllowed(this.agentIdentifier)
+    } else if (session.sessionReplayMode === MODE.FULL || session.sessionReplayMode === MODE.ERROR) {
+      return true // existing sessions get to continue recording, regardless of this page's configs or if it has expired (conservatively)
+    } else { // SR mode was OFF but may potentially be turned on if session resets and configs allows the new session to have replay...
+      return isPreloadAllowed(this.agentIdentifier)
     }
   }
 
@@ -33,6 +47,7 @@ export class Instrument extends InstrumentBase {
     const { Recorder } = (await import(/* webpackChunkName: "recorder" */'../shared/recorder'))
     this.recorder = new Recorder({ mode, agentIdentifier: this.agentIdentifier })
     this.recorder.startRecording()
+    this.abortHandler = this.recorder.stopRecording
     this.importAggregator({ recorder: this.recorder })
   }
 }

package/src/features/session_replay/shared/utils.js

@@ -0,0 +1,19 @@
+import { getConfigurationValue, originals } from '../../../common/config/config'
+import { isBrowserScope } from '../../../common/constants/runtime'
+
+export const enableSessionTracking = (agentId) => isBrowserScope && getConfigurationValue(agentId, 'privacy.cookies_enabled') === true
+
+function hasReplayPrerequisite (agentId) {
+  return originals.MO && // Session Replay cannot work without Mutation Observer
+  enableSessionTracking && // requires session tracking to be running (hence "session" replay...)
+  getConfigurationValue(agentId, 'session_trace.enabled') === true // Session Replay as of now is tightly coupled with Session Trace in the UI
+}
+
+export function isPreloadAllowed (agentId) {
+  return getConfigurationValue(agentId, 'session_replay.preload') === true && hasReplayPrerequisite(agentId)
+}
+
+export function canImportReplayAgg (agentId, sessionMgr) {
+  if (!hasReplayPrerequisite(agentId)) return false
+  return !!sessionMgr?.isNew || !!sessionMgr?.state.sessionReplayMode // Session Replay should only try to run if already running from a previous page, or at the beginning of a session
+}

package/src/features/soft_navigations/aggregate/ajax-node.js

@@ -0,0 +1,57 @@
+import { addCustomAttributes, getAddStringContext, nullable, numeric } from '../../../common/serialize/bel-serializer'
+import { NODE_TYPE } from '../constants'
+import { BelNode } from './bel-node'
+
+export class AjaxNode extends BelNode {
+  constructor (agentIdentifier, ajaxEvent) {
+    super(agentIdentifier)
+    this.belType = NODE_TYPE.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 : '' // 'xhr' and 'beacon' types get the empty string
+    this.spanId = ajaxEvent.spanId
+    this.traceId = ajaxEvent.traceId
+    this.spanTimestamp = ajaxEvent.spanTimestamp
+    this.gql = ajaxEvent.gql
+
+    this.start = ajaxEvent.startTime
+    this.end = ajaxEvent.endTime
+  }
+
+  serialize (parentStartTimestamp) {
+    const addString = getAddStringContext(this.agentIdentifier)
+    const nodeList = []
+
+    // IMPORTANT: The order in which addString is called matters and correlates to the order in which string shows up in the harvest payload. Do not re-order the following code.
+    const fields = [
+      numeric(this.belType),
+      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),
+      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
+
+    fields[1] = numeric(allAttachedNodes.length)
+    nodeList.push(fields)
+    if (allAttachedNodes.length) nodeList.push(allAttachedNodes.join(';'))
+
+    return nodeList.join(';')
+  }
+}

package/src/features/soft_navigations/aggregate/bel-node.js

@@ -0,0 +1,26 @@
+import { now } from '../../../common/timing/now'
+
+let nodesSeen = 0
+
+export class BelNode {
+  belType
+  /** List of other BelNode derivatives. Each children should be of a subclass that implements its own 'serialize' function. */
+  children = []
+  start = now()
+  end
+  callbackEnd = 0
+  callbackDuration = 0
+  nodeId = ++nodesSeen
+
+  constructor (agentIdentifier) {
+    if (!agentIdentifier) throw new Error('Interaction is missing core attributes')
+    this.agentIdentifier = agentIdentifier
+  }
+
+  addChild (child) {
+    this.children.push(child)
+  }
+
+  /** Virtual fn for stringifying an instance. */
+  serialize () {}
+}