@newrelic/browser-agent 1.258.2 → 1.259.0

package/dist/esm/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, SR_EVENT_EMITTER_TYPES } from '../constants';
+import { ABORT_REASONS, FEATURE_NAME, MAX_PAYLOAD_SIZE, QUERY_PARAM_PADDING, RRWEB_EVENT_TYPES, SR_EVENT_EMITTER_TYPES, TRIGGERS } from '../constants';
 import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config';
 import { AggregateBase } from '../../utils/aggregate-base';
 import { sharedChannel } from '../../../common/constants/shared-channel';
@@ -91,15 +91,6 @@ export class Aggregate extends AggregateBase {
       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);
@@ -117,9 +108,9 @@ export class Aggregate extends AggregateBase {
       inline_images,
       collect_fonts
     } = getConfigurationValue(this.agentIdentifier, 'session_replay');
-    this.waitForFlags(['sr']).then(_ref => {
-      let [flagOn] = _ref;
-      this.entitled = flagOn;
+    this.waitForFlags(['srs', 'sr']).then(_ref => {
+      let [srMode, entitled] = _ref;
+      this.entitled = !!entitled;
       if (!this.entitled) {
         deregisterDrain(this.agentIdentifier, this.featureName);
         if (this.recorder?.recording) {
@@ -129,11 +120,14 @@ export class Aggregate extends AggregateBase {
         return;
       }
       this.drain();
-      this.initializeRecording(Math.random() * 100 < error_sampling_rate, Math.random() * 100 < sampling_rate);
+      this.initializeRecording(srMode);
     }).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
-    });
+      if (this.mode === MODE.OFF) {
+        this.recorder?.stopRecording(); // stop any conservative preload recording launched by instrument
+        while (this.recorder?.getEvents().events.length) this.recorder?.clearBuffer?.();
+      }
+      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);
@@ -176,7 +170,7 @@ export class Aggregate extends AggregateBase {
    * @param {boolean} ignoreSession - whether to force the method to ignore the session state and use just the sample flags
    * @returns {void}
    */
-  async initializeRecording(errorSample, fullSample, ignoreSession) {
+  async initializeRecording(srMode, ignoreSession) {
     this.initialized = true;
     if (!this.entitled) return;
 
@@ -191,23 +185,17 @@ export class Aggregate extends AggregateBase {
       timeKeeper
     } = getRuntime(this.agentIdentifier);
     this.timeKeeper = timeKeeper;
-    if (!session.isNew && !ignoreSession) {
+    if (this.recorder?.parent.trigger === TRIGGERS.API && this.recorder?.recording) {
+      this.mode = MODE.FULL;
+    } else if (!session.isNew && !ignoreSession) {
       // inherit the mode of the existing session
       this.mode = session.state.sessionReplayMode;
     } else {
       // The session is new... determine the mode the new session should start in
-      if (fullSample) this.mode = MODE.FULL; // full mode has precedence over error mode
-      else if (errorSample) this.mode = MODE.ERROR;
-      // If neither are selected, then don't record (early return)
-      else {
-        return;
-      }
-    }
-    if (this.recorder?.getEvents().type === 'preloaded') {
-      this.prepUtils().then(() => {
-        this.scheduler.runHarvest();
-      });
+      this.mode = srMode;
     }
+    // If off, then don't record (early return)
+    if (this.mode === MODE.OFF) return;
     if (!this.recorder) {
       try {
         // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
@@ -225,13 +213,20 @@ export class Aggregate extends AggregateBase {
 
     // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
     if (this.mode === MODE.ERROR && this.errorNoticed) this.mode = MODE.FULL;
-
-    // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
-    // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
-    // If an error happened in ERROR mode before we've gotten to this stage, it will have already set the mode to FULL
-    if (this.mode === MODE.FULL && !this.scheduler.started) {
-      // We only report (harvest) in FULL mode
-      this.scheduler.startTimer(this.harvestTimeSeconds);
+    if (this.mode === MODE.FULL) {
+      // If theres preloaded events and we are in full mode, just harvest immediately to clear up space and for consistency
+      if (this.recorder?.getEvents().type === 'preloaded') {
+        this.prepUtils().then(() => {
+          this.scheduler.runHarvest();
+        });
+      }
+      // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
+      // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
+      // If an error happened in ERROR mode before we've gotten to this stage, it will have already set the mode to FULL
+      if (!this.scheduler.started) {
+        // We only report (harvest) in FULL mode
+        this.scheduler.startTimer(this.harvestTimeSeconds);
+      }
     }
     await this.prepUtils();
     if (!this.recorder.recording) this.recorder.startRecording();

package/dist/esm/features/session_replay/constants.js

@@ -53,4 +53,7 @@ export const ABORT_REASONS = {
   }
 };
 /** Reserved room for query param attrs */
-export const QUERY_PARAM_PADDING = 5000;
+export const QUERY_PARAM_PADDING = 5000;
+export const TRIGGERS = {
+  API: 'api'
+};

package/dist/esm/features/session_replay/instrument/index.js

@@ -12,10 +12,11 @@
 import { handle } from '../../../common/event-emitter/handle';
 import { DEFAULT_KEY, MODE, PREFIX } from '../../../common/session/constants';
 import { InstrumentBase } from '../../utils/instrument-base';
-import { FEATURE_NAME, SR_EVENT_EMITTER_TYPES } from '../constants';
-import { isPreloadAllowed } from '../shared/utils';
+import { hasReplayPrerequisite, isPreloadAllowed } from '../shared/utils';
+import { FEATURE_NAME, SR_EVENT_EMITTER_TYPES, TRIGGERS } from '../constants';
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME;
+  #mode;
   constructor(agentIdentifier, aggregator) {
     let auto = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     super(agentIdentifier, aggregator, FEATURE_NAME, auto);
@@ -24,8 +25,12 @@ export class Instrument extends InstrumentBase {
     try {
       session = JSON.parse(localStorage.getItem("".concat(PREFIX, "_").concat(DEFAULT_KEY)));
     } catch (err) {}
+    if (hasReplayPrerequisite(agentIdentifier)) {
+      this.ee.on('recordReplay', () => this.#apiStartOrRestartReplay());
+    }
     if (this.#canPreloadRecorder(session)) {
-      this.#startRecording(session?.sessionReplayMode);
+      this.#mode = session?.sessionReplayMode;
+      this.#preloadStartRecording();
     } else {
       this.importAggregator();
     }
@@ -58,20 +63,55 @@ export class Instrument extends InstrumentBase {
       return isPreloadAllowed(this.agentIdentifier);
     }
   }
-  async #startRecording(mode) {
-    const {
-      Recorder
-    } = await import( /* webpackChunkName: "recorder" */'../shared/recorder');
-    this.recorder = new Recorder({
-      mode,
-      agentIdentifier: this.agentIdentifier,
-      ee: this.ee
-    });
-    this.recorder.startRecording();
-    this.abortHandler = this.recorder.stopRecording;
+  #alreadyStarted = false;
+  /**
+   * This func is use for early pre-load recording prior to replay feature (agg) being loaded onto the page. It should only setup once, including if already called and in-progress.
+   */
+  async #preloadStartRecording(trigger) {
+    if (this.#alreadyStarted) return;
+    this.#alreadyStarted = true;
+    try {
+      const {
+        Recorder
+      } = await import( /* webpackChunkName: "recorder" */'../shared/recorder');
+
+      // If startReplay() has been used by this point, we must record in full mode regardless of session preload:
+      // Note: recorder starts here with w/e the mode is at this time, but this may be changed later (see #apiStartOrRestartReplay else-case)
+      this.recorder ??= new Recorder({
+        mode: this.#mode,
+        agentIdentifier: this.agentIdentifier,
+        trigger,
+        ee: this.ee
+      });
+      this.recorder.startRecording();
+      this.abortHandler = this.recorder.stopRecording;
+    } catch (e) {}
     this.importAggregator({
       recorder: this.recorder,
       errorNoticed: this.errorNoticed
     });
   }
+
+  /**
+   * Called whenever startReplay API is used. That could occur any time, pre or post load.
+   */
+  #apiStartOrRestartReplay() {
+    if (this.featAggregate) {
+      // post-load; there's possibly already an ongoing recording
+      if (this.featAggregate.mode !== MODE.FULL) this.featAggregate.initializeRecording(MODE.FULL, true);
+    } else {
+      // pre-load
+      this.#mode = MODE.FULL;
+      this.#preloadStartRecording(TRIGGERS.API);
+      // There's a race here wherein either:
+      // a. Recorder has not been initialized, and we've set the enforced mode, so we're good, or;
+      // b. Record has been initialized, possibly with the "wrong" mode, so we have to correct that + restart.
+      if (this.recorder && this.recorder.parent.mode !== MODE.FULL) {
+        this.recorder.parent.mode = MODE.FULL;
+        this.recorder.stopRecording();
+        this.recorder.startRecording();
+        this.abortHandler = this.recorder.stopRecording;
+      }
+    }
+  }
 }

package/dist/esm/features/session_replay/shared/utils.js

@@ -1,12 +1,10 @@
 import { getConfigurationValue, originals } from '../../../common/config/config';
-import { isBrowserScope, originTime } from '../../../common/constants/runtime';
-export function enableSessionTracking(agentId) {
-  return isBrowserScope && getConfigurationValue(agentId, 'privacy.cookies_enabled') === true;
-}
-function hasReplayPrerequisite(agentId) {
+import { canEnableSessionTracking } from '../../utils/feature-gates';
+import { originTime } from '../../../common/constants/runtime';
+export function hasReplayPrerequisite(agentId) {
   return !!originals.MO &&
   // Session Replay cannot work without Mutation Observer
-  enableSessionTracking(agentId) &&
+  canEnableSessionTracking(agentId) &&
   // 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
 }