@newrelic/browser-agent 1.255.0 → 1.256.1

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

@@ -1,6 +1,6 @@
 import { record as recorder } from 'rrweb'
 import { stringify } from '../../../common/util/stringify'
-import { AVG_COMPRESSION, CHECKOUT_MS, IDEAL_PAYLOAD_SIZE, QUERY_PARAM_PADDING, RRWEB_EVENT_TYPES } from '../constants'
+import { AVG_COMPRESSION, CHECKOUT_MS, IDEAL_PAYLOAD_SIZE, QUERY_PARAM_PADDING, RRWEB_EVENT_TYPES, SR_EVENT_EMITTER_TYPES } from '../constants'
 import { getConfigurationValue } from '../../../common/config/config'
 import { RecorderEvents } from './recorder-events'
 import { MODE } from '../../../common/session/constants'
@@ -8,6 +8,7 @@ import { stylesheetEvaluator } from './stylesheet-evaluator'
 import { handle } from '../../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
+import { buildNRMetaNode } from './utils'
 
 export class Recorder {
   /** Each page mutation or event will be stored (raw) in this array. This array will be cleared on each harvest */
@@ -20,9 +21,9 @@ export class Recorder {
   #fixing = false
 
   constructor (parent) {
-    this.#events = new RecorderEvents({ canCorrectTimestamps: !!parent.timeKeeper?.ready })
-    this.#backloggedEvents = new RecorderEvents({ canCorrectTimestamps: !!parent.timeKeeper?.ready })
-    this.#preloaded = [new RecorderEvents({ canCorrectTimestamps: !!parent.timeKeeper?.ready })]
+    this.#events = new RecorderEvents()
+    this.#backloggedEvents = new RecorderEvents()
+    this.#preloaded = [new RecorderEvents()]
     /** True when actively recording, false when paused or stopped */
     this.recording = false
     /** The pointer to the current bucket holding rrweb events */
@@ -40,14 +41,9 @@ export class Recorder {
   }
 
   getEvents () {
-    if (this.#preloaded[0]?.events.length) {
-      const preloadedEvents = this.returnCorrectTimestamps(this.#preloaded[0])
-      return { ...this.#preloaded[0], events: preloadedEvents, type: 'preloaded' }
-    }
-    const backloggedEvents = this.returnCorrectTimestamps(this.#backloggedEvents)
-    const events = this.returnCorrectTimestamps(this.#events)
+    if (this.#preloaded[0]?.events.length) return { ...this.#preloaded[0], type: 'preloaded' }
     return {
-      events: [...backloggedEvents, ...events].filter(x => x),
+      events: [...this.#backloggedEvents.events, ...this.#events.events].filter(x => x),
       type: 'standard',
       cycleTimestamp: Math.min(this.#backloggedEvents.cycleTimestamp, this.#events.cycleTimestamp),
       payloadBytesEstimation: this.#backloggedEvents.payloadBytesEstimation + this.#events.payloadBytesEstimation,
@@ -58,30 +54,22 @@ export class Recorder {
     }
   }
 
-  /**
-   * Returns time-corrected events. If the events were correctable from the beginning, this correction will have already been applied.
-   * @param {SessionReplayEvent[]} events The array of buffered SR nodes
-   * @returns {CorrectedSessionReplayEvent[]}
-   */
-  returnCorrectTimestamps (events) {
-    if (!this.parent.timeKeeper?.ready) return events.events
-    return events.canCorrectTimestamps
-      ? events.events
-      : events.events.map(({ __serialized, timestamp, ...e }) => ({ timestamp: this.parent.timeKeeper.correctAbsoluteTimestamp(timestamp), ...e }))
-  }
-
   /** Clears the buffer (this.#events), and resets all payload metadata properties */
   clearBuffer () {
     if (this.#preloaded[0]?.events.length) this.#preloaded.shift()
     else if (this.parent.mode === MODE.ERROR) this.#backloggedEvents = this.#events
-    else this.#backloggedEvents = new RecorderEvents({ canCorrectTimestamps: !!this.parent.timeKeeper?.ready })
-    this.#events = new RecorderEvents({ canCorrectTimestamps: !!this.parent.timeKeeper?.ready })
+    else this.#backloggedEvents = new RecorderEvents()
+    this.#events = new RecorderEvents()
   }
 
   /** Begin recording using configured recording lib */
   startRecording () {
     this.recording = true
     const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs, inline_stylesheet, inline_images, collect_fonts } = getConfigurationValue(this.parent.agentIdentifier, 'session_replay')
+    const customMasker = (text, element) => {
+      if (element?.type?.toLowerCase() !== 'password' && (element?.dataset.nrUnmask !== undefined || element?.classList.contains('nr-unmask'))) return text
+      return '*'.repeat(text.length)
+    }
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
     const stop = recorder({
@@ -92,15 +80,20 @@ export class Recorder {
       blockSelector: block_selector,
       maskInputOptions: mask_input_options,
       maskTextSelector: mask_text_selector,
+      maskTextFn: customMasker,
       maskAllInputs: mask_all_inputs,
+      maskInputFn: customMasker,
       inlineStylesheet: inline_stylesheet,
       inlineImages: inline_images,
       collectFonts: collect_fonts,
       checkoutEveryNms: CHECKOUT_MS[this.parent.mode]
     })
 
+    this.parent.ee.emit(SR_EVENT_EMITTER_TYPES.REPLAY_RUNNING, [true, this.parent.mode])
+
     this.stopRecording = () => {
       this.recording = false
+      this.parent.ee.emit(SR_EVENT_EMITTER_TYPES.REPLAY_RUNNING, [false, this.parent.mode])
       stop()
     }
   }
@@ -148,7 +141,8 @@ export class Recorder {
 
     if (this.parent.blocked) return
 
-    if (this.currentBufferTarget.canCorrectTimestamps) {
+    if (this.parent.timeKeeper?.ready && !event.__newrelic) {
+      event.__newrelic = buildNRMetaNode(event.timestamp, this.parent.timeKeeper)
       event.timestamp = this.parent.timeKeeper.correctAbsoluteTimestamp(event.timestamp)
     }
     event.__serialized = stringify(event)
@@ -184,7 +178,7 @@ export class Recorder {
         this.parent.scheduler.runHarvest()
       } else {
         // we are still in "preload" and it triggered a "stop point".  Make a new set, which will get pointed at on next cycle
-        this.#preloaded.push(new RecorderEvents({ canCorrectTimestamps: !!this.parent.timeKeeper?.ready }))
+        this.#preloaded.push(new RecorderEvents())
       }
     }
   }

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

@@ -17,3 +17,15 @@ 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
 }
+
+export function buildNRMetaNode (timestamp, timeKeeper) {
+  const correctedTimestamp = timeKeeper.correctAbsoluteTimestamp(timestamp)
+  return {
+    originalTimestamp: timestamp,
+    correctedTimestamp,
+    timestampDiff: timestamp - correctedTimestamp,
+    timeKeeperOriginTime: timeKeeper.originTime,
+    timeKeeperCorrectedOriginTime: timeKeeper.correctedOriginTime,
+    timeKeeperDiff: Math.floor(timeKeeper.originTime - timeKeeper.correctedOriginTime)
+  }
+}

package/src/loaders/api/api.js

@@ -15,6 +15,7 @@ import { gosCDN } from '../../common/window/nreum'
 import { apiMethods, asyncApiMethods } from './api-methods'
 import { SR_EVENT_EMITTER_TYPES } from '../../features/session_replay/constants'
 import { now } from '../../common/timing/now'
+import { MODE } from '../../common/session/constants'
 
 export function setTopLevelCallers () {
   const nr = gosCDN()
@@ -33,12 +34,20 @@ export function setTopLevelCallers () {
   }
 }
 
+const replayRunning = {}
+
 export function setAPI (agentIdentifier, forceDrain, runSoftNavOverSpa = false) {
   if (!forceDrain) registerDrain(agentIdentifier, 'api')
   const apiInterface = {}
   var instanceEE = ee.get(agentIdentifier)
   var tracerEE = instanceEE.get('tracer')
 
+  replayRunning[agentIdentifier] = MODE.OFF
+
+  instanceEE.on(SR_EVENT_EMITTER_TYPES.REPLAY_RUNNING, (isRunning) => {
+    replayRunning[agentIdentifier] = isRunning
+  })
+
   var prefix = 'api-'
   var spaPrefix = prefix + 'ixn-'
 
@@ -184,7 +193,7 @@ export function setAPI (agentIdentifier, forceDrain, runSoftNavOverSpa = false)
   apiInterface.noticeError = function (err, customAttributes) {
     if (typeof err === 'string') err = new Error(err)
     handle(SUPPORTABILITY_METRIC_CHANNEL, ['API/noticeError/called'], undefined, FEATURE_NAMES.metrics, instanceEE)
-    handle('err', [err, now(), false, customAttributes], undefined, FEATURE_NAMES.jserrors, instanceEE)
+    handle('err', [err, now(), false, customAttributes, !!replayRunning[agentIdentifier]], undefined, FEATURE_NAMES.jserrors, instanceEE)
   }
 
   // theres no window.load event on non-browser scopes, lazy load immediately