@newrelic/browser-agent 1.234.0 → 1.236.0

package/dist/esm/features/metrics/aggregate/framework-detection.js

@@ -1,4 +1,4 @@
-import { isBrowserScope } from '../../../common/util/global-scope';
+import { isBrowserScope } from '../../../common/constants/runtime';
 const FRAMEWORKS = {
   REACT: 'React',
   ANGULAR: 'Angular',

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

@@ -10,7 +10,7 @@ import { getRules, validateRules } from '../../../common/util/obfuscate';
 import { VERSION } from "../../../common/constants/env.npm";
 import { onDOMContentLoaded } from '../../../common/window/load';
 import { windowAddEventListener } from '../../../common/event-listener/event-listener-opts';
-import { isBrowserScope } from '../../../common/util/global-scope';
+import { isBrowserScope } from '../../../common/constants/runtime';
 import { AggregateBase } from '../../utils/aggregate-base';
 import { stringify } from '../../../common/util/stringify';
 import { endpointMap } from './endpoint-map';

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

@@ -11,7 +11,7 @@ import { cleanURL } from '../../../common/url/clean-url';
 import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config';
 import { FEATURE_NAME } from '../constants';
 import { drain } from '../../../common/drain/drain';
-import { isBrowserScope } from '../../../common/util/global-scope';
+import { isBrowserScope } from '../../../common/constants/runtime';
 import { AggregateBase } from '../../utils/aggregate-base';
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME;

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

@@ -1,6 +1,6 @@
 import { handle } from '../../../common/event-emitter/handle';
 import { FEATURE_NAMES } from '../../../loaders/features/features';
-import { isiOS } from '../../../common/browser-version/ios-version';
+import { isiOS, globalScope, isBrowserScope } from '../../../common/constants/runtime';
 import { onTTFB } from 'web-vitals';
 import { addPT, addPN } from '../../../common/timing/nav-timing';
 import { stringify } from '../../../common/util/stringify';
@@ -9,7 +9,6 @@ import { getConfigurationValue, getInfo, getRuntime } from '../../../common/conf
 import { Harvest } from '../../../common/harvest/harvest';
 import * as CONSTANTS from '../constants';
 import { getActivatedFeaturesFlags } from './initialized-features';
-import { globalScope, isBrowserScope } from '../../../common/util/global-scope';
 import { drain } from '../../../common/drain/drain';
 import { activateFeatures } from '../../../common/util/feature-flags';
 import { warn } from '../../../common/util/console';

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

@@ -1,5 +1,5 @@
 import { handle } from '../../../common/event-emitter/handle';
-import { isiOS } from '../../../common/browser-version/ios-version';
+import { isiOS } from '../../../common/constants/runtime';
 import { InstrumentBase } from '../../utils/instrument-base';
 import * as CONSTANTS from '../constants';
 import { FEATURE_NAMES } from '../../../loaders/features/features';

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

@@ -6,7 +6,7 @@
 import { onFCP, onFID, onLCP, onCLS, onINP } from 'web-vitals';
 import { onFirstPaint } from '../first-paint';
 import { onLongTask } from '../long-tasks';
-import { iOS_below16 } from '../../../common/browser-version/ios-version';
+import { iOS_below16 } from '../../../common/constants/runtime';
 import { nullable, numeric, getAddStringContext, addCustomAttributes } from '../../../common/serialize/bel-serializer';
 import { mapOwn } from '../../../common/util/map-own';
 import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler';
@@ -232,9 +232,7 @@ export class Aggregate extends AggregateBase {
   }
   onHarvestFinished(result) {
     if (result.retry && this.timingsSent.length > 0) {
-      for (var i = 0; i < this.timingsSent.length; i++) {
-        this.timings.push(this.timingsSent[i]);
-      }
+      this.timings.unshift(...this.timingsSent);
       this.timingsSent = [];
     }
   }

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

@@ -9,7 +9,7 @@ import { windowAddEventListener } from '../../../common/event-listener/event-lis
 import { now } from '../../../common/timing/now';
 import { InstrumentBase } from '../../utils/instrument-base';
 import { FEATURE_NAME } from '../constants';
-import { isBrowserScope } from '../../../common/util/global-scope';
+import { isBrowserScope } from '../../../common/constants/runtime';
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME;
   constructor(agentIdentifier, aggregator) {

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

@@ -16,42 +16,41 @@ import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler';
 import { FEATURE_NAME } from '../constants';
 import { stringify } from '../../../common/util/stringify';
 import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config';
-import { SESSION_EVENTS } from '../../../common/session/session-entity';
+import { SESSION_EVENTS, MODE } from '../../../common/session/session-entity';
 import { AggregateBase } from '../../utils/aggregate-base';
+import { sharedChannel } from '../../../common/constants/shared-channel';
 
 // would be better to get this dynamically in some way
 export const RRWEB_VERSION = '2.0.0-alpha.8';
+export const AVG_COMPRESSION = 0.12;
 let recorder, gzipper, u8;
 
-/** The "mode" with which the session replay is recording */
-const MODE = {
-  OFF: 0,
-  FULL: 1,
-  ERROR: 2
-};
 /** Vortex caps payload sizes at 1MB */
-const MAX_PAYLOAD_SIZE = 1000000;
+export const MAX_PAYLOAD_SIZE = 1000000;
 /** Unloading caps around 64kb */
-const IDEAL_PAYLOAD_SIZE = 64000;
+export const IDEAL_PAYLOAD_SIZE = 64000;
 /** Interval between forcing new full snapshots in "error" mode */
 const CHECKOUT_MS = 30000;
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME;
   constructor(agentIdentifier, aggregator) {
     super(agentIdentifier, aggregator, FEATURE_NAME);
-
     /** Each page mutation or event will be stored (raw) in this array. This array will be cleared on each harvest */
     this.events = [];
     /** The interval to harvest at.  This gets overridden if the size of the payload exceeds certain thresholds */
     this.harvestTimeSeconds = getConfigurationValue(this.agentIdentifier, 'session_replay.harvestTimeSeconds') || 60;
     /** Set once the recorder has fully initialized after flag checks and sampling */
     this.initialized = false;
-    /** Set once an error has been detected on the page. */
+    /** Set once an error has been detected on the page. Never unset */
     this.errorNoticed = false;
     /** The "mode" to record in.  Defaults to "OFF" until flags and sampling are checked. See "MODE" constant. */
     this.mode = MODE.OFF;
     /** Set once the feature has been "aborted" to prevent other side-effects from continuing */
     this.blocked = false;
+    /** True when actively recording, false when paused or stopped */
+    this.recording = false;
+    /** can shut off efforts to compress the data */
+    this.shouldCompress = true;
 
     /** Payload metadata -- Should indicate that the payload being sent is the first of a session */
     this.isFirstChunk = false;
@@ -65,62 +64,61 @@ export class Aggregate extends AggregateBase {
 
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     this.payloadBytesEstimation = 0;
+    const shouldSetup = getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true && getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true;
 
     /** The method to stop recording. This defaults to a noop, but is overwritten once the recording library is imported and initialized */
     this.stopRecording = () => {/* no-op until set by rrweb initializer */};
+    if (shouldSetup) {
+      // The SessionEntity class can emit a message indicating the session was cleared and reset (expiry, inactivity). This feature must abort and never resume if that occurs.
+      this.ee.on(SESSION_EVENTS.RESET, () => {
+        this.abort();
+      });
 
-    // The SessionEntity class can emit a message indicating the session was cleared and reset (expiry, inactivity). This feature must abort and never resume if that occurs.
-    this.ee.on('session-reset', () => {
-      this.abort();
-    });
-
-    // The SessionEntity class can emit a message indicating the session was paused (visibility change). This feature must stop recording if that occurs.
-    this.ee.on(SESSION_EVENTS.PAUSE, () => {
-      this.stopRecording();
-    });
-    // The SessionEntity class can emit a message indicating the session was resumed (visibility change). This feature must start running again (if already running) if that occurs.
-    this.ee.on(SESSION_EVENTS.RESUME, () => {
-      if (!this.initialized || this.mode === MODE.OFF) return;
-      this.startRecording();
-      this.takeFullSnapshot();
-    });
+      // The SessionEntity class can emit a message indicating the session was paused (visibility change). This feature must stop recording if that occurs.
+      this.ee.on(SESSION_EVENTS.PAUSE, () => {
+        this.stopRecording();
+      });
+      // The SessionEntity class can emit a message indicating the session was resumed (visibility change). This feature must start running again (if already running) if that occurs.
+      this.ee.on(SESSION_EVENTS.RESUME, () => {
+        if (!this.initialized || this.mode === MODE.OFF) return;
+        this.startRecording();
+      });
 
-    // Bespoke logic for new endpoint.  This will change as downstream dependencies become solidified.
-    this.scheduler = new HarvestScheduler('blob', {
-      onFinished: this.onHarvestFinished.bind(this),
-      retryDelay: this.harvestTimeSeconds,
-      getPayload: this.prepareHarvest.bind(this),
-      raw: true
-    }, this);
+      // Bespoke logic for new endpoint.  This will change as downstream dependencies become solidified.
+      this.scheduler = new HarvestScheduler('blob', {
+        onFinished: this.onHarvestFinished.bind(this),
+        retryDelay: this.harvestTimeSeconds,
+        getPayload: this.prepareHarvest.bind(this),
+        raw: true
+      }, this);
 
-    // Wait for an error to be reported.  This currently is wrapped around the "Error" feature.  This is a feature-feature dependency.
-    // This was to ensure that all errors, including those on the page before load and those handled with "noticeError" are accounted for. Needs evalulation
-    registerHandler('errorAgg', e => {
-      this.hasError = true;
-      // run once
-      if (this.mode === MODE.ERROR) {
-        this.mode = MODE.FULL;
-        // if the error was noticed AFTER the recorder was already imported....
-        if (recorder && this.initialized) {
-          this.stopRecording();
-          this.startRecording();
-          this.scheduler.startTimer(this.harvestTimeSeconds);
-          const {
-            session
-          } = getRuntime(this.agentIdentifier);
-          session.state.sessionReplay = this.mode;
+      // Wait for an error to be reported.  This currently is wrapped around the "Error" feature.  This is a feature-feature dependency.
+      // This was to ensure that all errors, including those on the page before load and those handled with "noticeError" are accounted for. Needs evalulation
+      registerHandler('errorAgg', e => {
+        this.hasError = true;
+        this.errorNoticed = true;
+        // run once
+        if (this.mode === MODE.ERROR) {
+          this.mode = MODE.FULL;
+          // if the error was noticed AFTER the recorder was already imported....
+          if (recorder && this.initialized) {
+            this.stopRecording();
+            this.startRecording();
+            this.scheduler.startTimer(this.harvestTimeSeconds);
+            const {
+              session
+            } = getRuntime(this.agentIdentifier);
+            session.state.sessionReplay = this.mode;
+          }
         }
-      }
-    }, this.featureName, this.ee);
+      }, this.featureName, this.ee);
+      this.waitForFlags(['sr']).then(_ref => {
+        let [flagOn] = _ref;
+        return this.initializeRecording(flagOn, Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.errorSampleRate'), Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.sampleRate'));
+      }).then(() => sharedChannel.onReplayReady(this.mode)); // notify watchers that replay started with the mode
 
-    // new handler for waiting for multiple flags.  will be useful if/when backend designs multiple flags, or for evaluating multiple feature flags simultaneously (stn vs sr)
-    this.waitForFlags(['sr']).then(_ref => {
-      let [{
-        value
-      }] = _ref;
-      this.initializeRecording(value, Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.errorSampleRate'), Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.sampleRate'));
-    });
-    drain(this.agentIdentifier, this.featureName);
+      drain(this.agentIdentifier, this.featureName);
+    }
   }
 
   /**
@@ -153,6 +151,11 @@ export class Aggregate extends AggregateBase {
       else return;
     }
 
+    // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
+    if (this.mode === MODE.ERROR && this.errorNoticed) {
+      this.mode = MODE.FULL;
+    }
+
     // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
     // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
     // If an error happened in ERROR mode before we've gotten to this stage, it will have already set the mode to FULL
@@ -160,33 +163,35 @@ export class Aggregate extends AggregateBase {
       // We only report (harvest) in FULL mode
       this.scheduler.startTimer(this.harvestTimeSeconds);
     }
-
-    // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
-    if (this.mode === MODE.ERROR && this.errorNoticed) {
-      this.mode = MODE.FULL;
+    try {
+      recorder = (await import( /* webpackChunkName: "recorder" */'rrweb')).record;
+    } catch (err) {
+      return this.abort();
+    }
+    try {
+      const {
+        gzipSync,
+        strToU8
+      } = await import( /* webpackChunkName: "compressor" */'fflate');
+      gzipper = gzipSync;
+      u8 = strToU8;
+    } catch (err) {
+      // compressor failed to load, but we can still record without compression as a last ditch effort
+      this.shouldCompress = false;
     }
-    // We record in FULL or ERROR mode
-
-    recorder = (await import( /* webpackChunkName: "recorder" */'rrweb')).record;
     this.startRecording();
-    const {
-      gzipSync,
-      strToU8
-    } = await import( /* webpackChunkName: "compressor" */'fflate');
-    gzipper = gzipSync;
-    u8 = strToU8;
     this.isFirstChunk = !!session.isNew;
     session.state.sessionReplay = this.mode;
   }
-  prepareHarvest(options) {
+  prepareHarvest() {
     if (this.events.length === 0) return;
     const payload = this.getHarvestContents();
-    try {
+    if (this.shouldCompress) {
       payload.body = gzipper(u8(stringify(payload.body)));
       this.scheduler.opts.gzip = true;
-    } catch (err) {
-      // failed to gzip
+    } else {
       this.scheduler.opts.gzip = false;
+      delete payload.qs.content_encoding;
     }
     // TODO -- Gracefully handle the buffer for retries.
     this.clearBuffer();
@@ -253,7 +258,7 @@ export class Aggregate extends AggregateBase {
     this.hasSnapshot = true;
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
-    this.stopRecording = recorder({
+    const stop = recorder({
       emit: this.store.bind(this),
       blockClass,
       ignoreClass,
@@ -266,6 +271,11 @@ export class Aggregate extends AggregateBase {
         checkoutEveryNms: CHECKOUT_MS
       })
     });
+    this.recording = true;
+    this.stopRecording = () => {
+      this.recording = false;
+      stop();
+    };
   }
 
   /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
@@ -276,6 +286,7 @@ export class Aggregate extends AggregateBase {
     const payloadSize = this.getPayloadSize(eventBytes);
     // Vortex will block payloads at a certain size, we might as well not send.
     if (payloadSize > MAX_PAYLOAD_SIZE) {
+      this.clearBuffer();
       return this.abort();
     }
     // Checkout events are flags by the recording lib that indicate a fullsnapshot was taken every n ms. These are important
@@ -313,7 +324,9 @@ export class Aggregate extends AggregateBase {
   /** Abort the feature, once aborted it will not resume */
   abort() {
     this.blocked = true;
+    this.mode = MODE.OFF;
     this.stopRecording();
+    this.ee.emit('REPLAY_ABORTED');
     const {
       session
     } = getRuntime(this.agentIdentifier);
@@ -325,6 +338,7 @@ export class Aggregate extends AggregateBase {
    * https://staging.onenr.io/037jbJWxbjy
    * */
   estimateCompression(data) {
-    return data * 0.12;
+    if (this.shouldCompress) return data * AVG_COMPRESSION;
+    return data;
   }
 }

package/dist/esm/features/session_replay/replay-mode.js

@@ -0,0 +1,23 @@
+import { getConfigurationValue } from '../../common/config/config';
+import { MODE } from '../../common/session/session-entity';
+import { gosNREUM } from '../../common/window/nreum';
+import { sharedChannel } from '../../common/constants/shared-channel';
+
+/**
+ * Figure out if the Replay feature is running (what mode it's in).
+ * IMPORTANT: Session tracking is assumed to be ON; if applicable, check init's privacy.cookies_enabled setting before using this fn!
+ * CRITICAL: This fn must be called prior to ALL features aggregate draining. If not, it will never resolve.
+ * @param {String} agentId
+ * @returns Promise that resolves to one of the values in MODE enum
+ */
+export async function getSessionReplayMode(agentId) {
+  try {
+    const newrelic = gosNREUM();
+    // Should be enabled by configuration and using an agent build that includes it (via checking that the instrument class was initialized).
+    if (getConfigurationValue(agentId, 'session_replay.enabled') && typeof newrelic.initializedAgents[agentId].features.session_replay === 'object') {
+      const srInitialized = await newrelic.initializedAgents[agentId].features.session_replay.onAggregateImported;
+      if (srInitialized) return await sharedChannel.sessionReplayInitialized; // wait for replay to determine which mode it's after running its sampling logic
+    }
+  } catch (e) {/* exception ==> off */}
+  return MODE.OFF; // at any step of the way s.t. SR cannot be on by implication or is explicitly off
+}