@newrelic/browser-agent 1.251.0 → 1.251.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.251.1](https://github.com/newrelic/newrelic-browser-agent/compare/v1.251.0...v1.251.1) (2024-01-29)
+
+
+### Bug Fixes
+
+* Fix deferred Session Replay payloads ([#868](https://github.com/newrelic/newrelic-browser-agent/issues/868)) ([f69e4b0](https://github.com/newrelic/newrelic-browser-agent/commit/f69e4b0eba5a54f4e67316f5e6a30090cf7360cc))
+* Pass unload options to simultaneous harvests in Session Replay ([#870](https://github.com/newrelic/newrelic-browser-agent/issues/870)) ([655aa5d](https://github.com/newrelic/newrelic-browser-agent/commit/655aa5d261d03f71086d3cfc73cb72db51cb28c7))
+
 ## [1.251.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.250.0...v1.251.0) (2024-01-24)
 
 

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.251.0";
+const VERSION = exports.VERSION = "1.251.1";
 
 /**
  * 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.251.0";
+const VERSION = exports.VERSION = "1.251.1";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/common/harvest/harvest-scheduler.js

@@ -109,7 +109,8 @@ class HarvestScheduler extends _sharedContext.SharedContext {
       if (!submitMethod) return false;
       const retry = !opts?.unload && submitMethod === submitData.xhr;
       payload = this.opts.getPayload({
-        retry
+        retry,
+        opts
       });
       if (!payload) {
         if (this.started) {

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

@@ -113,7 +113,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
 
     // [Temporary] Report restores from BFCache to NR1 while feature flag is in place in lieu of sending pageshow events.
     (0, _eventListenerOpts.windowAddEventListener)('pageshow', evt => {
-      if (evt.persisted) {
+      if (evt?.persisted) {
         this.storeSupportabilityMetrics('Generic/BFCache/PageRestored');
       }
     });

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

@@ -32,7 +32,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * It is not production ready, and is not intended to be imported or implemented in any build of the browser agent until
  * functionality is validated and a full user experience is curated.
  */
-let gzipper, u8;
 class Aggregate extends _aggregateBase.AggregateBase {
   static featureName = _constants.FEATURE_NAME;
   // pass the recorder into the aggregator
@@ -44,8 +43,10 @@ class Aggregate extends _aggregateBase.AggregateBase {
     this.initialized = false;
     /** Set once the feature has been "aborted" to prevent other side-effects from continuing */
     this.blocked = false;
-    /** can shut off efforts to compress the data */
-    this.shouldCompress = true;
+    /** populated with the gzipper lib async */
+    this.gzipper = undefined;
+    /** populated with the u8 string lib async */
+    this.u8 = undefined;
     /** the mode to start in.  Defaults to off */
     const {
       session
@@ -92,6 +93,11 @@ class Aggregate extends _aggregateBase.AggregateBase {
         getPayload: this.prepareHarvest.bind(this),
         raw: true
       }, this);
+      if (this.recorder?.getEvents().type === 'preloaded') {
+        this.prepUtils().then(() => {
+          this.scheduler.runHarvest();
+        });
+      }
       (0, _registerHandler.registerHandler)('recordReplay', () => {
         // if it has aborted or BCS returned bad entitlements, do not allow
         if (this.blocked || !this.entitled) return;
@@ -196,24 +202,29 @@ class Aggregate extends _aggregateBase.AggregateBase {
       // We only report (harvest) in FULL mode
       this.scheduler.startTimer(this.harvestTimeSeconds);
     }
+    await this.prepUtils();
+    if (!this.recorder.recording) this.recorder.startRecording();
+    this.syncWithSessionManager({
+      sessionReplayMode: this.mode
+    });
+  }
+  async prepUtils() {
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const {
         gzipSync,
         strToU8
       } = await Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "compressor" */'fflate')));
-      gzipper = gzipSync;
-      u8 = strToU8;
+      this.gzipper = gzipSync;
+      this.u8 = strToU8;
     } catch (err) {
       // compressor failed to load, but we can still record without compression as a last ditch effort
-      this.shouldCompress = false;
     }
-    if (!this.recorder.recording) this.recorder.startRecording();
-    this.syncWithSessionManager({
-      sessionReplayMode: this.mode
-    });
   }
   prepareHarvest() {
+    let {
+      opts
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (!this.recorder) return;
     const recorderEvents = this.recorder.getEvents();
     // get the event type and use that to trigger another harvest if needed
@@ -224,8 +235,8 @@ class Aggregate extends _aggregateBase.AggregateBase {
       return;
     }
     let len = 0;
-    if (this.shouldCompress) {
-      payload.body = gzipper(u8("[".concat(payload.body.map(e => e.__serialized).join(','), "]")));
+    if (!!this.gzipper && !!this.u8) {
+      payload.body = this.gzipper(this.u8("[".concat(payload.body.map(e => e.__serialized).join(','), "]")));
       len = payload.body.length;
       this.scheduler.opts.gzip = true;
     } else {
@@ -251,7 +262,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
       sessionReplaySentFirstChunk: true
     });
     this.recorder.clearBuffer();
-    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest();
+    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest(opts);
     return [payload];
   }
   getHarvestContents(recorderEvents) {
@@ -282,7 +293,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
     const relativeNow = (0, _now.now)();
     const firstEventTimestamp = events[0]?.timestamp; // from rrweb node
     const lastEventTimestamp = events[events.length - 1]?.timestamp; // from rrweb node
-    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp;
+    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp; // from rrweb node || from when the harvest cycle started
     const lastTimestamp = lastEventTimestamp || agentOffset + relativeNow;
     return {
       qs: {
@@ -293,7 +304,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
         attributes: (0, _encode.obj)({
           // this section of attributes must be controllable and stay below the query param padding limit -- see QUERY_PARAM_PADDING
           // if not, data could be lost to truncation at time of sending, potentially breaking parsing / API behavior in NR1
-          ...(this.shouldCompress && {
+          ...(!!this.gzipper && !!this.u8 && {
             content_encoding: 'gzip'
           }),
           'replay.firstTimestamp': firstTimestamp,

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

@@ -194,7 +194,7 @@ class Recorder {
    * https://staging.onenr.io/037jbJWxbjy
    * */
   estimateCompression(data) {
-    if (this.shouldCompress) return data * _constants.AVG_COMPRESSION;
+    if (!!this.parent.gzipper && !!this.parent.u8) return data * _constants.AVG_COMPRESSION;
     return data;
   }
 }

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

@@ -60,33 +60,38 @@ class StylesheetEvaluator {
   * @returns {Promise}
   */
   async #fetchAndOverride(target, href) {
-    const stylesheetContents = await _config.originals.FETCH.bind(window)(href);
-    if (!stylesheetContents.ok) {
-      this.failedToFix = true;
-      return;
-    }
-    const stylesheetText = await stylesheetContents.text();
     try {
-      const cssSheet = new CSSStyleSheet();
-      await cssSheet.replace(stylesheetText);
-      Object.defineProperty(target, 'cssRules', {
-        get() {
-          return cssSheet.cssRules;
-        }
-      });
-      Object.defineProperty(target, 'rules', {
-        get() {
-          return cssSheet.rules;
-        }
-      });
+      const stylesheetContents = await _config.originals.FETCH.bind(window)(href);
+      if (!stylesheetContents.ok) {
+        this.failedToFix = true;
+        return;
+      }
+      const stylesheetText = await stylesheetContents.text();
+      try {
+        const cssSheet = new CSSStyleSheet();
+        await cssSheet.replace(stylesheetText);
+        Object.defineProperty(target, 'cssRules', {
+          get() {
+            return cssSheet.cssRules;
+          }
+        });
+        Object.defineProperty(target, 'rules', {
+          get() {
+            return cssSheet.rules;
+          }
+        });
+      } catch (err) {
+        // cant make new dynamic stylesheets, browser likely doesn't support `.replace()`...
+        // this is appended in prep of forking rrweb
+        Object.defineProperty(target, 'cssText', {
+          get() {
+            return stylesheetText;
+          }
+        });
+        this.failedToFix = true;
+      }
     } catch (err) {
-      // cant make new dynamic stylesheets, browser likely doesn't support `.replace()`...
-      // this is appended in prep of forking rrweb
-      Object.defineProperty(target, 'cssText', {
-        get() {
-          return stylesheetText;
-        }
-      });
+      // failed to fetch
       this.failedToFix = true;
     }
   }

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

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

package/dist/esm/common/harvest/harvest-scheduler.js

@@ -102,7 +102,8 @@ export class HarvestScheduler extends SharedContext {
       if (!submitMethod) return false;
       const retry = !opts?.unload && submitMethod === submitData.xhr;
       payload = this.opts.getPayload({
-        retry
+        retry,
+        opts
       });
       if (!payload) {
         if (this.started) {

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

@@ -107,7 +107,7 @@ export class Aggregate extends AggregateBase {
 
     // [Temporary] Report restores from BFCache to NR1 while feature flag is in place in lieu of sending pageshow events.
     windowAddEventListener('pageshow', evt => {
-      if (evt.persisted) {
+      if (evt?.persisted) {
         this.storeSupportabilityMetrics('Generic/BFCache/PageRestored');
       }
     });

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

@@ -27,7 +27,6 @@ import { now } from '../../../common/timing/now';
 import { MODE, SESSION_EVENTS, SESSION_EVENT_TYPES } from '../../../common/session/constants';
 import { stringify } from '../../../common/util/stringify';
 import { stylesheetEvaluator } from '../shared/stylesheet-evaluator';
-let gzipper, u8;
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME;
   // pass the recorder into the aggregator
@@ -39,8 +38,10 @@ export class Aggregate extends AggregateBase {
     this.initialized = false;
     /** Set once the feature has been "aborted" to prevent other side-effects from continuing */
     this.blocked = false;
-    /** can shut off efforts to compress the data */
-    this.shouldCompress = true;
+    /** populated with the gzipper lib async */
+    this.gzipper = undefined;
+    /** populated with the u8 string lib async */
+    this.u8 = undefined;
     /** the mode to start in.  Defaults to off */
     const {
       session
@@ -87,6 +88,11 @@ export class Aggregate extends AggregateBase {
         getPayload: this.prepareHarvest.bind(this),
         raw: true
       }, this);
+      if (this.recorder?.getEvents().type === 'preloaded') {
+        this.prepUtils().then(() => {
+          this.scheduler.runHarvest();
+        });
+      }
       registerHandler('recordReplay', () => {
         // if it has aborted or BCS returned bad entitlements, do not allow
         if (this.blocked || !this.entitled) return;
@@ -191,24 +197,29 @@ export class Aggregate extends AggregateBase {
       // We only report (harvest) in FULL mode
       this.scheduler.startTimer(this.harvestTimeSeconds);
     }
+    await this.prepUtils();
+    if (!this.recorder.recording) this.recorder.startRecording();
+    this.syncWithSessionManager({
+      sessionReplayMode: this.mode
+    });
+  }
+  async prepUtils() {
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const {
         gzipSync,
         strToU8
       } = await import( /* webpackChunkName: "compressor" */'fflate');
-      gzipper = gzipSync;
-      u8 = strToU8;
+      this.gzipper = gzipSync;
+      this.u8 = strToU8;
     } catch (err) {
       // compressor failed to load, but we can still record without compression as a last ditch effort
-      this.shouldCompress = false;
     }
-    if (!this.recorder.recording) this.recorder.startRecording();
-    this.syncWithSessionManager({
-      sessionReplayMode: this.mode
-    });
   }
   prepareHarvest() {
+    let {
+      opts
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (!this.recorder) return;
     const recorderEvents = this.recorder.getEvents();
     // get the event type and use that to trigger another harvest if needed
@@ -219,8 +230,8 @@ export class Aggregate extends AggregateBase {
       return;
     }
     let len = 0;
-    if (this.shouldCompress) {
-      payload.body = gzipper(u8("[".concat(payload.body.map(e => e.__serialized).join(','), "]")));
+    if (!!this.gzipper && !!this.u8) {
+      payload.body = this.gzipper(this.u8("[".concat(payload.body.map(e => e.__serialized).join(','), "]")));
       len = payload.body.length;
       this.scheduler.opts.gzip = true;
     } else {
@@ -246,7 +257,7 @@ export class Aggregate extends AggregateBase {
       sessionReplaySentFirstChunk: true
     });
     this.recorder.clearBuffer();
-    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest();
+    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest(opts);
     return [payload];
   }
   getHarvestContents(recorderEvents) {
@@ -277,7 +288,7 @@ export class Aggregate extends AggregateBase {
     const relativeNow = now();
     const firstEventTimestamp = events[0]?.timestamp; // from rrweb node
     const lastEventTimestamp = events[events.length - 1]?.timestamp; // from rrweb node
-    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp;
+    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp; // from rrweb node || from when the harvest cycle started
     const lastTimestamp = lastEventTimestamp || agentOffset + relativeNow;
     return {
       qs: {
@@ -288,7 +299,7 @@ export class Aggregate extends AggregateBase {
         attributes: encodeObj({
           // this section of attributes must be controllable and stay below the query param padding limit -- see QUERY_PARAM_PADDING
           // if not, data could be lost to truncation at time of sending, potentially breaking parsing / API behavior in NR1
-          ...(this.shouldCompress && {
+          ...(!!this.gzipper && !!this.u8 && {
             content_encoding: 'gzip'
           }),
           'replay.firstTimestamp': firstTimestamp,

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

@@ -188,7 +188,7 @@ export class Recorder {
    * https://staging.onenr.io/037jbJWxbjy
    * */
   estimateCompression(data) {
-    if (this.shouldCompress) return data * AVG_COMPRESSION;
+    if (!!this.parent.gzipper && !!this.parent.u8) return data * AVG_COMPRESSION;
     return data;
   }
 }

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

@@ -54,33 +54,38 @@ class StylesheetEvaluator {
   * @returns {Promise}
   */
   async #fetchAndOverride(target, href) {
-    const stylesheetContents = await originals.FETCH.bind(window)(href);
-    if (!stylesheetContents.ok) {
-      this.failedToFix = true;
-      return;
-    }
-    const stylesheetText = await stylesheetContents.text();
     try {
-      const cssSheet = new CSSStyleSheet();
-      await cssSheet.replace(stylesheetText);
-      Object.defineProperty(target, 'cssRules', {
-        get() {
-          return cssSheet.cssRules;
-        }
-      });
-      Object.defineProperty(target, 'rules', {
-        get() {
-          return cssSheet.rules;
-        }
-      });
+      const stylesheetContents = await originals.FETCH.bind(window)(href);
+      if (!stylesheetContents.ok) {
+        this.failedToFix = true;
+        return;
+      }
+      const stylesheetText = await stylesheetContents.text();
+      try {
+        const cssSheet = new CSSStyleSheet();
+        await cssSheet.replace(stylesheetText);
+        Object.defineProperty(target, 'cssRules', {
+          get() {
+            return cssSheet.cssRules;
+          }
+        });
+        Object.defineProperty(target, 'rules', {
+          get() {
+            return cssSheet.rules;
+          }
+        });
+      } catch (err) {
+        // cant make new dynamic stylesheets, browser likely doesn't support `.replace()`...
+        // this is appended in prep of forking rrweb
+        Object.defineProperty(target, 'cssText', {
+          get() {
+            return stylesheetText;
+          }
+        });
+        this.failedToFix = true;
+      }
     } catch (err) {
-      // cant make new dynamic stylesheets, browser likely doesn't support `.replace()`...
-      // this is appended in prep of forking rrweb
-      Object.defineProperty(target, 'cssText', {
-        get() {
-          return stylesheetText;
-        }
-      });
+      // failed to fetch
       this.failedToFix = true;
     }
   }

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

@@ -5,8 +5,10 @@ export class Aggregate extends AggregateBase {
     harvestTimeSeconds: any;
     /** Set once the recorder has fully initialized after flag checks and sampling */
     initialized: boolean;
-    /** can shut off efforts to compress the data */
-    shouldCompress: boolean;
+    /** populated with the gzipper lib async */
+    gzipper: typeof import("fflate").gzipSync | undefined;
+    /** populated with the u8 string lib async */
+    u8: typeof import("fflate").strToU8 | undefined;
     mode: any;
     /** set by BCS response */
     entitled: boolean;
@@ -23,7 +25,10 @@ export class Aggregate extends AggregateBase {
      * @returns {void}
      */
     initializeRecording(errorSample: boolean, fullSample: boolean, ignoreSession: boolean): void;
-    prepareHarvest(): {
+    prepUtils(): Promise<void>;
+    prepareHarvest({ opts }?: {
+        opts: any;
+    }): {
         qs: {
             browser_monitoring_key: any;
             type: string;

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":"AAgCA;IACE,2BAAiC;IAEjC,8DA8FC;IA5FC,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IAGxB,gDAAgD;IAChD,wBAA0B;IAG1B,UAAuD;IAEvD,0BAA0B;IAC1B,kBAAqB;IAErB,cAA8B;IAkC5B,wCAKQ;IAmBN,sBAAwB;IAqB9B,qBAWC;IAED;;;;;;;OAOG;IACH,iCALW,OAAO,cACP,OAAO,iBACP,OAAO,GACL,IAAI,CA6DhB;IAED;;;;;;;;;oBAiCC;IAED;;;;;;;;;MAmEC;IAED,qCAOC;IAED;;;;OAIG;IACH,mCAKC;IAED,yDAAyD;IACzD,yBAUC;IAED,yCAGC;CACF;8BAnV6B,4BAA4B;iCAHzB,2CAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/aggregate/index.js"],"names":[],"mappings":"AA8BA;IACE,2BAAiC;IAEjC,8DAsGC;IApGC,8GAA8G;IAC9G,wBAAgH;IAChH,iFAAiF;IACjF,qBAAwB;IAGxB,2CAA2C;IAC3C,sDAAwB;IACxB,6CAA6C;IAC7C,gDAAmB;IAGnB,UAAuD;IAEvD,0BAA0B;IAC1B,kBAAqB;IAErB,cAA8B;IAkC5B,wCAKQ;IAyBN,sBAAwB;IAqB9B,qBAWC;IAED;;;;;;;OAOG;IACH,iCALW,OAAO,cACP,OAAO,iBACP,OAAO,GACL,IAAI,CAsDhB;IAED,2BASC;IAED;;;;;;;;;;;oBAiCC;IAED;;;;;;;;;MAmEC;IAED,qCAOC;IAED;;;;OAIG;IACH,mCAKC;IAED,yDAAyD;IACzD,yBAUC;IAED,yCAGC;CACF;8BA7V6B,4BAA4B;iCAHzB,2CAA2C"}

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":"AAmFA,sDAA4D;AAhF5D;IAGE;;;QAGI;IACJ,oCAAkC;IAClC,qBAAmB;IAEnB;;;OAGG;IACH,mBAmBC;IAED;;;OAGG;IACH,oBAMC;;CAiCF"}
+{"version":3,"file":"stylesheet-evaluator.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_replay/shared/stylesheet-evaluator.js"],"names":[],"mappings":"AAwFA,sDAA4D;AArF5D;IAGE;;;QAGI;IACJ,oCAAkC;IAClC,qBAAmB;IAEnB;;;OAGG;IACH,mBAmBC;IAED;;;OAGG;IACH,oBAMC;;CAsCF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.251.0",
+  "version": "1.251.1",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",

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

@@ -102,7 +102,7 @@ export class HarvestScheduler extends SharedContext {
       if (!submitMethod) return false
 
       const retry = !opts?.unload && submitMethod === submitData.xhr
-      payload = this.opts.getPayload({ retry })
+      payload = this.opts.getPayload({ retry, opts })
 
       if (!payload) {
         if (this.started) {

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

@@ -102,7 +102,7 @@ export class Aggregate extends AggregateBase {
 
     // [Temporary] Report restores from BFCache to NR1 while feature flag is in place in lieu of sending pageshow events.
     windowAddEventListener('pageshow', (evt) => {
-      if (evt.persisted) { this.storeSupportabilityMetrics('Generic/BFCache/PageRestored') }
+      if (evt?.persisted) { this.storeSupportabilityMetrics('Generic/BFCache/PageRestored') }
     })
   }
 

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

@@ -28,8 +28,6 @@ import { MODE, SESSION_EVENTS, SESSION_EVENT_TYPES } from '../../../common/sessi
 import { stringify } from '../../../common/util/stringify'
 import { stylesheetEvaluator } from '../shared/stylesheet-evaluator'
 
-let gzipper, u8
-
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
   // pass the recorder into the aggregator
@@ -41,8 +39,10 @@ export class Aggregate extends AggregateBase {
     this.initialized = false
     /** Set once the feature has been "aborted" to prevent other side-effects from continuing */
     this.blocked = false
-    /** can shut off efforts to compress the data */
-    this.shouldCompress = true
+    /** populated with the gzipper lib async */
+    this.gzipper = undefined
+    /** populated with the u8 string lib async */
+    this.u8 = undefined
     /** the mode to start in.  Defaults to off */
     const { session } = getRuntime(this.agentIdentifier)
     this.mode = session.state.sessionReplayMode || MODE.OFF
@@ -91,6 +91,12 @@ export class Aggregate extends AggregateBase {
         raw: true
       }, this)
 
+      if (this.recorder?.getEvents().type === 'preloaded') {
+        this.prepUtils().then(() => {
+          this.scheduler.runHarvest()
+        })
+      }
+
       registerHandler('recordReplay', () => {
         // if it has aborted or BCS returned bad entitlements, do not allow
         if (this.blocked || !this.entitled) return
@@ -197,21 +203,25 @@ export class Aggregate extends AggregateBase {
       this.scheduler.startTimer(this.harvestTimeSeconds)
     }
 
+    await this.prepUtils()
+
+    if (!this.recorder.recording) this.recorder.startRecording()
+
+    this.syncWithSessionManager({ sessionReplayMode: this.mode })
+  }
+
+  async prepUtils () {
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const { gzipSync, strToU8 } = await import(/* webpackChunkName: "compressor" */'fflate')
-      gzipper = gzipSync
-      u8 = strToU8
+      this.gzipper = gzipSync
+      this.u8 = strToU8
     } catch (err) {
       // compressor failed to load, but we can still record without compression as a last ditch effort
-      this.shouldCompress = false
     }
-    if (!this.recorder.recording) this.recorder.startRecording()
-
-    this.syncWithSessionManager({ sessionReplayMode: this.mode })
   }
 
-  prepareHarvest () {
+  prepareHarvest ({ opts } = {}) {
     if (!this.recorder) return
     const recorderEvents = this.recorder.getEvents()
     // get the event type and use that to trigger another harvest if needed
@@ -224,8 +234,8 @@ export class Aggregate extends AggregateBase {
     }
 
     let len = 0
-    if (this.shouldCompress) {
-      payload.body = gzipper(u8(`[${payload.body.map(e => e.__serialized).join(',')}]`))
+    if (!!this.gzipper && !!this.u8) {
+      payload.body = this.gzipper(this.u8(`[${payload.body.map(e => e.__serialized).join(',')}]`))
       len = payload.body.length
       this.scheduler.opts.gzip = true
     } else {
@@ -242,7 +252,7 @@ export class Aggregate extends AggregateBase {
     const { session } = getRuntime(this.agentIdentifier)
     if (!session.state.sessionReplaySentFirstChunk) this.syncWithSessionManager({ sessionReplaySentFirstChunk: true })
     this.recorder.clearBuffer()
-    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest()
+    if (recorderEvents.type === 'preloaded') this.scheduler.runHarvest(opts)
     return [payload]
   }
 
@@ -276,7 +286,7 @@ export class Aggregate extends AggregateBase {
 
     const firstEventTimestamp = events[0]?.timestamp // from rrweb node
     const lastEventTimestamp = events[events.length - 1]?.timestamp // from rrweb node
-    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp
+    const firstTimestamp = firstEventTimestamp || recorderEvents.cycleTimestamp // from rrweb node || from when the harvest cycle started
     const lastTimestamp = lastEventTimestamp || agentOffset + relativeNow
 
     return {
@@ -288,7 +298,7 @@ export class Aggregate extends AggregateBase {
         attributes: encodeObj({
           // this section of attributes must be controllable and stay below the query param padding limit -- see QUERY_PARAM_PADDING
           // if not, data could be lost to truncation at time of sending, potentially breaking parsing / API behavior in NR1
-          ...(this.shouldCompress && { content_encoding: 'gzip' }),
+          ...(!!this.gzipper && !!this.u8 && { content_encoding: 'gzip' }),
           'replay.firstTimestamp': firstTimestamp,
           'replay.firstTimestampOffset': firstTimestamp - agentOffset,
           'replay.lastTimestamp': lastTimestamp,

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

@@ -184,7 +184,7 @@ export class Recorder {
    * https://staging.onenr.io/037jbJWxbjy
    * */
   estimateCompression (data) {
-    if (this.shouldCompress) return data * AVG_COMPRESSION
+    if (!!this.parent.gzipper && !!this.parent.u8) return data * AVG_COMPRESSION
     return data
   }
 }

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

@@ -55,27 +55,32 @@ class StylesheetEvaluator {
  * @returns {Promise}
  */
   async #fetchAndOverride (target, href) {
-    const stylesheetContents = await originals.FETCH.bind(window)(href)
-    if (!stylesheetContents.ok) {
-      this.failedToFix = true
-      return
-    }
-    const stylesheetText = await stylesheetContents.text()
     try {
-      const cssSheet = new CSSStyleSheet()
-      await cssSheet.replace(stylesheetText)
-      Object.defineProperty(target, 'cssRules', {
-        get () { return cssSheet.cssRules }
-      })
-      Object.defineProperty(target, 'rules', {
-        get () { return cssSheet.rules }
-      })
-    } catch (err) {
+      const stylesheetContents = await originals.FETCH.bind(window)(href)
+      if (!stylesheetContents.ok) {
+        this.failedToFix = true
+        return
+      }
+      const stylesheetText = await stylesheetContents.text()
+      try {
+        const cssSheet = new CSSStyleSheet()
+        await cssSheet.replace(stylesheetText)
+        Object.defineProperty(target, 'cssRules', {
+          get () { return cssSheet.cssRules }
+        })
+        Object.defineProperty(target, 'rules', {
+          get () { return cssSheet.rules }
+        })
+      } catch (err) {
       // cant make new dynamic stylesheets, browser likely doesn't support `.replace()`...
       // this is appended in prep of forking rrweb
-      Object.defineProperty(target, 'cssText', {
-        get () { return stylesheetText }
-      })
+        Object.defineProperty(target, 'cssText', {
+          get () { return stylesheetText }
+        })
+        this.failedToFix = true
+      }
+    } catch (err) {
+    // failed to fetch
       this.failedToFix = true
     }
   }