@newrelic/browser-agent 1.240.0 → 1.241.0

package/dist/cjs/common/config/state/init.js

@@ -11,8 +11,8 @@ var _nreum = require("../../window/nreum");
 var _configurable = require("./configurable");
 const model = () => {
   const hiddenState = {
-    blockSelector: '[data-nr-block]',
-    maskInputOptions: {
+    block_selector: '[data-nr-block]',
+    mask_input_options: {
       password: true
     }
   };
@@ -86,35 +86,37 @@ const model = () => {
       autoStart: true,
       enabled: false,
       harvestTimeSeconds: 60,
-      sampleRate: 0.1,
-      errorSampleRate: 0.1,
+      sampling_rate: 50,
+      // float from 0 - 100
+      error_sampling_rate: 50,
+      // float from 0 - 100
       // recording config settings
-      maskTextSelector: '*',
-      maskAllInputs: true,
+      mask_text_selector: '*',
+      mask_all_inputs: true,
       // these properties only have getters because they are enforcable constants and should error if someone tries to override them
-      get blockClass() {
+      get block_class() {
         return 'nr-block';
       },
-      get ignoreClass() {
+      get ignore_class() {
         return 'nr-ignore';
       },
-      get maskTextClass() {
+      get mask_text_class() {
         return 'nr-mask';
       },
       // props with a getter and setter are used to extend enforcable constants with customer input
       // we must preserve data-nr-block no matter what else the customer sets
-      get blockSelector() {
-        return hiddenState.blockSelector;
+      get block_selector() {
+        return hiddenState.block_selector;
       },
-      set blockSelector(val) {
-        hiddenState.blockSelector += ",".concat(val);
+      set block_selector(val) {
+        hiddenState.block_selector += ",".concat(val);
       },
       // password: must always be present and true no matter what customer sets
-      get maskInputOptions() {
-        return hiddenState.maskInputOptions;
+      get mask_input_options() {
+        return hiddenState.mask_input_options;
       },
-      set maskInputOptions(val) {
-        hiddenState.maskInputOptions = {
+      set mask_input_options(val) {
+        hiddenState.mask_input_options = {
           ...val,
           password: true
         };

package/dist/cjs/common/constants/env.cdn.js

@@ -12,7 +12,7 @@ exports.VERSION = exports.DIST_METHOD = exports.BUILD_ENV = void 0;
 /**
  * Exposes the version of the agent
  */
-const VERSION = "1.240.0";
+const VERSION = "1.241.0";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/common/constants/env.npm.js

@@ -12,7 +12,7 @@ exports.VERSION = exports.DIST_METHOD = exports.BUILD_ENV = void 0;
 /**
  * Exposes the version of the agent
  */
-const VERSION = "1.240.0";
+const VERSION = "1.241.0";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/features/metrics/aggregate/index.js

@@ -33,13 +33,16 @@ class Aggregate extends _aggregateBase.AggregateBase {
     this.singleChecks(); // checks that are run only one time, at script load
     this.eachSessionChecks(); // the start of every time user engages with page
 
-    // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
-    scheduler = new _harvestScheduler.HarvestScheduler('jserrors', {
-      onUnload: () => this.unload()
-    }, this);
-    scheduler.harvest.on('jserrors', () => ({
-      body: this.aggregator.take(['cm', 'sm'])
-    }));
+    this.ee.on("drain-".concat(this.featureName), () => {
+      // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
+      scheduler = new _harvestScheduler.HarvestScheduler('jserrors', {
+        onUnload: () => this.unload()
+      }, this);
+      scheduler.harvest.on('jserrors', () => ({
+        body: this.aggregator.take(['cm', 'sm'])
+      }));
+    }); // this is needed to ensure EoL is "on" and sent
+
     this.drain();
   }
   storeSupportabilityMetrics(name, value) {

package/dist/cjs/features/page_view_timing/aggregate/index.js

@@ -58,21 +58,21 @@ class Aggregate extends _aggregateBase.AggregateBase {
 
     /* It's important that CWV api, like "onLCP", is called before this scheduler is initialized. The reason is because they listen to the same
       on vis change or pagehide events, and we'd want ex. onLCP to record the timing (win the race) before we try to send "final harvest". */
-    this.scheduler = new _harvestScheduler.HarvestScheduler('events', {
-      onFinished: function () {
-        return _this.onHarvestFinished(...arguments);
-      },
-      getPayload: function () {
-        return _this.prepareHarvest(...arguments);
-      }
-    }, this);
-    (0, _registerHandler.registerHandler)('timing', (name, value, attrs) => this.addTiming(name, value, attrs), this.featureName, this.ee); // notice CLS is added to all timings via 4th param
+
     (0, _registerHandler.registerHandler)('docHidden', msTimestamp => this.endCurrentSession(msTimestamp), this.featureName, this.ee);
     (0, _registerHandler.registerHandler)('winPagehide', msTimestamp => this.recordPageUnload(msTimestamp), this.featureName, this.ee);
     const initialHarvestSeconds = (0, _config.getConfigurationValue)(this.agentIdentifier, 'page_view_timing.initialHarvestSeconds') || 10;
     const harvestTimeSeconds = (0, _config.getConfigurationValue)(this.agentIdentifier, 'page_view_timing.harvestTimeSeconds') || 30;
     // send initial data sooner, then start regular
     this.ee.on("drain-".concat(this.featureName), () => {
+      this.scheduler = new _harvestScheduler.HarvestScheduler('events', {
+        onFinished: function () {
+          return _this.onHarvestFinished(...arguments);
+        },
+        getPayload: function () {
+          return _this.prepareHarvest(...arguments);
+        }
+      }, this);
       this.scheduler.startTimer(harvestTimeSeconds, initialHarvestSeconds);
     });
     this.drain();

package/dist/cjs/features/session_replay/aggregate/index.js

@@ -14,6 +14,7 @@ var _aggregateBase = require("../../utils/aggregate-base");
 var _sharedChannel = require("../../../common/constants/shared-channel");
 var _encode = require("../../../common/url/encode");
 var _console = require("../../../common/util/console");
+var _runtime = require("../../../common/constants/runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /*
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright 2023 New Relic Corporation. All rights reserved.
@@ -72,17 +73,30 @@ class Aggregate extends _aggregateBase.AggregateBase {
      * -- When visibility changes from "hidden" -> "visible", it must capture a full snapshot for the replay to work correctly across tabs
     */
     this.hasSnapshot = false;
+    /** Payload metadata -- Should indicate that the payload being sent has a meta node. The meta node should always precede a snapshot node. */
+    this.hasMeta = false;
     /** Payload metadata -- Should indicate that the payload being sent contains an error.  Used for query/filter purposes in UI */
     this.hasError = false;
 
-    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs. */
+    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs.
+     * cycle timestamps are used as fallbacks if event timestamps cannot be used
+     */
     this.timestamp = {
-      first: undefined,
-      last: undefined
+      event: {
+        first: undefined,
+        last: undefined
+      },
+      cycle: {
+        first: undefined,
+        last: undefined
+      }
     };
 
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     this.payloadBytesEstimation = 0;
+
+    /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
+    this.lastMeta = undefined;
     const shouldSetup = (0, _config.getConfigurationValue)(agentIdentifier, 'privacy.cookies_enabled') === true && (0, _config.getConfigurationValue)(agentIdentifier, 'session_trace.enabled') === true;
 
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
@@ -132,7 +146,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
       }, this.featureName, this.ee);
       this.waitForFlags(['sr']).then(_ref => {
         let [flagOn] = _ref;
-        return this.initializeRecording(flagOn, Math.random() < (0, _config.getConfigurationValue)(this.agentIdentifier, 'session_replay.errorSampleRate'), Math.random() < (0, _config.getConfigurationValue)(this.agentIdentifier, 'session_replay.sampleRate'));
+        return this.initializeRecording(flagOn, Math.random() * 100 < (0, _config.getConfigurationValue)(this.agentIdentifier, 'session_replay.error_sampling_rate'), Math.random() * 100 < (0, _config.getConfigurationValue)(this.agentIdentifier, 'session_replay.sampling_rate'));
       }).then(() => _sharedChannel.sharedChannel.onReplayReady(this.mode)); // notify watchers that replay started with the mode
 
       this.drain();
@@ -173,6 +187,12 @@ class Aggregate extends _aggregateBase.AggregateBase {
     if (this.mode === _sessionEntity.MODE.ERROR && this.errorNoticed) {
       this.mode = _sessionEntity.MODE.FULL;
     }
+    try {
+      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
+      recorder = (await Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "recorder" */'rrweb')))).record;
+    } catch (err) {
+      return this.abort();
+    }
 
     // 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.
@@ -181,12 +201,6 @@ class Aggregate extends _aggregateBase.AggregateBase {
       // We only report (harvest) in FULL mode
       this.scheduler.startTimer(this.harvestTimeSeconds);
     }
-    try {
-      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
-      recorder = (await Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "recorder" */'rrweb')))).record;
-    } catch (err) {
-      return this.abort();
-    }
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const {
@@ -221,6 +235,8 @@ class Aggregate extends _aggregateBase.AggregateBase {
   getHarvestContents() {
     const agentRuntime = (0, _config.getRuntime)(this.agentIdentifier);
     const info = (0, _config.getInfo)(this.agentIdentifier);
+    const firstTimestamp = this.timestamp.event.first || this.timestamp.cycle.first;
+    const lastTimestamp = this.timestamp.event.last || this.timestamp.cycle.last;
     return {
       qs: {
         browser_monitoring_key: info.licenseKey,
@@ -231,11 +247,12 @@ class Aggregate extends _aggregateBase.AggregateBase {
           ...(this.shouldCompress && {
             content_encoding: 'gzip'
           }),
-          'replay.firstTimestamp': this.timestamp.first,
-          'replay.lastTimestamp': this.timestamp.last,
-          'replay.durationMs': this.timestamp.last - this.timestamp.first,
+          'replay.firstTimestamp': firstTimestamp,
+          'replay.lastTimestamp': lastTimestamp,
+          'replay.durationMs': lastTimestamp - firstTimestamp,
           agentVersion: agentRuntime.version,
           session: agentRuntime.session.state.value,
+          hasMeta: this.hasMeta,
           hasSnapshot: this.hasSnapshot,
           hasError: this.hasError,
           isFirstChunk: this.isFirstChunk,
@@ -260,6 +277,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
     this.events = [];
     this.isFirstChunk = false;
     this.hasSnapshot = false;
+    this.hasMeta = false;
     this.hasError = false;
     this.payloadBytesEstimation = 0;
     this.clearTimestamps();
@@ -271,27 +289,30 @@ class Aggregate extends _aggregateBase.AggregateBase {
       (0, _console.warn)('Recording library was never imported');
       return this.abort();
     }
+    this.clearTimestamps();
+    // set the fallbacks as early as possible
+    this.setTimestamps();
     this.recording = true;
     const {
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs
+      block_class,
+      ignore_class,
+      mask_text_class,
+      block_selector,
+      mask_input_options,
+      mask_text_selector,
+      mask_all_inputs
     } = (0, _config.getConfigurationValue)(this.agentIdentifier, 'session_replay');
     // 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({
       emit: this.store.bind(this),
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs,
+      blockClass: block_class,
+      ignoreClass: ignore_class,
+      maskTextClass: mask_text_class,
+      blockSelector: block_selector,
+      maskInputOptions: mask_input_options,
+      maskTextSelector: mask_text_selector,
+      maskAllInputs: mask_all_inputs,
       checkoutEveryNms: CHECKOUT_MS[this.mode]
     });
     this.stopRecording = () => {
@@ -302,6 +323,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
 
   /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
   store(event, isCheckout) {
+    this.setTimestamps(event);
     if (this.blocked) return;
     const eventBytes = (0, _stringify.stringify)(event).length;
     /** The estimated size of the payload after compression */
@@ -318,8 +340,22 @@ class Aggregate extends _aggregateBase.AggregateBase {
       // we are still waiting for an error to throw, so keep wiping the buffer over time
       this.clearBuffer();
     }
-    this.setTimestamps(event);
-    if (event.type === 2) this.hasSnapshot = true;
+
+    // meta event
+    if (event.type === 4) {
+      this.hasMeta = true;
+      this.lastMeta = event;
+    }
+    // snapshot event
+    if (event.type === 2) {
+      this.hasSnapshot = true;
+      // small chance that the meta event got separated from its matching snapshot across payload harvests
+      // it needs to precede the snapshot, so shove it in first.
+      if (!this.hasMeta) {
+        this.events.push(this.lastMeta);
+        this.hasMeta = true;
+      }
+    }
     this.events.push(event);
     this.payloadBytesEstimation += eventBytes;
 
@@ -336,15 +372,25 @@ class Aggregate extends _aggregateBase.AggregateBase {
     if (!recorder) return;
     recorder.takeFullSnapshot();
   }
-  setTimestamps(rrwebEvent) {
-    if (!rrwebEvent) return;
-    if (!this.timestamp.first) this.timestamp.first = rrwebEvent.timestamp;
-    this.timestamp.last = rrwebEvent.timestamp;
+  setTimestamps(event) {
+    // fallbacks if timestamps cannot be derived from rrweb events
+    this.timestamp.cycle.last = (0, _config.getRuntime)(this.agentIdentifier).offset + _runtime.globalScope.performance.now();
+    if (!this.timestamp.cycle.first) this.timestamp.cycle.first = this.timestamp.cycle.last;
+    // timestamps based on rrweb events
+    if (!event || !event.timestamp) return;
+    if (!this.timestamp.event.first) this.timestamp.event.first = event.timestamp;
+    this.timestamp.event.last = event.timestamp;
   }
   clearTimestamps() {
     this.timestamp = {
-      first: undefined,
-      last: undefined
+      event: {
+        first: undefined,
+        last: undefined
+      },
+      cycle: {
+        first: undefined,
+        last: undefined
+      }
     };
   }
 

package/dist/cjs/loaders/browser-agent.js

@@ -13,6 +13,7 @@ var _instrument5 = require("../features/ajax/instrument");
 var _instrument6 = require("../features/session_trace/instrument");
 var _instrument7 = require("../features/spa/instrument");
 var _instrument8 = require("../features/page_action/instrument");
+var _instrument9 = require("../features/session_replay/instrument");
 /**
  * An agent class with all feature modules available. Features may be disabled and enabled via runtime configuration.
  * The BrowserAgent class is the most convenient and reliable option for most use cases.
@@ -21,7 +22,7 @@ class BrowserAgent extends _agent.Agent {
   constructor(args) {
     super({
       ...args,
-      features: [_instrument5.Instrument, _instrument.Instrument, _instrument2.Instrument, _instrument6.Instrument, _instrument3.Instrument, _instrument8.Instrument, _instrument4.Instrument, _instrument7.Instrument],
+      features: [_instrument5.Instrument, _instrument.Instrument, _instrument2.Instrument, _instrument6.Instrument, _instrument3.Instrument, _instrument8.Instrument, _instrument4.Instrument, _instrument7.Instrument, _instrument9.Instrument],
       loaderType: 'browser-agent'
     });
   }

package/dist/esm/common/config/state/init.js

@@ -3,8 +3,8 @@ import { gosNREUMInitializedAgents } from '../../window/nreum';
 import { getModeledObject } from './configurable';
 const model = () => {
   const hiddenState = {
-    blockSelector: '[data-nr-block]',
-    maskInputOptions: {
+    block_selector: '[data-nr-block]',
+    mask_input_options: {
       password: true
     }
   };
@@ -78,35 +78,37 @@ const model = () => {
       autoStart: true,
       enabled: false,
       harvestTimeSeconds: 60,
-      sampleRate: 0.1,
-      errorSampleRate: 0.1,
+      sampling_rate: 50,
+      // float from 0 - 100
+      error_sampling_rate: 50,
+      // float from 0 - 100
       // recording config settings
-      maskTextSelector: '*',
-      maskAllInputs: true,
+      mask_text_selector: '*',
+      mask_all_inputs: true,
       // these properties only have getters because they are enforcable constants and should error if someone tries to override them
-      get blockClass() {
+      get block_class() {
         return 'nr-block';
       },
-      get ignoreClass() {
+      get ignore_class() {
         return 'nr-ignore';
       },
-      get maskTextClass() {
+      get mask_text_class() {
         return 'nr-mask';
       },
       // props with a getter and setter are used to extend enforcable constants with customer input
       // we must preserve data-nr-block no matter what else the customer sets
-      get blockSelector() {
-        return hiddenState.blockSelector;
+      get block_selector() {
+        return hiddenState.block_selector;
       },
-      set blockSelector(val) {
-        hiddenState.blockSelector += ",".concat(val);
+      set block_selector(val) {
+        hiddenState.block_selector += ",".concat(val);
       },
       // password: must always be present and true no matter what customer sets
-      get maskInputOptions() {
-        return hiddenState.maskInputOptions;
+      get mask_input_options() {
+        return hiddenState.mask_input_options;
       },
-      set maskInputOptions(val) {
-        hiddenState.maskInputOptions = {
+      set mask_input_options(val) {
+        hiddenState.mask_input_options = {
           ...val,
           password: true
         };

package/dist/esm/common/constants/env.cdn.js

@@ -6,7 +6,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.240.0";
+export const VERSION = "1.241.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/common/constants/env.npm.js

@@ -6,7 +6,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.240.0";
+export const VERSION = "1.241.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/features/metrics/aggregate/index.js

@@ -27,13 +27,16 @@ export class Aggregate extends AggregateBase {
     this.singleChecks(); // checks that are run only one time, at script load
     this.eachSessionChecks(); // the start of every time user engages with page
 
-    // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
-    scheduler = new HarvestScheduler('jserrors', {
-      onUnload: () => this.unload()
-    }, this);
-    scheduler.harvest.on('jserrors', () => ({
-      body: this.aggregator.take(['cm', 'sm'])
-    }));
+    this.ee.on("drain-".concat(this.featureName), () => {
+      // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
+      scheduler = new HarvestScheduler('jserrors', {
+        onUnload: () => this.unload()
+      }, this);
+      scheduler.harvest.on('jserrors', () => ({
+        body: this.aggregator.take(['cm', 'sm'])
+      }));
+    }); // this is needed to ensure EoL is "on" and sent
+
     this.drain();
   }
   storeSupportabilityMetrics(name, value) {

package/dist/esm/features/page_view_timing/aggregate/index.js

@@ -52,21 +52,21 @@ export class Aggregate extends AggregateBase {
 
     /* It's important that CWV api, like "onLCP", is called before this scheduler is initialized. The reason is because they listen to the same
       on vis change or pagehide events, and we'd want ex. onLCP to record the timing (win the race) before we try to send "final harvest". */
-    this.scheduler = new HarvestScheduler('events', {
-      onFinished: function () {
-        return _this.onHarvestFinished(...arguments);
-      },
-      getPayload: function () {
-        return _this.prepareHarvest(...arguments);
-      }
-    }, this);
-    registerHandler('timing', (name, value, attrs) => this.addTiming(name, value, attrs), this.featureName, this.ee); // notice CLS is added to all timings via 4th param
+
     registerHandler('docHidden', msTimestamp => this.endCurrentSession(msTimestamp), this.featureName, this.ee);
     registerHandler('winPagehide', msTimestamp => this.recordPageUnload(msTimestamp), this.featureName, this.ee);
     const initialHarvestSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.initialHarvestSeconds') || 10;
     const harvestTimeSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.harvestTimeSeconds') || 30;
     // send initial data sooner, then start regular
     this.ee.on("drain-".concat(this.featureName), () => {
+      this.scheduler = new HarvestScheduler('events', {
+        onFinished: function () {
+          return _this.onHarvestFinished(...arguments);
+        },
+        getPayload: function () {
+          return _this.prepareHarvest(...arguments);
+        }
+      }, this);
       this.scheduler.startTimer(harvestTimeSeconds, initialHarvestSeconds);
     });
     this.drain();

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

@@ -20,6 +20,7 @@ import { AggregateBase } from '../../utils/aggregate-base';
 import { sharedChannel } from '../../../common/constants/shared-channel';
 import { obj as encodeObj } from '../../../common/url/encode';
 import { warn } from '../../../common/util/console';
+import { globalScope } from '../../../common/constants/runtime';
 
 // would be better to get this dynamically in some way
 export const RRWEB_VERSION = '2.0.0-alpha.8';
@@ -64,17 +65,30 @@ export class Aggregate extends AggregateBase {
      * -- When visibility changes from "hidden" -> "visible", it must capture a full snapshot for the replay to work correctly across tabs
     */
     this.hasSnapshot = false;
+    /** Payload metadata -- Should indicate that the payload being sent has a meta node. The meta node should always precede a snapshot node. */
+    this.hasMeta = false;
     /** Payload metadata -- Should indicate that the payload being sent contains an error.  Used for query/filter purposes in UI */
     this.hasError = false;
 
-    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs. */
+    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs.
+     * cycle timestamps are used as fallbacks if event timestamps cannot be used
+     */
     this.timestamp = {
-      first: undefined,
-      last: undefined
+      event: {
+        first: undefined,
+        last: undefined
+      },
+      cycle: {
+        first: undefined,
+        last: undefined
+      }
     };
 
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     this.payloadBytesEstimation = 0;
+
+    /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
+    this.lastMeta = undefined;
     const shouldSetup = getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true && getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true;
 
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
@@ -124,7 +138,7 @@ export class Aggregate extends AggregateBase {
       }, this.featureName, this.ee);
       this.waitForFlags(['sr']).then(_ref => {
         let [flagOn] = _ref;
-        return this.initializeRecording(flagOn, Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.errorSampleRate'), Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.sampleRate'));
+        return this.initializeRecording(flagOn, Math.random() * 100 < getConfigurationValue(this.agentIdentifier, 'session_replay.error_sampling_rate'), Math.random() * 100 < getConfigurationValue(this.agentIdentifier, 'session_replay.sampling_rate'));
       }).then(() => sharedChannel.onReplayReady(this.mode)); // notify watchers that replay started with the mode
 
       this.drain();
@@ -165,6 +179,12 @@ export class Aggregate extends AggregateBase {
     if (this.mode === MODE.ERROR && this.errorNoticed) {
       this.mode = MODE.FULL;
     }
+    try {
+      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
+      recorder = (await import( /* webpackChunkName: "recorder" */'rrweb')).record;
+    } catch (err) {
+      return this.abort();
+    }
 
     // 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.
@@ -173,12 +193,6 @@ export class Aggregate extends AggregateBase {
       // We only report (harvest) in FULL mode
       this.scheduler.startTimer(this.harvestTimeSeconds);
     }
-    try {
-      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
-      recorder = (await import( /* webpackChunkName: "recorder" */'rrweb')).record;
-    } catch (err) {
-      return this.abort();
-    }
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const {
@@ -213,6 +227,8 @@ export class Aggregate extends AggregateBase {
   getHarvestContents() {
     const agentRuntime = getRuntime(this.agentIdentifier);
     const info = getInfo(this.agentIdentifier);
+    const firstTimestamp = this.timestamp.event.first || this.timestamp.cycle.first;
+    const lastTimestamp = this.timestamp.event.last || this.timestamp.cycle.last;
     return {
       qs: {
         browser_monitoring_key: info.licenseKey,
@@ -223,11 +239,12 @@ export class Aggregate extends AggregateBase {
           ...(this.shouldCompress && {
             content_encoding: 'gzip'
           }),
-          'replay.firstTimestamp': this.timestamp.first,
-          'replay.lastTimestamp': this.timestamp.last,
-          'replay.durationMs': this.timestamp.last - this.timestamp.first,
+          'replay.firstTimestamp': firstTimestamp,
+          'replay.lastTimestamp': lastTimestamp,
+          'replay.durationMs': lastTimestamp - firstTimestamp,
           agentVersion: agentRuntime.version,
           session: agentRuntime.session.state.value,
+          hasMeta: this.hasMeta,
           hasSnapshot: this.hasSnapshot,
           hasError: this.hasError,
           isFirstChunk: this.isFirstChunk,
@@ -252,6 +269,7 @@ export class Aggregate extends AggregateBase {
     this.events = [];
     this.isFirstChunk = false;
     this.hasSnapshot = false;
+    this.hasMeta = false;
     this.hasError = false;
     this.payloadBytesEstimation = 0;
     this.clearTimestamps();
@@ -263,27 +281,30 @@ export class Aggregate extends AggregateBase {
       warn('Recording library was never imported');
       return this.abort();
     }
+    this.clearTimestamps();
+    // set the fallbacks as early as possible
+    this.setTimestamps();
     this.recording = true;
     const {
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs
+      block_class,
+      ignore_class,
+      mask_text_class,
+      block_selector,
+      mask_input_options,
+      mask_text_selector,
+      mask_all_inputs
     } = getConfigurationValue(this.agentIdentifier, 'session_replay');
     // 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({
       emit: this.store.bind(this),
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs,
+      blockClass: block_class,
+      ignoreClass: ignore_class,
+      maskTextClass: mask_text_class,
+      blockSelector: block_selector,
+      maskInputOptions: mask_input_options,
+      maskTextSelector: mask_text_selector,
+      maskAllInputs: mask_all_inputs,
       checkoutEveryNms: CHECKOUT_MS[this.mode]
     });
     this.stopRecording = () => {
@@ -294,6 +315,7 @@ export class Aggregate extends AggregateBase {
 
   /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
   store(event, isCheckout) {
+    this.setTimestamps(event);
     if (this.blocked) return;
     const eventBytes = stringify(event).length;
     /** The estimated size of the payload after compression */
@@ -310,8 +332,22 @@ export class Aggregate extends AggregateBase {
       // we are still waiting for an error to throw, so keep wiping the buffer over time
       this.clearBuffer();
     }
-    this.setTimestamps(event);
-    if (event.type === 2) this.hasSnapshot = true;
+
+    // meta event
+    if (event.type === 4) {
+      this.hasMeta = true;
+      this.lastMeta = event;
+    }
+    // snapshot event
+    if (event.type === 2) {
+      this.hasSnapshot = true;
+      // small chance that the meta event got separated from its matching snapshot across payload harvests
+      // it needs to precede the snapshot, so shove it in first.
+      if (!this.hasMeta) {
+        this.events.push(this.lastMeta);
+        this.hasMeta = true;
+      }
+    }
     this.events.push(event);
     this.payloadBytesEstimation += eventBytes;
 
@@ -328,15 +364,25 @@ export class Aggregate extends AggregateBase {
     if (!recorder) return;
     recorder.takeFullSnapshot();
   }
-  setTimestamps(rrwebEvent) {
-    if (!rrwebEvent) return;
-    if (!this.timestamp.first) this.timestamp.first = rrwebEvent.timestamp;
-    this.timestamp.last = rrwebEvent.timestamp;
+  setTimestamps(event) {
+    // fallbacks if timestamps cannot be derived from rrweb events
+    this.timestamp.cycle.last = getRuntime(this.agentIdentifier).offset + globalScope.performance.now();
+    if (!this.timestamp.cycle.first) this.timestamp.cycle.first = this.timestamp.cycle.last;
+    // timestamps based on rrweb events
+    if (!event || !event.timestamp) return;
+    if (!this.timestamp.event.first) this.timestamp.event.first = event.timestamp;
+    this.timestamp.event.last = event.timestamp;
   }
   clearTimestamps() {
     this.timestamp = {
-      first: undefined,
-      last: undefined
+      event: {
+        first: undefined,
+        last: undefined
+      },
+      cycle: {
+        first: undefined,
+        last: undefined
+      }
     };
   }
 

package/dist/esm/loaders/browser-agent.js

@@ -7,6 +7,7 @@ import { Instrument as InstrumentXhr } from '../features/ajax/instrument';
 import { Instrument as InstrumentSessionTrace } from '../features/session_trace/instrument';
 import { Instrument as InstrumentSpa } from '../features/spa/instrument';
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument';
+import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument';
 
 /**
  * An agent class with all feature modules available. Features may be disabled and enabled via runtime configuration.
@@ -16,7 +17,7 @@ export class BrowserAgent extends Agent {
   constructor(args) {
     super({
       ...args,
-      features: [InstrumentXhr, InstrumentPageViewEvent, InstrumentPageViewTiming, InstrumentSessionTrace, InstrumentMetrics, InstrumentPageAction, InstrumentErrors, InstrumentSpa],
+      features: [InstrumentXhr, InstrumentPageViewEvent, InstrumentPageViewTiming, InstrumentSessionTrace, InstrumentMetrics, InstrumentPageAction, InstrumentErrors, InstrumentSpa, InstrumentSessionReplay],
       loaderType: 'browser-agent'
     });
   }

package/dist/types/features/metrics/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/metrics/aggregate/index.js"],"names":[],"mappings":"AAYA;IACE,2BAAiC;IACjC,mDAsBC;IAED,wDAKC;IAED,iDAKC;IAED,qBAqCC;IAED,0BAOC;IAED,eA0CC;IAvCG,mCAAyB;CAwC9B;8BArI6B,4BAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/metrics/aggregate/index.js"],"names":[],"mappings":"AAYA;IACE,2BAAiC;IACjC,mDAwBC;IAED,wDAKC;IAED,iDAKC;IAED,qBAqCC;IAED,0BAOC;IAED,eA0CC;IAvCG,mCAAyB;CAwC9B;8BAvI6B,4BAA4B"}

package/dist/types/features/page_view_timing/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/page_view_timing/aggregate/index.js"],"names":[],"mappings":"AAuBA;IACE,2BAAiC;IAMjC,mDAmCC;IAhCC,eAAiB;IACjB,mBAAqB;IACrB,4BAA+B;IAe/B,4BAGQ;IAcV;;;OAGG;IACH,6BAFW,MAAM,QAOhB;IAED;;OAEG;IACH,uCAUC;IAED,mDAqBC;IAED,qCAKC;IAED,gDAWC;IAGD;;;;kBAWC;IAGD,8BAuBC;;CACF;8BAlK6B,4BAA4B;iCANzB,2CAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/page_view_timing/aggregate/index.js"],"names":[],"mappings":"AAuBA;IACE,2BAAiC;IAMjC,mDAoCC;IAjCC,eAAiB;IACjB,mBAAqB;IACrB,4BAA+B;IAuB7B,4BAGQ;IAOZ;;;OAGG;IACH,6BAFW,MAAM,QAOhB;IAED;;OAEG;IACH,uCAUC;IAED,mDAqBC;IAED,qCAKC;IAED,gDAWC;IAGD;;;;kBAWC;IAGD,8BAuBC;;CACF;8BAnK6B,4BAA4B;iCANzB,2CAA2C"}

package/dist/types/features/session_replay/aggregate/index.d.ts

@@ -28,15 +28,27 @@ export class Aggregate extends AggregateBase {
      * -- When visibility changes from "hidden" -> "visible", it must capture a full snapshot for the replay to work correctly across tabs
     */
     hasSnapshot: boolean;
+    /** Payload metadata -- Should indicate that the payload being sent has a meta node. The meta node should always precede a snapshot node. */
+    hasMeta: boolean;
     /** Payload metadata -- Should indicate that the payload being sent contains an error.  Used for query/filter purposes in UI */
     hasError: boolean;
-    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs. */
+    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs.
+     * cycle timestamps are used as fallbacks if event timestamps cannot be used
+     */
     timestamp: {
-        first: undefined;
-        last: undefined;
+        event: {
+            first: undefined;
+            last: undefined;
+        };
+        cycle: {
+            first: undefined;
+            last: undefined;
+        };
     };
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     payloadBytesEstimation: number;
+    /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
+    lastMeta: any;
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     stopRecording: () => void;
     scheduler: HarvestScheduler | undefined;
@@ -77,7 +89,7 @@ export class Aggregate extends AggregateBase {
     store(event: any, isCheckout: any): void;
     /** force the recording lib to take a full DOM snapshot.  This needs to occur in certain cases, like visibility changes */
     takeFullSnapshot(): void;
-    setTimestamps(rrwebEvent: any): void;
+    setTimestamps(event: any): void;
     clearTimestamps(): void;
     /** Estimate the payload size */
     getPayloadSize(newBytes?: number): any;

package/dist/types/features/session_replay/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/aggregate/index.js"],"names":[],"mappings":"AAwBA,4CAA4C;AAE5C,mCAAmC;AAInC,uCAAuC;AACvC,uCAAuC;AACvC,iCAAiC;AACjC,uCAAuC;AAIvC;IACE,2BAAiC;IACjC,mDA4FC;IA1FC,iHAAiH;IACjH,cAAgB;IAChB,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IACxB,mEAAmE;IACnE,sBAAyB;IACzB,6GAA6G;IAC7G,aAAoB;IAGpB,iEAAiE;IACjE,mBAAsB;IACtB,gDAAgD;IAChD,wBAA0B;IAE1B,gGAAgG;IAChG,sBAAyB;IACzB;;;MAGE;IACF,qBAAwB;IACxB,+HAA+H;IAC/H,kBAAqB;IAErB,oHAAoH;IACpH;;;MAAsD;IAEtD,qGAAqG;IACrG,+BAA+B;IAO/B,uIAAuI;IACvI,0BAAyE;IAiBvE,wCAKQ;IA+BZ;;;;;;OAMG;IACH,kCALW,OAAO,eACP,OAAO,cACP,OAAO,GACL,IAAI,CAyDhB;IAED;;;;;;;;;oBAaC;IAED;;;;;;;;;MAyBC;IAED,qCAOC;IAED,kFAAkF;IAClF,oBAOC;IAED,qDAAqD;IACrD,uBAyBC;IAED,yHAAyH;IACzH,yCA8BC;IAED,0HAA0H;IAC1H,yBAGC;IAED,qCAIC;IAED,wBAEC;IAED,gCAAgC;IAChC,uCAGC;IAED,yDAAyD;IACzD,cAOC;IAED;;;SAGK;IACL,oCAGC;IAED,yCAGC;CACF;8BA1V6B,4BAA4B;iCALzB,2CAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/aggregate/index.js"],"names":[],"mappings":"AAyBA,4CAA4C;AAE5C,mCAAmC;AAInC,uCAAuC;AACvC,uCAAuC;AACvC,iCAAiC;AACjC,uCAAuC;AAIvC;IACE,2BAAiC;IACjC,mDAmGC;IAjGC,iHAAiH;IACjH,cAAgB;IAChB,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IACxB,mEAAmE;IACnE,sBAAyB;IACzB,6GAA6G;IAC7G,aAAoB;IAGpB,iEAAiE;IACjE,mBAAsB;IACtB,gDAAgD;IAChD,wBAA0B;IAE1B,gGAAgG;IAChG,sBAAyB;IACzB;;;MAGE;IACF,qBAAwB;IACxB,4IAA4I;IAC5I,iBAAoB;IACpB,+HAA+H;IAC/H,kBAAqB;IAErB;;OAEG;IACH;;;;;;;;;MAA+G;IAE/G,qGAAqG;IACrG,+BAA+B;IAE/B,kIAAkI;IAClI,cAAyB;IAOzB,uIAAuI;IACvI,0BAAyE;IAiBvE,wCAKQ;IA+BZ;;;;;;OAMG;IACH,kCALW,OAAO,eACP,OAAO,cACP,OAAO,GACL,IAAI,CAyDhB;IAED;;;;;;;;;oBAaC;IAED;;;;;;;;;MA4BC;IAED,qCAOC;IAED,kFAAkF;IAClF,oBAQC;IAED,qDAAqD;IACrD,uBA4BC;IAED,yHAAyH;IACzH,yCA4CC;IAED,0HAA0H;IAC1H,yBAGC;IAED,gCAQC;IAED,wBAEC;IAED,gCAAgC;IAChC,uCAGC;IAED,yDAAyD;IACzD,cAOC;IAED;;;SAGK;IACL,oCAGC;IAED,yCAGC;CACF;8BA3X6B,4BAA4B;iCALzB,2CAA2C"}

package/dist/types/loaders/browser-agent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser-agent.d.ts","sourceRoot":"","sources":["../../../src/loaders/browser-agent.js"],"names":[],"mappings":"AAWA;;;GAGG;AACH;IACE,uBAeC;CACF;sBAhCqB,SAAS"}
+{"version":3,"file":"browser-agent.d.ts","sourceRoot":"","sources":["../../../src/loaders/browser-agent.js"],"names":[],"mappings":"AAYA;;;GAGG;AACH;IACE,uBAgBC;CACF;sBAlCqB,SAAS"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.240.0",
+  "version": "1.241.0",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",
@@ -176,7 +176,7 @@
   "dependencies": {
     "core-js": "^3.26.0",
     "fflate": "^0.7.4",
-    "rrweb": "^2.0.0-alpha.8",
+    "rrweb": "2.0.0-alpha.8",
     "web-vitals": "^3.1.0"
   },
   "devDependencies": {
@@ -236,7 +236,6 @@
     "jest-extended": "^3.2.4",
     "jung": "^2.1.0",
     "just-debounce": "^1.0.0",
-    "newrelic": "^9.7.5",
     "node-fetch": "^3.3.0",
     "npm-run-all": "^4.1.5",
     "object-inspect": "^1.5.0",

package/src/common/config/state/init.js

@@ -4,8 +4,8 @@ import { getModeledObject } from './configurable'
 
 const model = () => {
   const hiddenState = {
-    blockSelector: '[data-nr-block]',
-    maskInputOptions: { password: true }
+    block_selector: '[data-nr-block]',
+    mask_input_options: { password: true }
   }
   return {
     proxy: {
@@ -40,29 +40,29 @@ const model = () => {
       autoStart: true,
       enabled: false,
       harvestTimeSeconds: 60,
-      sampleRate: 0.1,
-      errorSampleRate: 0.1,
+      sampling_rate: 50, // float from 0 - 100
+      error_sampling_rate: 50, // float from 0 - 100
       // recording config settings
-      maskTextSelector: '*',
-      maskAllInputs: true,
+      mask_text_selector: '*',
+      mask_all_inputs: true,
       // these properties only have getters because they are enforcable constants and should error if someone tries to override them
-      get blockClass () { return 'nr-block' },
-      get ignoreClass () { return 'nr-ignore' },
-      get maskTextClass () { return 'nr-mask' },
+      get block_class () { return 'nr-block' },
+      get ignore_class () { return 'nr-ignore' },
+      get mask_text_class () { return 'nr-mask' },
       // props with a getter and setter are used to extend enforcable constants with customer input
       // we must preserve data-nr-block no matter what else the customer sets
-      get blockSelector () {
-        return hiddenState.blockSelector
+      get block_selector () {
+        return hiddenState.block_selector
       },
-      set blockSelector (val) {
-        hiddenState.blockSelector += `,${val}`
+      set block_selector (val) {
+        hiddenState.block_selector += `,${val}`
       },
       // password: must always be present and true no matter what customer sets
-      get maskInputOptions () {
-        return hiddenState.maskInputOptions
+      get mask_input_options () {
+        return hiddenState.mask_input_options
       },
-      set maskInputOptions (val) {
-        hiddenState.maskInputOptions = { ...val, password: true }
+      set mask_input_options (val) {
+        hiddenState.mask_input_options = { ...val, password: true }
       }
     },
     spa: { enabled: true, harvestTimeSeconds: 10, autoStart: true }

package/src/common/harvest/harvest-scheduler.test.js

@@ -36,7 +36,7 @@ describe('unload', () => {
     expect(subscribeToEOL).toHaveBeenCalledWith(expect.any(Function))
   })
 
-  test('should run onUnload callback', () => {
+  test('should run onUnload callback when started', () => {
     harvestSchedulerInstance.opts.onUnload = jest.fn()
 
     eolSubscribeFn()
@@ -44,7 +44,7 @@ describe('unload', () => {
     expect(harvestSchedulerInstance.opts.onUnload).toHaveBeenCalledTimes(1)
   })
 
-  test('should run harvest when not aborted', () => {
+  test('should run harvest when started and not aborted', () => {
     harvestSchedulerInstance.aborted = false
 
     eolSubscribeFn()

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

@@ -29,9 +29,11 @@ export class Aggregate extends AggregateBase {
     this.singleChecks() // checks that are run only one time, at script load
     this.eachSessionChecks() // the start of every time user engages with page
 
-    // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
-    scheduler = new HarvestScheduler('jserrors', { onUnload: () => this.unload() }, this)
-    scheduler.harvest.on('jserrors', () => ({ body: this.aggregator.take(['cm', 'sm']) }))
+    this.ee.on(`drain-${this.featureName}`, () => {
+      // *cli, Mar 23 - Per NR-94597, this feature should only harvest ONCE at the (potential) EoL time of the page.
+      scheduler = new HarvestScheduler('jserrors', { onUnload: () => this.unload() }, this)
+      scheduler.harvest.on('jserrors', () => ({ body: this.aggregator.take(['cm', 'sm']) }))
+    }) // this is needed to ensure EoL is "on" and sent
 
     this.drain()
   }

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

@@ -48,19 +48,20 @@ export class Aggregate extends AggregateBase {
 
     /* It's important that CWV api, like "onLCP", is called before this scheduler is initialized. The reason is because they listen to the same
       on vis change or pagehide events, and we'd want ex. onLCP to record the timing (win the race) before we try to send "final harvest". */
-    this.scheduler = new HarvestScheduler('events', {
-      onFinished: (...args) => this.onHarvestFinished(...args),
-      getPayload: (...args) => this.prepareHarvest(...args)
-    }, this)
 
-    registerHandler('timing', (name, value, attrs) => this.addTiming(name, value, attrs), this.featureName, this.ee) // notice CLS is added to all timings via 4th param
     registerHandler('docHidden', msTimestamp => this.endCurrentSession(msTimestamp), this.featureName, this.ee)
     registerHandler('winPagehide', msTimestamp => this.recordPageUnload(msTimestamp), this.featureName, this.ee)
 
     const initialHarvestSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.initialHarvestSeconds') || 10
     const harvestTimeSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.harvestTimeSeconds') || 30
     // send initial data sooner, then start regular
-    this.ee.on(`drain-${this.featureName}`, () => { this.scheduler.startTimer(harvestTimeSeconds, initialHarvestSeconds) })
+    this.ee.on(`drain-${this.featureName}`, () => {
+      this.scheduler = new HarvestScheduler('events', {
+        onFinished: (...args) => this.onHarvestFinished(...args),
+        getPayload: (...args) => this.prepareHarvest(...args)
+      }, this)
+      this.scheduler.startTimer(harvestTimeSeconds, initialHarvestSeconds)
+    })
 
     this.drain()
   }

package/src/features/session_replay/aggregate/index.component-test.js

@@ -39,7 +39,7 @@ class LocalMemory {
 let sr, session
 const agentIdentifier = 'abcd'
 const info = { licenseKey: 1234, applicationID: 9876 }
-const init = { session_replay: { enabled: true, sampleRate: 1, errorSampleRate: 0 } }
+const init = { session_replay: { enabled: true, sampling_rate: 100, error_sampling_rate: 0 } }
 
 const anyQuery = {
   browser_monitoring_key: info.licenseKey,
@@ -99,14 +99,14 @@ describe('Session Replay', () => {
     })
 
     test('Session SR mode matches SR mode -- ERROR', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { sampleRate: 0, errorSampleRate: 1 } })
+      setConfiguration(agentIdentifier, { session_replay: { sampling_rate: 0, error_sampling_rate: 100 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(session.state.sessionReplay).toEqual(sr.mode)
     })
 
     test('Session SR mode matches SR mode -- OFF', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { sampleRate: 0, errorSampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { sampling_rate: 0, error_sampling_rate: 0 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(session.state.sessionReplay).toEqual(sr.mode)
@@ -149,28 +149,28 @@ describe('Session Replay', () => {
 
   describe('Session Replay Sample -> Mode Behaviors', () => {
     test('New Session -- Full 1 Error 1 === FULL', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 1, sampleRate: 1 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 100, sampling_rate: 100 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.FULL)
     })
 
     test('New Session -- Full 1 Error 0 === FULL', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 0, sampleRate: 1 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 0, sampling_rate: 100 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.FULL)
     })
 
     test('New Session -- Full 0 Error 1 === ERROR', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 1, sampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 100, sampling_rate: 0 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.ERROR)
     })
 
     test('New Session -- Full 0 Error 0 === OFF', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 0, sampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 0, sampling_rate: 0 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.OFF)
@@ -182,7 +182,7 @@ describe('Session Replay', () => {
       expect(session.isNew).toBeFalsy()
       primeSessionAndReplay(session)
       // configure to get "error" sample ---> but should inherit FULL from session manager
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 1, sampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 100, sampling_rate: 0 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.FULL)
@@ -191,7 +191,7 @@ describe('Session Replay', () => {
 
   describe('Session Replay Error Mode Behaviors', () => {
     test('An error BEFORE rrweb import starts running in FULL from beginning', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 1, sampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 100, sampling_rate: 0 } })
       sr.ee.emit('errorAgg')
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
@@ -200,7 +200,7 @@ describe('Session Replay', () => {
     })
 
     test('An error AFTER rrweb import changes mode and starts harvester', async () => {
-      setConfiguration(agentIdentifier, { session_replay: { errorSampleRate: 1, sampleRate: 0 } })
+      setConfiguration(agentIdentifier, { session_replay: { error_sampling_rate: 100, sampling_rate: 0 } })
       sr.ee.emit('rumresp-sr', [true])
       await wait(1)
       expect(sr.mode).toEqual(MODE.ERROR)

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

@@ -20,6 +20,7 @@ import { AggregateBase } from '../../utils/aggregate-base'
 import { sharedChannel } from '../../../common/constants/shared-channel'
 import { obj as encodeObj } from '../../../common/url/encode'
 import { warn } from '../../../common/util/console'
+import { globalScope } from '../../../common/constants/runtime'
 
 // would be better to get this dynamically in some way
 export const RRWEB_VERSION = '2.0.0-alpha.8'
@@ -63,15 +64,22 @@ export class Aggregate extends AggregateBase {
      * -- When visibility changes from "hidden" -> "visible", it must capture a full snapshot for the replay to work correctly across tabs
     */
     this.hasSnapshot = false
+    /** Payload metadata -- Should indicate that the payload being sent has a meta node. The meta node should always precede a snapshot node. */
+    this.hasMeta = false
     /** Payload metadata -- Should indicate that the payload being sent contains an error.  Used for query/filter purposes in UI */
     this.hasError = false
 
-    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs. */
-    this.timestamp = { first: undefined, last: undefined }
+    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs.
+     * cycle timestamps are used as fallbacks if event timestamps cannot be used
+     */
+    this.timestamp = { event: { first: undefined, last: undefined }, cycle: { first: undefined, last: undefined } }
 
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     this.payloadBytesEstimation = 0
 
+    /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
+    this.lastMeta = undefined
+
     const shouldSetup = (
       getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true &&
       getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true
@@ -123,8 +131,8 @@ export class Aggregate extends AggregateBase {
 
       this.waitForFlags(['sr']).then(([flagOn]) => this.initializeRecording(
         flagOn,
-        Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.errorSampleRate'),
-        Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.sampleRate')
+        (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.error_sampling_rate'),
+        (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.sampling_rate')
       )).then(() => sharedChannel.onReplayReady(this.mode)) // notify watchers that replay started with the mode
 
       this.drain()
@@ -164,6 +172,13 @@ export class Aggregate extends AggregateBase {
       this.mode = MODE.FULL
     }
 
+    try {
+      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
+      recorder = (await import(/* webpackChunkName: "recorder" */'rrweb')).record
+    } catch (err) {
+      return this.abort()
+    }
+
     // 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
@@ -172,13 +187,6 @@ export class Aggregate extends AggregateBase {
       this.scheduler.startTimer(this.harvestTimeSeconds)
     }
 
-    try {
-      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
-      recorder = (await import(/* webpackChunkName: "recorder" */'rrweb')).record
-    } catch (err) {
-      return this.abort()
-    }
-
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const { gzipSync, strToU8 } = await import(/* webpackChunkName: "compressor" */'fflate')
@@ -213,6 +221,8 @@ export class Aggregate extends AggregateBase {
   getHarvestContents () {
     const agentRuntime = getRuntime(this.agentIdentifier)
     const info = getInfo(this.agentIdentifier)
+    const firstTimestamp = this.timestamp.event.first || this.timestamp.cycle.first
+    const lastTimestamp = this.timestamp.event.last || this.timestamp.cycle.last
     return {
       qs: {
         browser_monitoring_key: info.licenseKey,
@@ -221,11 +231,12 @@ export class Aggregate extends AggregateBase {
         protocol_version: '0',
         attributes: encodeObj({
           ...(this.shouldCompress && { content_encoding: 'gzip' }),
-          'replay.firstTimestamp': this.timestamp.first,
-          'replay.lastTimestamp': this.timestamp.last,
-          'replay.durationMs': this.timestamp.last - this.timestamp.first,
+          'replay.firstTimestamp': firstTimestamp,
+          'replay.lastTimestamp': lastTimestamp,
+          'replay.durationMs': lastTimestamp - firstTimestamp,
           agentVersion: agentRuntime.version,
           session: agentRuntime.session.state.value,
+          hasMeta: this.hasMeta,
           hasSnapshot: this.hasSnapshot,
           hasError: this.hasError,
           isFirstChunk: this.isFirstChunk,
@@ -251,6 +262,7 @@ export class Aggregate extends AggregateBase {
     this.events = []
     this.isFirstChunk = false
     this.hasSnapshot = false
+    this.hasMeta = false
     this.hasError = false
     this.payloadBytesEstimation = 0
     this.clearTimestamps()
@@ -262,19 +274,22 @@ export class Aggregate extends AggregateBase {
       warn('Recording library was never imported')
       return this.abort()
     }
+    this.clearTimestamps()
+    // set the fallbacks as early as possible
+    this.setTimestamps()
     this.recording = true
-    const { blockClass, ignoreClass, maskTextClass, blockSelector, maskInputOptions, maskTextSelector, maskAllInputs } = getConfigurationValue(this.agentIdentifier, 'session_replay')
+    const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs } = getConfigurationValue(this.agentIdentifier, 'session_replay')
     // 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({
       emit: this.store.bind(this),
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs,
+      blockClass: block_class,
+      ignoreClass: ignore_class,
+      maskTextClass: mask_text_class,
+      blockSelector: block_selector,
+      maskInputOptions: mask_input_options,
+      maskTextSelector: mask_text_selector,
+      maskAllInputs: mask_all_inputs,
       checkoutEveryNms: CHECKOUT_MS[this.mode]
     })
 
@@ -286,6 +301,7 @@ export class Aggregate extends AggregateBase {
 
   /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
   store (event, isCheckout) {
+    this.setTimestamps(event)
     if (this.blocked) return
     const eventBytes = stringify(event).length
     /** The estimated size of the payload after compression */
@@ -303,8 +319,21 @@ export class Aggregate extends AggregateBase {
       this.clearBuffer()
     }
 
-    this.setTimestamps(event)
-    if (event.type === 2) this.hasSnapshot = true
+    // meta event
+    if (event.type === 4) {
+      this.hasMeta = true
+      this.lastMeta = event
+    }
+    // snapshot event
+    if (event.type === 2) {
+      this.hasSnapshot = true
+      // small chance that the meta event got separated from its matching snapshot across payload harvests
+      // it needs to precede the snapshot, so shove it in first.
+      if (!this.hasMeta) {
+        this.events.push(this.lastMeta)
+        this.hasMeta = true
+      }
+    }
 
     this.events.push(event)
     this.payloadBytesEstimation += eventBytes
@@ -323,14 +352,18 @@ export class Aggregate extends AggregateBase {
     recorder.takeFullSnapshot()
   }
 
-  setTimestamps (rrwebEvent) {
-    if (!rrwebEvent) return
-    if (!this.timestamp.first) this.timestamp.first = rrwebEvent.timestamp
-    this.timestamp.last = rrwebEvent.timestamp
+  setTimestamps (event) {
+    // fallbacks if timestamps cannot be derived from rrweb events
+    this.timestamp.cycle.last = getRuntime(this.agentIdentifier).offset + globalScope.performance.now()
+    if (!this.timestamp.cycle.first) this.timestamp.cycle.first = this.timestamp.cycle.last
+    // timestamps based on rrweb events
+    if (!event || !event.timestamp) return
+    if (!this.timestamp.event.first) this.timestamp.event.first = event.timestamp
+    this.timestamp.event.last = event.timestamp
   }
 
   clearTimestamps () {
-    this.timestamp = { first: undefined, last: undefined }
+    this.timestamp = { event: { first: undefined, last: undefined }, cycle: { first: undefined, last: undefined } }
   }
 
   /** Estimate the payload size */

package/src/loaders/browser-agent.js

@@ -8,6 +8,7 @@ import { Instrument as InstrumentXhr } from '../features/ajax/instrument'
 import { Instrument as InstrumentSessionTrace } from '../features/session_trace/instrument'
 import { Instrument as InstrumentSpa } from '../features/spa/instrument'
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument'
+import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument'
 
 /**
  * An agent class with all feature modules available. Features may be disabled and enabled via runtime configuration.
@@ -25,7 +26,8 @@ export class BrowserAgent extends Agent {
         InstrumentMetrics,
         InstrumentPageAction,
         InstrumentErrors,
-        InstrumentSpa
+        InstrumentSpa,
+        InstrumentSessionReplay
       ],
       loaderType: 'browser-agent'
     })