@newrelic/browser-agent 1.266.0 → 1.267.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.267.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.266.0...v1.267.0) (2024-09-23)
+
+
+### Features
+
+* add soft navigations to Browser-Agent loader ([#1191](https://github.com/newrelic/newrelic-browser-agent/issues/1191)) ([fd033a7](https://github.com/newrelic/newrelic-browser-agent/commit/fd033a7be52fed01e5a67a5f8060cf6ec080c769))
+* Improve notifications of stylesheet status for session replay ([#1190](https://github.com/newrelic/newrelic-browser-agent/issues/1190)) ([a21b939](https://github.com/newrelic/newrelic-browser-agent/commit/a21b939884697fc4951e6d4cdaceecaa9b000810))
+* Update TimeKeeper Source of Truth ([#1181](https://github.com/newrelic/newrelic-browser-agent/issues/1181)) ([60d63cf](https://github.com/newrelic/newrelic-browser-agent/commit/60d63cf416529d700abaa6fa36ba3e64402b35a9))
+* Upgrade to web-vitals v4 ([#1193](https://github.com/newrelic/newrelic-browser-agent/issues/1193)) ([81349b8](https://github.com/newrelic/newrelic-browser-agent/commit/81349b82f5befd88f425cce1dee06f08fcea8a05))
+
+### Bug Fixes
+
+* Improve reliability of customMasker ([#1197](https://github.com/newrelic/newrelic-browser-agent/issues/1197)) ([9f2ef1f](https://github.com/newrelic/newrelic-browser-agent/commit/9f2ef1f7d0e5dceaf61745a47849a3b2cc930c53))
+* Stringify now returns an empty string if failed to transform ([#1198](https://github.com/newrelic/newrelic-browser-agent/issues/1198)) ([310937a](https://github.com/newrelic/newrelic-browser-agent/commit/310937ae20a004f91f3ccb4ba6b1d1b230d92632))
+
 ## [1.266.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.265.1...v1.266.0) (2024-09-16)
 
 

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

@@ -117,10 +117,8 @@ const model = () => {
       // serialize fonts for collection without public asset url, this is currently broken in RRWeb -- https://github.com/rrweb-io/rrweb/issues/1304.  When fixed, revisit with test cases
       inline_images: false,
       // serialize images for collection without public asset url -- right now this is only useful for testing as it easily generates payloads too large to be harvested
-      inline_stylesheet: true,
-      // serialize css for collection without public asset url
       fix_stylesheets: true,
-      // fetch missing stylesheet resources for inlining, only works if 'inline_stylesheet' is also true
+      // fetch missing stylesheet resources for inlining
       // recording config settings
       mask_all_inputs: true,
       // this has a getter/setter to facilitate validation of the selectors

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

@@ -12,7 +12,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.DIST_METHOD = exports.BUILD_EN
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.266.0";
+const VERSION = exports.VERSION = "1.267.0";
 
 /**
  * Exposes the build type of the agent

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

@@ -12,7 +12,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.DIST_METHOD = exports.BUILD_EN
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.266.0";
+const VERSION = exports.VERSION = "1.267.0";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/common/timing/time-keeper.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TimeKeeper = void 0;
 var _runtime = require("../constants/runtime");
 var _runtime2 = require("../config/runtime");
-const rfc2616Regex = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun), ([0-3][0-9]) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{4}) ([01][0-9]|2[0-3])(:[0-5][0-9]){2} GMT$/;
-
 /**
  * Class used to adjust the timestamp of harvested data to New Relic server time. This
  * is done by tracking the performance timings of the RUM call and applying a calculation
@@ -58,26 +56,21 @@ class TimeKeeper {
    * @param rumRequest {XMLHttpRequest} The xhr for the rum request
    * @param startTime {number} The start time of the RUM request
    * @param endTime {number} The end time of the RUM request
+   * @param nrServerTime {number} the unix number value of the NR server time in MS, returned in the RUM request body
    */
-  processRumRequest(rumRequest, startTime, endTime) {
+  processRumRequest(rumRequest, startTime, endTime, nrServerTime) {
     this.processStoredDiff(); // Check session entity for stored time diff
     if (this.#ready) return; // Server time calculated from session entity
 
-    const responseDateHeader = rumRequest.getResponseHeader('Date');
-    if (!responseDateHeader) {
-      throw new Error('Missing date header on rum response.');
-    }
-    if (!rfc2616Regex.test(responseDateHeader)) {
-      throw new Error('Date header invalid format.');
-    }
+    if (!nrServerTime) throw new Error('nrServerTime not found');
     const medianRumOffset = (endTime - startTime) / 2;
     const serverOffset = startTime + medianRumOffset;
 
     // Corrected page origin time
-    this.#correctedOriginTime = Math.floor(Date.parse(responseDateHeader) - serverOffset);
+    this.#correctedOriginTime = Math.floor(nrServerTime - serverOffset);
     this.#localTimeDiff = _runtime.originTime - this.#correctedOriginTime;
     if (isNaN(this.#correctedOriginTime)) {
-      throw new Error('Date header invalid format.');
+      throw new Error('Failed to correct browser time to server time');
     }
     this.#session?.write({
       serverTimeDiff: this.#localTimeDiff

package/dist/cjs/common/util/stringify.js

@@ -43,5 +43,7 @@ function stringify(val) {
     } catch (err) {
       // do nothing
     }
+    // return a string so that downstream users of the method do not throw errors
+    return '';
   }
 }

package/dist/cjs/common/vitals/interaction-to-next-paint.js

@@ -18,9 +18,17 @@ if (_runtime.isBrowserScope) {
   }) => {
     const attrs = {
       metricId: id,
-      eventTarget: attribution.eventTarget,
-      eventType: attribution.eventType,
-      eventTime: attribution.eventTime,
+      eventTarget: attribution.interactionTarget,
+      // event* attrs deprecated in v4, kept for NR backwards compatibility
+      eventTime: attribution.interactionTime,
+      // event* attrs deprecated in v4, kept for NR backwards compatibility
+      interactionTarget: attribution.interactionTarget,
+      interactionTime: attribution.interactionTime,
+      interactionType: attribution.interactionType,
+      inputDelay: attribution.inputDelay,
+      nextPaintTime: attribution.nextPaintTime,
+      processingDuration: attribution.processingDuration,
+      presentationDelay: attribution.presentationDelay,
       loadState: attribution.loadState
     };
     interactionToNextPaint.update({

package/dist/cjs/common/vitals/largest-contentful-paint.js

@@ -26,7 +26,9 @@ if (_runtime.isBrowserScope) {
         element: attribution.element,
         timeToFirstByte: attribution.timeToFirstByte,
         resourceLoadDelay: attribution.resourceLoadDelay,
-        resourceLoadTime: attribution.resourceLoadTime,
+        resourceLoadDuration: attribution.resourceLoadDuration,
+        resourceLoadTime: attribution.resourceLoadDuration,
+        // kept for NR backwards compatibility, deprecated in v3->v4
         elementRenderDelay: attribution.elementRenderDelay
       };
       if (attribution.url) attrs.elUrl = (0, _cleanUrl.cleanURL)(attribution.url);

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

@@ -142,20 +142,20 @@ class Aggregate extends _aggregateBase.AggregateBase {
           this.ee.abort();
           return;
         }
-        try {
-          this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime);
-          if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready');
-          agentRuntime.timeKeeper = this.timeKeeper;
-        } catch (error) {
-          this.ee.abort();
-          (0, _console.warn)(17, error);
-          return;
-        }
         try {
           const {
             app,
             ...flags
           } = JSON.parse(responseText);
+          try {
+            this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime, app.nrServerTime);
+            if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready');
+            agentRuntime.timeKeeper = this.timeKeeper;
+          } catch (error) {
+            this.ee.abort();
+            (0, _console.warn)(17, error);
+            return;
+          }
           agentRuntime.appMetadata = app;
           (0, _featureFlags.activateFeatures)(flags, this.agentIdentifier);
           this.drain();

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

@@ -108,7 +108,6 @@ class Aggregate extends _aggregateBase.AggregateBase {
       block_selector,
       mask_text_selector,
       mask_all_inputs,
-      inline_stylesheet,
       inline_images,
       collect_fonts
     } = (0, _init.getConfigurationValue)(this.agentIdentifier, 'session_replay');
@@ -135,7 +134,6 @@ class Aggregate extends _aggregateBase.AggregateBase {
     /** 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) (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/AutoStart/Modified'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
     if (collect_fonts === true) (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/CollectFonts/Modified'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
-    if (inline_stylesheet !== true) (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineStylesheet/Modified'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
     if (inline_images === true) (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/InlineImages/Modifed'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
     if (mask_all_inputs !== true) (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskAllInputs/Modified'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
     if (block_selector !== '[data-nr-block]') (0, _handle.handle)(_constants2.SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/BlockSelector/Modified'], undefined, _features.FEATURE_NAMES.metrics, this.ee);
@@ -253,7 +251,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
   prepareHarvest({
     opts
   } = {}) {
-    if (!this.recorder || !this.timeKeeper?.ready) return;
+    if (!this.recorder || !this.timeKeeper?.ready || !this.recorder.hasSeenSnapshot) return;
     const recorderEvents = this.recorder.getEvents();
     // get the event type and use that to trigger another harvest if needed
     if (!recorderEvents.events.length || this.mode !== _constants3.MODE.FULL || this.blocked) return;

package/dist/cjs/features/session_replay/shared/recorder.js

@@ -33,14 +33,14 @@ class Recorder {
     this.recording = false;
     /** The pointer to the current bucket holding rrweb events */
     this.currentBufferTarget = this.#events;
+    /** Only set to true once a snapshot node has been processed.  Used to block preload harvests from sending before we know we have a snapshot */
+    this.hasSeenSnapshot = false;
     /** 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 = false;
     /** The parent class that instantiated the recorder */
     this.parent = parent;
-    /** Config to inform to inline stylesheet contents (true default) */
-    this.shouldInlineStylesheets = (0, _init.getConfigurationValue)(this.parent.agentIdentifier, 'session_replay.inline_stylesheet');
     /** A flag that can be set to false by failing conversions to stop the fetching process */
-    this.shouldFix = this.shouldInlineStylesheets && (0, _init.getConfigurationValue)(this.parent.agentIdentifier, 'session_replay.fix_stylesheets');
+    this.shouldFix = (0, _init.getConfigurationValue)(this.parent.agentIdentifier, 'session_replay.fix_stylesheets');
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     this.stopRecording = () => {/* no-op until set by rrweb initializer */};
   }
@@ -82,13 +82,16 @@ class Recorder {
       mask_input_options,
       mask_text_selector,
       mask_all_inputs,
-      inline_stylesheet,
       inline_images,
       collect_fonts
     } = (0, _init.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);
+      try {
+        if (typeof element?.type === 'string' && element.type.toLowerCase() !== 'password' && (element?.dataset?.nrUnmask !== undefined || element?.classList?.contains('nr-unmask'))) return text;
+      } catch (err) {
+        // likely an element was passed to this handler that was invalid and was missing attributes or methods
+      }
+      return '*'.repeat(text?.length || 0);
     };
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
@@ -103,7 +106,7 @@ class Recorder {
       maskTextFn: customMasker,
       maskAllInputs: mask_all_inputs,
       maskInputFn: customMasker,
-      inlineStylesheet: inline_stylesheet,
+      inlineStylesheet: true,
       inlineImages: inline_images,
       collectFonts: collect_fonts,
       checkoutEveryNms: _constants.CHECKOUT_MS[this.parent.mode],
@@ -130,13 +133,17 @@ class Recorder {
    * @param {*} isCheckout - Flag indicating if the payload was triggered as a checkout
    */
   audit(event, isCheckout) {
-    /** only run the audit if inline_stylesheets is configured as on (default behavior) */
-    if (this.shouldInlineStylesheets === false || !this.shouldFix) {
-      this.currentBufferTarget.inlinedAllStylesheets = false;
-      return this.store(event, isCheckout);
-    }
     /** An count of stylesheet objects that were blocked from accessing contents via JS */
     const incompletes = _stylesheetEvaluator.stylesheetEvaluator.evaluate();
+    const missingInlineSMTag = 'SessionReplay/Payload/Missing-Inline-Css/';
+    /** only run the full fixing behavior (more costly) if fix_stylesheets is configured as on (default behavior) */
+    if (!this.shouldFix) {
+      if (incompletes > 0) {
+        this.currentBufferTarget.inlinedAllStylesheets = false;
+        (0, _handle.handle)(_constants3.SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, _features.FEATURE_NAMES.metrics, this.parent.ee);
+      }
+      return this.store(event, isCheckout);
+    }
     /** Only stop ignoring data if already ignoring and a new valid snapshap is taking place (0 incompletes and we get a meta node for the snap) */
     if (!incompletes && this.#fixing && event.type === _constants.RRWEB_EVENT_TYPES.Meta) this.#fixing = false;
     if (incompletes > 0) {
@@ -146,8 +153,8 @@ class Recorder {
           this.currentBufferTarget.inlinedAllStylesheets = false;
           this.shouldFix = false;
         }
-        (0, _handle.handle)(_constants3.SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Failed', failedToFix], undefined, _features.FEATURE_NAMES.metrics, this.parent.ee);
-        (0, _handle.handle)(_constants3.SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, _features.FEATURE_NAMES.metrics, this.parent.ee);
+        (0, _handle.handle)(_constants3.SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, _features.FEATURE_NAMES.metrics, this.parent.ee);
+        (0, _handle.handle)(_constants3.SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Fixed', incompletes - failedToFix], undefined, _features.FEATURE_NAMES.metrics, this.parent.ee);
         this.takeFullSnapshot();
       });
       /** Only start ignoring data if got a faulty snapshot */
@@ -190,6 +197,7 @@ class Recorder {
     // snapshot event
     if (event.type === _constants.RRWEB_EVENT_TYPES.FullSnapshot) {
       this.currentBufferTarget.hasSnapshot = true;
+      this.hasSeenSnapshot = true;
     }
     this.currentBufferTarget.add(event);
 

package/dist/cjs/features/session_replay/shared/stylesheet-evaluator.js

@@ -8,7 +8,7 @@ var _nreum = require("../../../common/window/nreum");
 var _runtime = require("../../../common/constants/runtime");
 class StylesheetEvaluator {
   #evaluated = new WeakSet();
-  #fetchProms = [];
+  #brokenSheets = [];
   /**
   * Flipped to true if stylesheets that cannot be natively inlined are detected by the stylesheetEvaluator class
   * Used at harvest time to denote that all subsequent payloads are subject to this and customers should be advised to handle crossorigin decoration
@@ -22,6 +22,7 @@ class StylesheetEvaluator {
    */
   evaluate() {
     let incompletes = 0;
+    this.#brokenSheets = [];
     if (_runtime.isBrowserScope) {
       for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
         if (!this.#evaluated.has(document.styleSheets[i])) {
@@ -32,7 +33,7 @@ class StylesheetEvaluator {
           } catch (err) {
             if (!document.styleSheets[i].href) return;
             incompletes++;
-            this.#fetchProms.push(this.#fetchAndOverride(document.styleSheets[i]));
+            this.#brokenSheets.push(document.styleSheets[i]);
           }
         }
       }
@@ -46,8 +47,8 @@ class StylesheetEvaluator {
    * @returns {Promise}
    */
   async fix() {
-    await Promise.all(this.#fetchProms);
-    this.#fetchProms = [];
+    await Promise.all(this.#brokenSheets.map(sheet => this.#fetchAndOverride(sheet)));
+    this.#brokenSheets = [];
     const failedToFix = this.failedToFix;
     this.failedToFix = 0;
     return failedToFix;

package/dist/cjs/features/utils/event-buffer.js

@@ -63,7 +63,8 @@ class EventBuffer {
   }
 
   /**
-   * Adds an event object to the buffer while tallying size
+   * Adds an event object to the buffer while tallying size. Only adds the event if it is valid
+   * and would not make the event buffer exceed the maxPayloadSize.
    * @param {Object} event the event object to add to the buffer
    * @returns {EventBuffer} returns the event buffer for chaining
    */

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

@@ -15,6 +15,7 @@ var _instrument7 = require("../features/spa/instrument");
 var _instrument8 = require("../features/session_replay/instrument");
 var _instrument9 = require("../features/generic_events/instrument");
 var _instrument10 = require("../features/logging/instrument");
+var _instrument11 = require("../features/soft_navigations/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.
@@ -23,7 +24,7 @@ class BrowserAgent extends _agent.Agent {
   constructor(args) {
     super({
       ...args,
-      features: [_instrument5.Instrument, _instrument.Instrument, _instrument2.Instrument, _instrument6.Instrument, _instrument3.Instrument, _instrument4.Instrument, _instrument7.Instrument, _instrument8.Instrument, _instrument9.Instrument, _instrument10.Instrument],
+      features: [_instrument5.Instrument, _instrument.Instrument, _instrument2.Instrument, _instrument6.Instrument, _instrument3.Instrument, _instrument4.Instrument, _instrument7.Instrument, _instrument11.Instrument, _instrument8.Instrument, _instrument9.Instrument, _instrument10.Instrument],
       loaderType: 'browser-agent'
     });
   }

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

@@ -109,10 +109,8 @@ const model = () => {
       // serialize fonts for collection without public asset url, this is currently broken in RRWeb -- https://github.com/rrweb-io/rrweb/issues/1304.  When fixed, revisit with test cases
       inline_images: false,
       // serialize images for collection without public asset url -- right now this is only useful for testing as it easily generates payloads too large to be harvested
-      inline_stylesheet: true,
-      // serialize css for collection without public asset url
       fix_stylesheets: true,
-      // fetch missing stylesheet resources for inlining, only works if 'inline_stylesheet' is also true
+      // fetch missing stylesheet resources for inlining
       // recording config settings
       mask_all_inputs: true,
       // this has a getter/setter to facilitate validation of the selectors

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

@@ -6,7 +6,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.266.0";
+export const VERSION = "1.267.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.266.0";
+export const VERSION = "1.267.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/common/timing/time-keeper.js

@@ -1,6 +1,5 @@
 import { originTime } from '../constants/runtime';
 import { getRuntime } from '../config/runtime';
-const rfc2616Regex = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun), ([0-3][0-9]) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{4}) ([01][0-9]|2[0-3])(:[0-5][0-9]){2} GMT$/;
 
 /**
  * Class used to adjust the timestamp of harvested data to New Relic server time. This
@@ -52,26 +51,21 @@ export class TimeKeeper {
    * @param rumRequest {XMLHttpRequest} The xhr for the rum request
    * @param startTime {number} The start time of the RUM request
    * @param endTime {number} The end time of the RUM request
+   * @param nrServerTime {number} the unix number value of the NR server time in MS, returned in the RUM request body
    */
-  processRumRequest(rumRequest, startTime, endTime) {
+  processRumRequest(rumRequest, startTime, endTime, nrServerTime) {
     this.processStoredDiff(); // Check session entity for stored time diff
     if (this.#ready) return; // Server time calculated from session entity
 
-    const responseDateHeader = rumRequest.getResponseHeader('Date');
-    if (!responseDateHeader) {
-      throw new Error('Missing date header on rum response.');
-    }
-    if (!rfc2616Regex.test(responseDateHeader)) {
-      throw new Error('Date header invalid format.');
-    }
+    if (!nrServerTime) throw new Error('nrServerTime not found');
     const medianRumOffset = (endTime - startTime) / 2;
     const serverOffset = startTime + medianRumOffset;
 
     // Corrected page origin time
-    this.#correctedOriginTime = Math.floor(Date.parse(responseDateHeader) - serverOffset);
+    this.#correctedOriginTime = Math.floor(nrServerTime - serverOffset);
     this.#localTimeDiff = originTime - this.#correctedOriginTime;
     if (isNaN(this.#correctedOriginTime)) {
-      throw new Error('Date header invalid format.');
+      throw new Error('Failed to correct browser time to server time');
     }
     this.#session?.write({
       serverTimeDiff: this.#localTimeDiff

package/dist/esm/common/util/stringify.js

@@ -38,5 +38,7 @@ export function stringify(val) {
     } catch (err) {
       // do nothing
     }
+    // return a string so that downstream users of the method do not throw errors
+    return '';
   }
 }

package/dist/esm/common/vitals/interaction-to-next-paint.js

@@ -12,9 +12,17 @@ if (isBrowserScope) {
   }) => {
     const attrs = {
       metricId: id,
-      eventTarget: attribution.eventTarget,
-      eventType: attribution.eventType,
-      eventTime: attribution.eventTime,
+      eventTarget: attribution.interactionTarget,
+      // event* attrs deprecated in v4, kept for NR backwards compatibility
+      eventTime: attribution.interactionTime,
+      // event* attrs deprecated in v4, kept for NR backwards compatibility
+      interactionTarget: attribution.interactionTarget,
+      interactionTime: attribution.interactionTime,
+      interactionType: attribution.interactionType,
+      inputDelay: attribution.inputDelay,
+      nextPaintTime: attribution.nextPaintTime,
+      processingDuration: attribution.processingDuration,
+      presentationDelay: attribution.presentationDelay,
       loadState: attribution.loadState
     };
     interactionToNextPaint.update({

package/dist/esm/common/vitals/largest-contentful-paint.js

@@ -20,7 +20,9 @@ if (isBrowserScope) {
         element: attribution.element,
         timeToFirstByte: attribution.timeToFirstByte,
         resourceLoadDelay: attribution.resourceLoadDelay,
-        resourceLoadTime: attribution.resourceLoadTime,
+        resourceLoadDuration: attribution.resourceLoadDuration,
+        resourceLoadTime: attribution.resourceLoadDuration,
+        // kept for NR backwards compatibility, deprecated in v3->v4
         elementRenderDelay: attribution.elementRenderDelay
       };
       if (attribution.url) attrs.elUrl = cleanURL(attribution.url);

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

@@ -134,20 +134,20 @@ export class Aggregate extends AggregateBase {
           this.ee.abort();
           return;
         }
-        try {
-          this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime);
-          if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready');
-          agentRuntime.timeKeeper = this.timeKeeper;
-        } catch (error) {
-          this.ee.abort();
-          warn(17, error);
-          return;
-        }
         try {
           const {
             app,
             ...flags
           } = JSON.parse(responseText);
+          try {
+            this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime, app.nrServerTime);
+            if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready');
+            agentRuntime.timeKeeper = this.timeKeeper;
+          } catch (error) {
+            this.ee.abort();
+            warn(17, error);
+            return;
+          }
           agentRuntime.appMetadata = app;
           activateFeatures(flags, this.agentIdentifier);
           this.drain();

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

@@ -103,7 +103,6 @@ export class Aggregate extends AggregateBase {
       block_selector,
       mask_text_selector,
       mask_all_inputs,
-      inline_stylesheet,
       inline_images,
       collect_fonts
     } = getConfigurationValue(this.agentIdentifier, 'session_replay');
@@ -130,7 +129,6 @@ export class Aggregate extends AggregateBase {
     /** 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);
@@ -248,7 +246,7 @@ export class Aggregate extends AggregateBase {
   prepareHarvest({
     opts
   } = {}) {
-    if (!this.recorder || !this.timeKeeper?.ready) return;
+    if (!this.recorder || !this.timeKeeper?.ready || !this.recorder.hasSeenSnapshot) return;
     const recorderEvents = this.recorder.getEvents();
     // get the event type and use that to trigger another harvest if needed
     if (!recorderEvents.events.length || this.mode !== MODE.FULL || this.blocked) return;

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

@@ -27,14 +27,14 @@ export class Recorder {
     this.recording = false;
     /** The pointer to the current bucket holding rrweb events */
     this.currentBufferTarget = this.#events;
+    /** Only set to true once a snapshot node has been processed.  Used to block preload harvests from sending before we know we have a snapshot */
+    this.hasSeenSnapshot = false;
     /** 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 = false;
     /** The parent class that instantiated the recorder */
     this.parent = parent;
-    /** Config to inform to inline stylesheet contents (true default) */
-    this.shouldInlineStylesheets = getConfigurationValue(this.parent.agentIdentifier, 'session_replay.inline_stylesheet');
     /** A flag that can be set to false by failing conversions to stop the fetching process */
-    this.shouldFix = this.shouldInlineStylesheets && getConfigurationValue(this.parent.agentIdentifier, 'session_replay.fix_stylesheets');
+    this.shouldFix = getConfigurationValue(this.parent.agentIdentifier, 'session_replay.fix_stylesheets');
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     this.stopRecording = () => {/* no-op until set by rrweb initializer */};
   }
@@ -76,13 +76,16 @@ export class Recorder {
       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);
+      try {
+        if (typeof element?.type === 'string' && element.type.toLowerCase() !== 'password' && (element?.dataset?.nrUnmask !== undefined || element?.classList?.contains('nr-unmask'))) return text;
+      } catch (err) {
+        // likely an element was passed to this handler that was invalid and was missing attributes or methods
+      }
+      return '*'.repeat(text?.length || 0);
     };
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
@@ -97,7 +100,7 @@ export class Recorder {
       maskTextFn: customMasker,
       maskAllInputs: mask_all_inputs,
       maskInputFn: customMasker,
-      inlineStylesheet: inline_stylesheet,
+      inlineStylesheet: true,
       inlineImages: inline_images,
       collectFonts: collect_fonts,
       checkoutEveryNms: CHECKOUT_MS[this.parent.mode],
@@ -124,13 +127,17 @@ export class Recorder {
    * @param {*} isCheckout - Flag indicating if the payload was triggered as a checkout
    */
   audit(event, isCheckout) {
-    /** only run the audit if inline_stylesheets is configured as on (default behavior) */
-    if (this.shouldInlineStylesheets === false || !this.shouldFix) {
-      this.currentBufferTarget.inlinedAllStylesheets = false;
-      return this.store(event, isCheckout);
-    }
     /** An count of stylesheet objects that were blocked from accessing contents via JS */
     const incompletes = stylesheetEvaluator.evaluate();
+    const missingInlineSMTag = 'SessionReplay/Payload/Missing-Inline-Css/';
+    /** only run the full fixing behavior (more costly) if fix_stylesheets is configured as on (default behavior) */
+    if (!this.shouldFix) {
+      if (incompletes > 0) {
+        this.currentBufferTarget.inlinedAllStylesheets = false;
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee);
+      }
+      return this.store(event, isCheckout);
+    }
     /** Only stop ignoring data if already ignoring and a new valid snapshap is taking place (0 incompletes and we get a meta node for the snap) */
     if (!incompletes && this.#fixing && event.type === RRWEB_EVENT_TYPES.Meta) this.#fixing = false;
     if (incompletes > 0) {
@@ -140,8 +147,8 @@ export class Recorder {
           this.currentBufferTarget.inlinedAllStylesheets = false;
           this.shouldFix = false;
         }
-        handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee);
-        handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee);
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee);
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee);
         this.takeFullSnapshot();
       });
       /** Only start ignoring data if got a faulty snapshot */
@@ -184,6 +191,7 @@ export class Recorder {
     // snapshot event
     if (event.type === RRWEB_EVENT_TYPES.FullSnapshot) {
       this.currentBufferTarget.hasSnapshot = true;
+      this.hasSeenSnapshot = true;
     }
     this.currentBufferTarget.add(event);
 

package/dist/esm/features/session_replay/shared/stylesheet-evaluator.js

@@ -2,7 +2,7 @@ import { gosNREUMOriginals } from '../../../common/window/nreum';
 import { isBrowserScope } from '../../../common/constants/runtime';
 class StylesheetEvaluator {
   #evaluated = new WeakSet();
-  #fetchProms = [];
+  #brokenSheets = [];
   /**
   * Flipped to true if stylesheets that cannot be natively inlined are detected by the stylesheetEvaluator class
   * Used at harvest time to denote that all subsequent payloads are subject to this and customers should be advised to handle crossorigin decoration
@@ -16,6 +16,7 @@ class StylesheetEvaluator {
    */
   evaluate() {
     let incompletes = 0;
+    this.#brokenSheets = [];
     if (isBrowserScope) {
       for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
         if (!this.#evaluated.has(document.styleSheets[i])) {
@@ -26,7 +27,7 @@ class StylesheetEvaluator {
           } catch (err) {
             if (!document.styleSheets[i].href) return;
             incompletes++;
-            this.#fetchProms.push(this.#fetchAndOverride(document.styleSheets[i]));
+            this.#brokenSheets.push(document.styleSheets[i]);
           }
         }
       }
@@ -40,8 +41,8 @@ class StylesheetEvaluator {
    * @returns {Promise}
    */
   async fix() {
-    await Promise.all(this.#fetchProms);
-    this.#fetchProms = [];
+    await Promise.all(this.#brokenSheets.map(sheet => this.#fetchAndOverride(sheet)));
+    this.#brokenSheets = [];
     const failedToFix = this.failedToFix;
     this.failedToFix = 0;
     return failedToFix;

package/dist/esm/features/utils/event-buffer.js

@@ -58,7 +58,8 @@ export class EventBuffer {
   }
 
   /**
-   * Adds an event object to the buffer while tallying size
+   * Adds an event object to the buffer while tallying size. Only adds the event if it is valid
+   * and would not make the event buffer exceed the maxPayloadSize.
    * @param {Object} event the event object to add to the buffer
    * @returns {EventBuffer} returns the event buffer for chaining
    */

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

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

package/dist/types/common/config/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../../src/common/config/init.js"],"names":[],"mappings":"AAkHA,+CAIC;AAED,0DAKC;AAED,+DAYC"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../../src/common/config/init.js"],"names":[],"mappings":"AAiHA,+CAIC;AAED,0DAKC;AAED,+DAYC"}

package/dist/types/common/timing/time-keeper.d.ts

@@ -13,8 +13,9 @@ export class TimeKeeper {
      * @param rumRequest {XMLHttpRequest} The xhr for the rum request
      * @param startTime {number} The start time of the RUM request
      * @param endTime {number} The end time of the RUM request
+     * @param nrServerTime {number} the unix number value of the NR server time in MS, returned in the RUM request body
      */
-    processRumRequest(rumRequest: XMLHttpRequest, startTime: number, endTime: number): void;
+    processRumRequest(rumRequest: XMLHttpRequest, startTime: number, endTime: number, nrServerTime: number): void;
     /**
      * Converts a page origin relative time to an absolute timestamp
      * using the user's local clock.

package/dist/types/common/timing/time-keeper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-keeper.d.ts","sourceRoot":"","sources":["../../../../src/common/timing/time-keeper.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH;IA2BE,kCAGC;IAED,qBAEC;IAED,kCAEC;IAED,4BAEC;IAED;;;;;OAKG;IACH,8BAJsB,cAAc,aACf,MAAM,WACR,MAAM,QA2BxB;IAED;;;;;OAKG;IACH,uCAHwB,MAAM,GACjB,MAAM,CAIlB;IAED;;;;;OAKG;IACH,0CAFa,MAAM,CAIlB;IAED;;;;OAIG;IACH,oCAHqB,MAAM,GACf,MAAM,CAIjB;IAED,+FAA+F;IAC/F,0BASC;;CACF"}
+{"version":3,"file":"time-keeper.d.ts","sourceRoot":"","sources":["../../../../src/common/timing/time-keeper.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH;IA2BE,kCAGC;IAED,qBAEC;IAED,kCAEC;IAED,4BAEC;IAED;;;;;;OAMG;IACH,8BALsB,cAAc,aACf,MAAM,WACR,MAAM,gBACD,MAAM,QAqB7B;IAED;;;;;OAKG;IACH,uCAHwB,MAAM,GACjB,MAAM,CAIlB;IAED;;;;;OAKG;IACH,0CAFa,MAAM,CAIlB;IAED;;;;OAIG;IACH,oCAHqB,MAAM,GACf,MAAM,CAIjB;IAED,+FAA+F;IAC/F,0BASC;;CACF"}

package/dist/types/common/util/stringify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stringify.d.ts","sourceRoot":"","sources":["../../../../src/common/util/stringify.js"],"names":[],"mappings":"AAyBA;;;;;GAKG;AACH,+BAHW,GAAC,GACC,MAAM,CAYlB"}
+{"version":3,"file":"stringify.d.ts","sourceRoot":"","sources":["../../../../src/common/util/stringify.js"],"names":[],"mappings":"AAyBA;;;;;GAKG;AACH,+BAHW,GAAC,GACC,MAAM,CAclB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/page_view_event/aggregate/index.js"],"names":[],"mappings":"AAkBA;IACE,2BAA2C;IAC3C,mDA0BC;IAvBC,wBAAwB;IACxB,8BAA8B;IAC9B,8BAA8B;IAC9B,uBAAsD;IAsBxD,gBAqGC;CACF;8BA5I6B,4BAA4B;2BAK/B,oCAAoC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/page_view_event/aggregate/index.js"],"names":[],"mappings":"AAkBA;IACE,2BAA2C;IAC3C,mDA0BC;IAvBC,wBAAwB;IACxB,8BAA8B;IAC9B,8BAA8B;IAC9B,uBAAsD;IAsBxD,gBAmGC;CACF;8BA1I6B,4BAA4B;2BAK/B,oCAAoC"}

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":"AA+BA;IACE,2BAAiC;IAIjC,8DAuGC;IA1GD,aAAe;IAKb,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IAGxB,2CAA2C;IAC3C,sDAAwB;IACxB,6CAA6C;IAC7C,gDAAmB;IAEnB,0BAA0B;IAC1B,kBAAqB;IACrB,6CAA6C;IAC7C,gBAA2B;IAE3B,cAA8B;IAC9B,kBAA+C;IAoC/C,4BAKQ;IA6CV,0BAMC;IAED,qBAWC;IAED;;;;;;;OAOG;IACH,gDAHW,OAAO,GACL,IAAI,CA8DhB;IAED,2BASC;IAED;;;;;;;;;;;;oBAiDC;IAED,sCAIC;IAED;;;;;;;;;;MA2EC;IAED,qCAOC;IAED;;;;OAIG;IACH,mCAKC;IAED,yDAAyD;IACzD,+CAUC;IAED,yCAGC;CACF;8BAjZ6B,4BAA4B;iCALzB,2CAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/aggregate/index.js"],"names":[],"mappings":"AA+BA;IACE,2BAAiC;IAIjC,8DAsGC;IAzGD,aAAe;IAKb,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IAGxB,2CAA2C;IAC3C,sDAAwB;IACxB,6CAA6C;IAC7C,gDAAmB;IAEnB,0BAA0B;IAC1B,kBAAqB;IACrB,6CAA6C;IAC7C,gBAA2B;IAE3B,cAA8B;IAC9B,kBAA+C;IAoC/C,4BAKQ;IA4CV,0BAMC;IAED,qBAWC;IAED;;;;;;;OAOG;IACH,gDAHW,OAAO,GACL,IAAI,CA8DhB;IAED,2BASC;IAED;;;;;;;;;;;;oBAiDC;IAED,sCAIC;IAED;;;;;;;;;;MA2EC;IAED,qCAOC;IAED;;;;OAIG;IACH,mCAKC;IAED,yDAAyD;IACzD,+CAUC;IAED,yCAGC;CACF;8BAhZ6B,4BAA4B;iCALzB,2CAA2C"}

package/dist/types/features/session_replay/shared/recorder.d.ts

@@ -4,12 +4,12 @@ export class Recorder {
     recording: boolean;
     /** The pointer to the current bucket holding rrweb events */
     currentBufferTarget: RecorderEvents;
+    /** Only set to true once a snapshot node has been processed.  Used to block preload harvests from sending before we know we have a snapshot */
+    hasSeenSnapshot: boolean;
     /** 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: boolean;
     /** The parent class that instantiated the recorder */
     parent: any;
-    /** Config to inform to inline stylesheet contents (true default) */
-    shouldInlineStylesheets: any;
     /** A flag that can be set to false by failing conversions to stop the fetching process */
     shouldFix: any;
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */

package/dist/types/features/session_replay/shared/recorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recorder.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/shared/recorder.js"],"names":[],"mappings":"AAaA;IAUE,yBAkBC;IAdC,iEAAiE;IACjE,mBAAsB;IACtB,6DAA6D;IAC7D,oCAAuC;IACvC,kIAAkI;IAClI,kBAAqB;IACrB,sDAAsD;IACtD,YAAoB;IACpB,oEAAoE;IACpE,6BAAqH;IACrH,0FAA0F;IAC1F,eAAqI;IACrI,uIAAuI;IACvI,0BAAyE;IAG3E;;;;;;;;;MAmBC;IAED,mFAAmF;IACnF,oBAKC;IAED,qDAAqD;IACrD,uBAuCC;IAED;;;;;OAKG;IACH,aAHW,GAAC,cACD,GAAC,QA4BX;IAED,0HAA0H;IAC1H,yCAmDC;IAzCG,8BAAoB;IA2CxB,0HAA0H;IAC1H,yBAOC;IAED,wBAEC;IAED,gCAAgC;IAChC,uCAGC;IAED;;;SAGK;IACL,oCAGC;;CACF;+BAlO8B,mBAAmB"}
+{"version":3,"file":"recorder.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/shared/recorder.js"],"names":[],"mappings":"AAaA;IAUE,yBAkBC;IAdC,iEAAiE;IACjE,mBAAsB;IACtB,6DAA6D;IAC7D,oCAAuC;IACvC,+IAA+I;IAC/I,yBAA4B;IAC5B,kIAAkI;IAClI,kBAAqB;IACrB,sDAAsD;IACtD,YAAoB;IACpB,0FAA0F;IAC1F,eAAqG;IACrG,uIAAuI;IACvI,0BAAyE;IAG3E;;;;;;;;;MAmBC;IAED,mFAAmF;IACnF,oBAKC;IAED,qDAAqD;IACrD,uBA2CC;IAED;;;;;OAKG;IACH,aAHW,GAAC,cACD,GAAC,QAgCX;IAED,0HAA0H;IAC1H,yCAoDC;IA1CG,8BAAoB;IA4CxB,0HAA0H;IAC1H,yBAOC;IAED,wBAEC;IAED,gCAAgC;IAChC,uCAGC;IAED;;;SAGK;IACL,oCAGC;;CACF;+BA3O8B,mBAAmB"}

package/dist/types/features/session_replay/shared/stylesheet-evaluator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet-evaluator.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/shared/stylesheet-evaluator.js"],"names":[],"mappings":"AAyFA,sDAA4D;AAtF5D;IAGE;;;QAGI;IACJ,oCAAkC;IAClC,oBAAe;IAEf;;;OAGG;IACH,mBAmBC;IAED;;;OAGG;IACH,oBAMC;;CAuCF"}
+{"version":3,"file":"stylesheet-evaluator.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/shared/stylesheet-evaluator.js"],"names":[],"mappings":"AA0FA,sDAA4D;AAvF5D;IAGE;;;QAGI;IACJ,oCAAkC;IAClC,oBAAe;IAEf;;;OAGG;IACH,mBAoBC;IAED;;;OAGG;IACH,oBAMC;;CAuCF"}

package/dist/types/features/utils/event-buffer.d.ts

@@ -32,7 +32,8 @@ export class EventBuffer {
      */
     get hasData(): boolean;
     /**
-     * Adds an event object to the buffer while tallying size
+     * Adds an event object to the buffer while tallying size. Only adds the event if it is valid
+     * and would not make the event buffer exceed the maxPayloadSize.
      * @param {Object} event the event object to add to the buffer
      * @returns {EventBuffer} returns the event buffer for chaining
      */

package/dist/types/features/utils/event-buffer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event-buffer.d.ts","sourceRoot":"","sources":["../../../../src/features/utils/event-buffer.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH;;GAEG;AACH;IAQE;;;OAGG;IACH,6BAFW,MAAM,YAAC,EAIjB;IADC,uBAAoC;IAGtC;;OAEG;IACH,uBAEC;IAED;;OAEG;IACH,oBAEC;IAED;;OAEG;IACH,wBAGC;IAED;;;OAGG;IACH,uBAEC;IAED;;;;OAIG;IACH,WAHW,MAAM,GACJ,WAAW,CAQvB;IAED;;;OAGG;IACH,SAFa,WAAW,CAMvB;IAED;;;;OAIG;IACH,QAFa,WAAW,CAMvB;IAED;;;;OAIG;IACH,UAFa,WAAW,CAMvB;IAED;;;;;OAKG;IACH,kCAHW,OAAO,GACL,WAAW,CAOvB;IAED;;;;OAIG;IACH,eAHW,MAAM,GACJ,OAAO,CAInB;;CACF"}
+{"version":3,"file":"event-buffer.d.ts","sourceRoot":"","sources":["../../../../src/features/utils/event-buffer.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH;;GAEG;AACH;IAQE;;;OAGG;IACH,6BAFW,MAAM,YAAC,EAIjB;IADC,uBAAoC;IAGtC;;OAEG;IACH,uBAEC;IAED;;OAEG;IACH,oBAEC;IAED;;OAEG;IACH,wBAGC;IAED;;;OAGG;IACH,uBAEC;IAED;;;;;OAKG;IACH,WAHW,MAAM,GACJ,WAAW,CAQvB;IAED;;;OAGG;IACH,SAFa,WAAW,CAMvB;IAED;;;;OAIG;IACH,QAFa,WAAW,CAMvB;IAED;;;;OAIG;IACH,UAFa,WAAW,CAMvB;IAED;;;;;OAKG;IACH,kCAHW,OAAO,GACL,WAAW,CAOvB;IAED;;;;OAIG;IACH,eAHW,MAAM,GACJ,OAAO,CAInB;;CACF"}

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":"AAaA;;;GAGG;AACH;IACE,uBAiBC;CACF;sBApCqB,SAAS"}
+{"version":3,"file":"browser-agent.d.ts","sourceRoot":"","sources":["../../../src/loaders/browser-agent.js"],"names":[],"mappings":"AAcA;;;GAGG;AACH;IACE,uBAkBC;CACF;sBAtCqB,SAAS"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.266.0",
+  "version": "1.267.0",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",
@@ -59,6 +59,9 @@
       "features/session_replay": [
         "dist/types/features/session_replay/instrument/index.d.ts"
       ],
+      "features/soft_navigations": [
+        "dist/types/features/soft_navigations/instrument/index.d.ts"
+      ],
       "features/spa": [
         "dist/types/features/spa/instrument/index.d.ts"
       ]
@@ -193,7 +196,7 @@
   "dependencies": {
     "fflate": "0.7.4",
     "rrweb": "2.0.0-alpha.12",
-    "web-vitals": "3.5.2"
+    "web-vitals": "4.2.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

package/src/common/config/init.js

@@ -69,8 +69,7 @@ const model = () => {
       error_sampling_rate: 100, // float from 0 - 100
       collect_fonts: false, // serialize fonts for collection without public asset url, this is currently broken in RRWeb -- https://github.com/rrweb-io/rrweb/issues/1304.  When fixed, revisit with test cases
       inline_images: false, // serialize images for collection without public asset url -- right now this is only useful for testing as it easily generates payloads too large to be harvested
-      inline_stylesheet: true, // serialize css for collection without public asset url
-      fix_stylesheets: true, // fetch missing stylesheet resources for inlining, only works if 'inline_stylesheet' is also true
+      fix_stylesheets: true, // fetch missing stylesheet resources for inlining
       // recording config settings
       mask_all_inputs: true,
       // this has a getter/setter to facilitate validation of the selectors

package/src/common/timing/time-keeper.js

@@ -1,8 +1,6 @@
 import { originTime } from '../constants/runtime'
 import { getRuntime } from '../config/runtime'
 
-const rfc2616Regex = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun), ([0-3][0-9]) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{4}) ([01][0-9]|2[0-3])(:[0-5][0-9]){2} GMT$/
-
 /**
  * Class used to adjust the timestamp of harvested data to New Relic server time. This
  * is done by tracking the performance timings of the RUM call and applying a calculation
@@ -57,28 +55,23 @@ export class TimeKeeper {
    * @param rumRequest {XMLHttpRequest} The xhr for the rum request
    * @param startTime {number} The start time of the RUM request
    * @param endTime {number} The end time of the RUM request
+   * @param nrServerTime {number} the unix number value of the NR server time in MS, returned in the RUM request body
    */
-  processRumRequest (rumRequest, startTime, endTime) {
+  processRumRequest (rumRequest, startTime, endTime, nrServerTime) {
     this.processStoredDiff() // Check session entity for stored time diff
     if (this.#ready) return // Server time calculated from session entity
 
-    const responseDateHeader = rumRequest.getResponseHeader('Date')
-    if (!responseDateHeader) {
-      throw new Error('Missing date header on rum response.')
-    }
-    if (!rfc2616Regex.test(responseDateHeader)) {
-      throw new Error('Date header invalid format.')
-    }
+    if (!nrServerTime) throw new Error('nrServerTime not found')
 
     const medianRumOffset = (endTime - startTime) / 2
     const serverOffset = startTime + medianRumOffset
 
     // Corrected page origin time
-    this.#correctedOriginTime = Math.floor(Date.parse(responseDateHeader) - serverOffset)
+    this.#correctedOriginTime = Math.floor(nrServerTime - serverOffset)
     this.#localTimeDiff = originTime - this.#correctedOriginTime
 
     if (isNaN(this.#correctedOriginTime)) {
-      throw new Error('Date header invalid format.')
+      throw new Error('Failed to correct browser time to server time')
     }
 
     this.#session?.write({ serverTimeDiff: this.#localTimeDiff })

package/src/common/util/stringify.js

@@ -38,5 +38,7 @@ export function stringify (val) {
     } catch (err) {
       // do nothing
     }
+    // return a string so that downstream users of the method do not throw errors
+    return ''
   }
 }

package/src/common/vitals/interaction-to-next-paint.js

@@ -10,9 +10,15 @@ if (isBrowserScope) {
   onINP(({ value, attribution, id }) => {
     const attrs = {
       metricId: id,
-      eventTarget: attribution.eventTarget,
-      eventType: attribution.eventType,
-      eventTime: attribution.eventTime,
+      eventTarget: attribution.interactionTarget, // event* attrs deprecated in v4, kept for NR backwards compatibility
+      eventTime: attribution.interactionTime, // event* attrs deprecated in v4, kept for NR backwards compatibility
+      interactionTarget: attribution.interactionTarget,
+      interactionTime: attribution.interactionTime,
+      interactionType: attribution.interactionType,
+      inputDelay: attribution.inputDelay,
+      nextPaintTime: attribution.nextPaintTime,
+      processingDuration: attribution.processingDuration,
+      presentationDelay: attribution.presentationDelay,
       loadState: attribution.loadState
     }
     interactionToNextPaint.update({ value, attrs })

package/src/common/vitals/largest-contentful-paint.js

@@ -20,7 +20,8 @@ if (isBrowserScope) {
         element: attribution.element,
         timeToFirstByte: attribution.timeToFirstByte,
         resourceLoadDelay: attribution.resourceLoadDelay,
-        resourceLoadTime: attribution.resourceLoadTime,
+        resourceLoadDuration: attribution.resourceLoadDuration,
+        resourceLoadTime: attribution.resourceLoadDuration, // kept for NR backwards compatibility, deprecated in v3->v4
         elementRenderDelay: attribution.elementRenderDelay
       }
       if (attribution.url) attrs.elUrl = cleanURL(attribution.url)

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

@@ -125,19 +125,17 @@ export class Aggregate extends AggregateBase {
           return
         }
 
-        try {
-          this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime)
-          if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready')
-
-          agentRuntime.timeKeeper = this.timeKeeper
-        } catch (error) {
-          this.ee.abort()
-          warn(17, error)
-          return
-        }
-
         try {
           const { app, ...flags } = JSON.parse(responseText)
+          try {
+            this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime, app.nrServerTime)
+            if (!this.timeKeeper.ready) throw new Error('TimeKeeper not ready')
+            agentRuntime.timeKeeper = this.timeKeeper
+          } catch (error) {
+            this.ee.abort()
+            warn(17, error)
+            return
+          }
           agentRuntime.appMetadata = app
           activateFeatures(flags, this.agentIdentifier)
           this.drain()

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

@@ -104,7 +104,7 @@ export class Aggregate extends AggregateBase {
       this.handleError(e)
     }, 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')
+    const { error_sampling_rate, sampling_rate, autoStart, block_selector, mask_text_selector, mask_all_inputs, inline_images, collect_fonts } = getConfigurationValue(this.agentIdentifier, 'session_replay')
 
     this.waitForFlags(['srs', 'sr']).then(([srMode, entitled]) => {
       this.entitled = !!entitled
@@ -129,7 +129,6 @@ export class Aggregate extends AggregateBase {
     /** 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)
@@ -242,7 +241,7 @@ export class Aggregate extends AggregateBase {
   }
 
   prepareHarvest ({ opts } = {}) {
-    if (!this.recorder || !this.timeKeeper?.ready) return
+    if (!this.recorder || !this.timeKeeper?.ready || !this.recorder.hasSeenSnapshot) return
     const recorderEvents = this.recorder.getEvents()
     // get the event type and use that to trigger another harvest if needed
     if (!recorderEvents.events.length || (this.mode !== MODE.FULL) || this.blocked) return

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

@@ -29,14 +29,14 @@ export class Recorder {
     this.recording = false
     /** The pointer to the current bucket holding rrweb events */
     this.currentBufferTarget = this.#events
+    /** Only set to true once a snapshot node has been processed.  Used to block preload harvests from sending before we know we have a snapshot */
+    this.hasSeenSnapshot = false
     /** 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 = false
     /** The parent class that instantiated the recorder */
     this.parent = parent
-    /** Config to inform to inline stylesheet contents (true default) */
-    this.shouldInlineStylesheets = getConfigurationValue(this.parent.agentIdentifier, 'session_replay.inline_stylesheet')
     /** A flag that can be set to false by failing conversions to stop the fetching process */
-    this.shouldFix = this.shouldInlineStylesheets && getConfigurationValue(this.parent.agentIdentifier, 'session_replay.fix_stylesheets')
+    this.shouldFix = getConfigurationValue(this.parent.agentIdentifier, 'session_replay.fix_stylesheets')
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     this.stopRecording = () => { /* no-op until set by rrweb initializer */ }
   }
@@ -73,10 +73,14 @@ export class Recorder {
   /** 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 { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs, 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)
+      try {
+        if (typeof element?.type === 'string' && element.type.toLowerCase() !== 'password' && (element?.dataset?.nrUnmask !== undefined || element?.classList?.contains('nr-unmask'))) return text
+      } catch (err) {
+        // likely an element was passed to this handler that was invalid and was missing attributes or methods
+      }
+      return '*'.repeat(text?.length || 0)
     }
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
@@ -91,7 +95,7 @@ export class Recorder {
       maskTextFn: customMasker,
       maskAllInputs: mask_all_inputs,
       maskInputFn: customMasker,
-      inlineStylesheet: inline_stylesheet,
+      inlineStylesheet: true,
       inlineImages: inline_images,
       collectFonts: collect_fonts,
       checkoutEveryNms: CHECKOUT_MS[this.parent.mode],
@@ -119,13 +123,17 @@ export class Recorder {
    * @param {*} isCheckout - Flag indicating if the payload was triggered as a checkout
    */
   audit (event, isCheckout) {
-    /** only run the audit if inline_stylesheets is configured as on (default behavior) */
-    if (this.shouldInlineStylesheets === false || !this.shouldFix) {
-      this.currentBufferTarget.inlinedAllStylesheets = false
-      return this.store(event, isCheckout)
-    }
     /** An count of stylesheet objects that were blocked from accessing contents via JS */
     const incompletes = stylesheetEvaluator.evaluate()
+    const missingInlineSMTag = 'SessionReplay/Payload/Missing-Inline-Css/'
+    /** only run the full fixing behavior (more costly) if fix_stylesheets is configured as on (default behavior) */
+    if (!this.shouldFix) {
+      if (incompletes > 0) {
+        this.currentBufferTarget.inlinedAllStylesheets = false
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee)
+      }
+      return this.store(event, isCheckout)
+    }
     /** Only stop ignoring data if already ignoring and a new valid snapshap is taking place (0 incompletes and we get a meta node for the snap) */
     if (!incompletes && this.#fixing && event.type === RRWEB_EVENT_TYPES.Meta) this.#fixing = false
     if (incompletes > 0) {
@@ -135,8 +143,8 @@ export class Recorder {
           this.currentBufferTarget.inlinedAllStylesheets = false
           this.shouldFix = false
         }
-        handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
-        handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
         this.takeFullSnapshot()
       })
       /** Only start ignoring data if got a faulty snapshot */
@@ -184,6 +192,7 @@ export class Recorder {
     // snapshot event
     if (event.type === RRWEB_EVENT_TYPES.FullSnapshot) {
       this.currentBufferTarget.hasSnapshot = true
+      this.hasSeenSnapshot = true
     }
     this.currentBufferTarget.add(event)
 

package/src/features/session_replay/shared/stylesheet-evaluator.js

@@ -3,7 +3,7 @@ import { isBrowserScope } from '../../../common/constants/runtime'
 
 class StylesheetEvaluator {
   #evaluated = new WeakSet()
-  #fetchProms = []
+  #brokenSheets = []
   /**
   * Flipped to true if stylesheets that cannot be natively inlined are detected by the stylesheetEvaluator class
   * Used at harvest time to denote that all subsequent payloads are subject to this and customers should be advised to handle crossorigin decoration
@@ -17,6 +17,7 @@ class StylesheetEvaluator {
    */
   evaluate () {
     let incompletes = 0
+    this.#brokenSheets = []
     if (isBrowserScope) {
       for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
         if (!this.#evaluated.has(document.styleSheets[i])) {
@@ -27,7 +28,7 @@ class StylesheetEvaluator {
           } catch (err) {
             if (!document.styleSheets[i].href) return
             incompletes++
-            this.#fetchProms.push(this.#fetchAndOverride(document.styleSheets[i]))
+            this.#brokenSheets.push(document.styleSheets[i])
           }
         }
       }
@@ -41,8 +42,8 @@ class StylesheetEvaluator {
    * @returns {Promise}
    */
   async fix () {
-    await Promise.all(this.#fetchProms)
-    this.#fetchProms = []
+    await Promise.all(this.#brokenSheets.map(sheet => this.#fetchAndOverride(sheet)))
+    this.#brokenSheets = []
     const failedToFix = this.failedToFix
     this.failedToFix = 0
     return failedToFix

package/src/features/utils/event-buffer.js

@@ -58,7 +58,8 @@ export class EventBuffer {
   }
 
   /**
-   * Adds an event object to the buffer while tallying size
+   * Adds an event object to the buffer while tallying size. Only adds the event if it is valid
+   * and would not make the event buffer exceed the maxPayloadSize.
    * @param {Object} event the event object to add to the buffer
    * @returns {EventBuffer} returns the event buffer for chaining
    */

package/src/loaders/browser-agent.js

@@ -10,6 +10,7 @@ import { Instrument as InstrumentSpa } from '../features/spa/instrument'
 import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument'
 import { Instrument as InstrumentGenericEvents } from '../features/generic_events/instrument'
 import { Instrument as InstrumentLogs } from '../features/logging/instrument'
+import { Instrument as InstrumentSoftNav } from '../features/soft_navigations/instrument'
 
 /**
  * An agent class with all feature modules available. Features may be disabled and enabled via runtime configuration.
@@ -27,6 +28,7 @@ export class BrowserAgent extends Agent {
         InstrumentMetrics,
         InstrumentErrors,
         InstrumentSpa,
+        InstrumentSoftNav,
         InstrumentSessionReplay,
         InstrumentGenericEvents,
         InstrumentLogs