@newrelic/browser-agent 1.251.0 → 1.252.0

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
@@ -53,6 +53,8 @@ export class Aggregate extends AggregateBase {
     this.recorder = args?.recorder
     if (this.recorder) this.recorder.parent = this
 
+    handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/Enabled'], undefined, FEATURE_NAMES.metrics, this.ee)
+
     const shouldSetup = (
       getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true &&
       getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true
@@ -91,6 +93,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
@@ -116,15 +124,31 @@ export class Aggregate extends AggregateBase {
         }
       }, 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')
+
       this.waitForFlags(['sr']).then(([flagOn]) => {
         this.entitled = flagOn
-        if (!this.entitled && this.recorder?.recording) this.recorder.abort(ABORT_REASONS.ENTITLEMENTS)
+        if (!this.entitled && this.recorder?.recording) {
+          this.recorder.abort(ABORT_REASONS.ENTITLEMENTS)
+          handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/EnabledNotEntitled/Detected'], undefined, FEATURE_NAMES.metrics, this.ee)
+        }
         this.initializeRecording(
-          (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.error_sampling_rate'),
-          (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.sampling_rate')
+          (Math.random() * 100) < error_sampling_rate,
+          (Math.random() * 100) < sampling_rate
         )
       }).then(() => sharedChannel.onReplayReady(this.mode)) // notify watchers that replay started with the mode
 
+      /** Detect if the default configs have been altered and report a SM.  This is useful to evaluate what the reasonable defaults are across a customer base over time */
+      if (!autoStart) handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/AutoStart/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+      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)
+      if (mask_text_selector !== '*') handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/MaskTextSelector/Modified'], undefined, FEATURE_NAMES.metrics, this.ee)
+
+      handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/SamplingRate/Value', sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
+      handle(SUPPORTABILITY_METRIC_CHANNEL, ['Config/SessionReplay/ErrorSamplingRate/Value', error_sampling_rate], undefined, FEATURE_NAMES.metrics, this.ee)
       this.drain()
     }
   }
@@ -197,21 +221,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 +252,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 +270,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 +304,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 +316,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

@@ -102,13 +102,13 @@ export class Recorder {
     /** 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) {
-      handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee)
       /** wait for the evaluator to download/replace the incompletes' src code and then take a new snap */
       stylesheetEvaluator.fix().then((failedToFix) => {
         if (failedToFix) {
           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)
+        } else handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee)
         this.takeFullSnapshot()
       })
       /** Only start ignoring data if got a faulty snapshot */
@@ -166,7 +166,12 @@ export class Recorder {
 
   /** force the recording lib to take a full DOM snapshot.  This needs to occur in certain cases, like visibility changes */
   takeFullSnapshot () {
-    recorder.takeFullSnapshot()
+    try {
+      if (!this.recording) return
+      recorder.takeFullSnapshot()
+    } catch (err) {
+      // in the off chance we think we are recording, but rrweb does not, rrweb's lib will throw an error.  This catch is just a precaution
+    }
   }
 
   clearTimestamps () {
@@ -184,7 +189,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

@@ -9,7 +9,7 @@ class StylesheetEvaluator {
   * Used at harvest time to denote that all subsequent payloads are subject to this and customers should be advised to handle crossorigin decoration
   * */
   invalidStylesheetsDetected = false
-  failedToFix = false
+  failedToFix = 0
 
   /**
    * this works by checking (only ever once) each cssRules obj in the style sheets array. The try/catch will catch an error if the cssRules obj blocks access, triggering the module to try to "fix" the asset`. Returns the count of incomplete assets discovered.
@@ -44,7 +44,7 @@ class StylesheetEvaluator {
     await Promise.all(this.#fetchProms)
     this.#fetchProms = []
     const failedToFix = this.failedToFix
-    this.failedToFix = false
+    this.failedToFix = 0
     return failedToFix
   }
 
@@ -55,28 +55,33 @@ 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++
+        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
+        Object.defineProperty(target, 'cssText', {
+          get () { return stylesheetText }
+        })
+        this.failedToFix++
+      }
+    } catch (err) {
+    // failed to fetch
+      this.failedToFix++
     }
   }
 }

package/src/features/utils/instrument-base.js

@@ -108,7 +108,7 @@ export class InstrumentBase extends FeatureBase {
         warn(`Downloading and initializing ${this.featureName} failed...`, e)
         this.abortHandler?.() // undo any important alterations made to the page
         // not supported yet but nice to do: "abort" this agent's EE for this feature specifically
-        drain(this.agentIdentifier, this.featureName)
+        drain(this.agentIdentifier, this.featureName, true)
         loadedSuccessfully(false)
       }
     }

package/src/loaders/api/api.js

@@ -207,7 +207,10 @@ export function setAPI (agentIdentifier, forceDrain) {
     import(/* webpackChunkName: "async-api" */'./apiAsync').then(({ setAPI }) => {
       setAPI(agentIdentifier)
       drain(agentIdentifier, 'api')
-    }).catch(() => warn('Downloading runtime APIs failed...'))
+    }).catch(() => {
+      warn('Downloading runtime APIs failed...')
+      drain(agentIdentifier, 'api', true)
+    })
   }
 
   return apiInterface