@newrelic/browser-agent 1.240.0 → 1.242.0

package/src/cdn/polyfills/spa.js

@@ -4,4 +4,27 @@
  */
 
 import '../polyfills.js'
-import '../spa'
+import { Agent } from '../../loaders/agent'
+
+import { Instrument as InstrumentPageViewEvent } from '../../features/page_view_event/instrument'
+import { Instrument as InstrumentPageViewTiming } from '../../features/page_view_timing/instrument'
+import { Instrument as InstrumentMetrics } from '../../features/metrics/instrument'
+import { Instrument as InstrumentErrors } from '../../features/jserrors/instrument'
+import { Instrument as InstrumentXhr } from '../../features/ajax/instrument'
+import { Instrument as InstrumentSessionTrace } from '../../features/session_trace/instrument'
+import { Instrument as InstrumentSpa } from '../../features/spa/instrument'
+import { Instrument as InstrumentPageAction } from '../../features/page_action/instrument'
+
+new Agent({
+  features: [
+    InstrumentXhr,
+    InstrumentPageViewEvent,
+    InstrumentPageViewTiming,
+    InstrumentSessionTrace,
+    InstrumentMetrics,
+    InstrumentPageAction,
+    InstrumentErrors,
+    InstrumentSpa
+  ],
+  loaderType: 'spa-polyfills'
+})

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

@@ -1,11 +1,32 @@
+import { isValidSelector } from '../../dom/query-selector'
 import { DEFAULT_EXPIRES_MS, DEFAULT_INACTIVE_MS } from '../../session/constants'
+import { warn } from '../../util/console'
 import { gosNREUMInitializedAgents } from '../../window/nreum'
 import { getModeledObject } from './configurable'
 
 const model = () => {
   const hiddenState = {
-    blockSelector: '[data-nr-block]',
-    maskInputOptions: { password: true }
+    mask_selector: '*',
+    block_selector: '[data-nr-block]',
+    mask_input_options: {
+      color: false,
+      date: false,
+      'datetime-local': false,
+      email: false,
+      month: false,
+      number: false,
+      range: false,
+      search: false,
+      tel: false,
+      text: false,
+      time: false,
+      url: false,
+      week: false,
+      // unify textarea and select element with text input
+      textarea: false,
+      select: false,
+      password: true // This will be enforced to always be true in the setter
+    }
   }
   return {
     proxy: {
@@ -40,29 +61,37 @@ const model = () => {
       autoStart: true,
       enabled: false,
       harvestTimeSeconds: 60,
-      sampleRate: 0.1,
-      errorSampleRate: 0.1,
+      sampling_rate: 50, // float from 0 - 100
+      error_sampling_rate: 50, // float from 0 - 100
       // recording config settings
-      maskTextSelector: '*',
-      maskAllInputs: true,
+      mask_all_inputs: true,
+      // this has a getter/setter to facilitate validation of the selectors
+      get mask_text_selector () { return hiddenState.mask_selector },
+      set mask_text_selector (val) {
+        if (isValidSelector(val)) hiddenState.mask_selector = val + ',[data-nr-mask]'
+        else if (val === null) hiddenState.mask_selector = val // null is acceptable, which completely disables the behavior
+        else warn('An invalid session_replay.mask_selector was provided and will not be used', val)
+      },
       // these properties only have getters because they are enforcable constants and should error if someone tries to override them
-      get blockClass () { return 'nr-block' },
-      get ignoreClass () { return 'nr-ignore' },
-      get maskTextClass () { return 'nr-mask' },
+      get block_class () { return 'nr-block' },
+      get ignore_class () { return 'nr-ignore' },
+      get mask_text_class () { return 'nr-mask' },
       // props with a getter and setter are used to extend enforcable constants with customer input
       // we must preserve data-nr-block no matter what else the customer sets
-      get blockSelector () {
-        return hiddenState.blockSelector
+      get block_selector () {
+        return hiddenState.block_selector
       },
-      set blockSelector (val) {
-        hiddenState.blockSelector += `,${val}`
+      set block_selector (val) {
+        if (isValidSelector(val)) hiddenState.block_selector += `,${val}`
+        else if (val !== '') warn('An invalid session_replay.block_selector was provided and will not be used', val)
       },
       // password: must always be present and true no matter what customer sets
-      get maskInputOptions () {
-        return hiddenState.maskInputOptions
+      get mask_input_options () {
+        return hiddenState.mask_input_options
       },
-      set maskInputOptions (val) {
-        hiddenState.maskInputOptions = { ...val, password: true }
+      set mask_input_options (val) {
+        if (val && typeof val === 'object') hiddenState.mask_input_options = { ...val, password: true }
+        else warn('An invalid session_replay.mask_input_option was provided and will not be used', val)
       }
     },
     spa: { enabled: true, harvestTimeSeconds: 10, autoStart: true }

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

@@ -26,3 +26,43 @@ test('getConfigurationValue parses path correctly', () => {
   expect(getConfigurationValue('ab', 'page_action')).toEqual({ enabled: true, harvestTimeSeconds: 1000, autoStart: true })
   expect(getConfigurationValue('ab', 'page_action.harvestTimeSeconds')).toEqual(1000)
 })
+
+describe('property getters/setters used for validation', () => {
+  test('invalid values do not pass through', () => {
+    setConfiguration('12345', {
+      session_replay: {
+        block_selector: '[invalid selector]',
+        mask_text_selector: '[invalid selector]',
+        mask_input_options: 'select:true'
+      }
+    })
+
+    expect(getConfigurationValue('12345', 'session_replay.block_selector')).toEqual('[data-nr-block]')
+    expect(getConfigurationValue('12345', 'session_replay.mask_text_selector')).toEqual('*')
+    expect(getConfigurationValue('12345', 'session_replay.mask_input_options')).toMatchObject({ password: true, select: false })
+  })
+
+  test('valid values do pass through', () => {
+    setConfiguration('23456', {
+      session_replay: {
+        block_selector: '[block-text-test]',
+        mask_text_selector: '[mask-text-test]',
+        mask_input_options: { select: true }
+      }
+    })
+
+    expect(getConfigurationValue('23456', 'session_replay.block_selector')).toEqual('[data-nr-block],[block-text-test]')
+    expect(getConfigurationValue('23456', 'session_replay.mask_text_selector')).toEqual('[mask-text-test],[data-nr-mask]')
+    expect(getConfigurationValue('23456', 'session_replay.mask_input_options')).toMatchObject({ password: true, select: true })
+  })
+
+  test('null accepted for mask_text', () => {
+    setConfiguration('34567', {
+      session_replay: {
+        mask_text_selector: null
+      }
+    })
+
+    expect(getConfigurationValue('34567', 'session_replay.mask_text_selector')).toEqual(null)
+  })
+})

package/src/common/dom/query-selector.js

@@ -0,0 +1,9 @@
+export const isValidSelector = (selector) => {
+  if (!selector || typeof selector !== 'string') return false
+  try {
+    document.createDocumentFragment().querySelector(selector)
+  } catch {
+    return false
+  }
+  return true
+}

package/src/common/dom/query-selector.test.js

@@ -0,0 +1,24 @@
+import { isValidSelector } from './query-selector'
+describe('query selector tests', () => {
+  test('handles nullish values', () => {
+    expect(isValidSelector(null)).toEqual(false)
+    expect(isValidSelector('')).toEqual(false)
+    expect(isValidSelector(0)).toEqual(false)
+    expect(isValidSelector(false)).toEqual(false)
+  })
+
+  test('handles truthy but invalid values', () => {
+    expect(isValidSelector({ test: 1 })).toEqual(false)
+    expect(isValidSelector([1, 2, 3])).toEqual(false)
+    expect(isValidSelector(1)).toEqual(false)
+    expect(isValidSelector(',')).toEqual(false)
+    expect(isValidSelector('[invalid space]')).toEqual(false)
+  })
+
+  test('handles valid selectors', () => {
+    expect(isValidSelector('#id')).toEqual(true)
+    expect(isValidSelector('.class')).toEqual(true)
+    expect(isValidSelector('.multiple,#selectors')).toEqual(true)
+    expect(isValidSelector('[attr-selector]')).toEqual(true)
+  })
+})

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,9 @@ import { AggregateBase } from '../../utils/aggregate-base'
 import { sharedChannel } from '../../../common/constants/shared-channel'
 import { obj as encodeObj } from '../../../common/url/encode'
 import { warn } from '../../../common/util/console'
+import { globalScope } from '../../../common/constants/runtime'
+import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
+import { FEATURE_NAMES } from '../../../loaders/features/features'
 
 // would be better to get this dynamically in some way
 export const RRWEB_VERSION = '2.0.0-alpha.8'
@@ -63,15 +66,22 @@ export class Aggregate extends AggregateBase {
      * -- When visibility changes from "hidden" -> "visible", it must capture a full snapshot for the replay to work correctly across tabs
     */
     this.hasSnapshot = false
+    /** Payload metadata -- Should indicate that the payload being sent has a meta node. The meta node should always precede a snapshot node. */
+    this.hasMeta = false
     /** Payload metadata -- Should indicate that the payload being sent contains an error.  Used for query/filter purposes in UI */
     this.hasError = false
 
-    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs. */
-    this.timestamp = { first: undefined, last: undefined }
+    /** Payload metadata -- Should indicate when a replay blob started recording.  Resets each time a harvest occurs.
+     * cycle timestamps are used as fallbacks if event timestamps cannot be used
+     */
+    this.timestamp = { event: { first: undefined, last: undefined }, cycle: { first: undefined, last: undefined } }
 
     /** A value which increments with every new mutation node reported. Resets after a harvest is sent */
     this.payloadBytesEstimation = 0
 
+    /** Hold on to the last meta node, so that it can be re-inserted if the meta and snapshot nodes are broken up due to harvesting */
+    this.lastMeta = undefined
+
     const shouldSetup = (
       getConfigurationValue(agentIdentifier, 'privacy.cookies_enabled') === true &&
       getConfigurationValue(agentIdentifier, 'session_trace.enabled') === true
@@ -83,7 +93,7 @@ export class Aggregate extends AggregateBase {
     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()
+        this.abort('Session Reset')
       })
 
       // The SessionEntity class can emit a message indicating the session was paused (visibility change). This feature must stop recording if that occurs.
@@ -123,8 +133,8 @@ export class Aggregate extends AggregateBase {
 
       this.waitForFlags(['sr']).then(([flagOn]) => this.initializeRecording(
         flagOn,
-        Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.errorSampleRate'),
-        Math.random() < getConfigurationValue(this.agentIdentifier, 'session_replay.sampleRate')
+        (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.error_sampling_rate'),
+        (Math.random() * 100) < getConfigurationValue(this.agentIdentifier, 'session_replay.sampling_rate')
       )).then(() => sharedChannel.onReplayReady(this.mode)) // notify watchers that replay started with the mode
 
       this.drain()
@@ -164,6 +174,13 @@ export class Aggregate extends AggregateBase {
       this.mode = MODE.FULL
     }
 
+    try {
+      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
+      recorder = (await import(/* webpackChunkName: "recorder" */'rrweb')).record
+    } catch (err) {
+      return this.abort('Recorder failed to import')
+    }
+
     // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
     // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
     // If an error happened in ERROR mode before we've gotten to this stage, it will have already set the mode to FULL
@@ -172,13 +189,6 @@ export class Aggregate extends AggregateBase {
       this.scheduler.startTimer(this.harvestTimeSeconds)
     }
 
-    try {
-      // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
-      recorder = (await import(/* webpackChunkName: "recorder" */'rrweb')).record
-    } catch (err) {
-      return this.abort()
-    }
-
     try {
       // Do not change the webpackChunkName or it will break the webpack nrba-chunking plugin
       const { gzipSync, strToU8 } = await import(/* webpackChunkName: "compressor" */'fflate')
@@ -213,6 +223,8 @@ export class Aggregate extends AggregateBase {
   getHarvestContents () {
     const agentRuntime = getRuntime(this.agentIdentifier)
     const info = getInfo(this.agentIdentifier)
+    const firstTimestamp = this.timestamp.event.first || this.timestamp.cycle.first
+    const lastTimestamp = this.timestamp.event.last || this.timestamp.cycle.last
     return {
       qs: {
         browser_monitoring_key: info.licenseKey,
@@ -221,11 +233,12 @@ export class Aggregate extends AggregateBase {
         protocol_version: '0',
         attributes: encodeObj({
           ...(this.shouldCompress && { content_encoding: 'gzip' }),
-          'replay.firstTimestamp': this.timestamp.first,
-          'replay.lastTimestamp': this.timestamp.last,
-          'replay.durationMs': this.timestamp.last - this.timestamp.first,
+          'replay.firstTimestamp': firstTimestamp,
+          'replay.lastTimestamp': lastTimestamp,
+          'replay.durationMs': lastTimestamp - firstTimestamp,
           agentVersion: agentRuntime.version,
           session: agentRuntime.session.state.value,
+          hasMeta: this.hasMeta,
           hasSnapshot: this.hasSnapshot,
           hasError: this.hasError,
           isFirstChunk: this.isFirstChunk,
@@ -240,7 +253,7 @@ export class Aggregate extends AggregateBase {
   onHarvestFinished (result) {
     // The mutual decision for now is to stop recording and clear buffers if ingest is experiencing 429 rate limiting
     if (result.status === 429) {
-      this.abort()
+      this.abort('429: Too many requests')
     }
 
     if (this.blocked) this.scheduler.stopTimer(true)
@@ -251,6 +264,7 @@ export class Aggregate extends AggregateBase {
     this.events = []
     this.isFirstChunk = false
     this.hasSnapshot = false
+    this.hasMeta = false
     this.hasError = false
     this.payloadBytesEstimation = 0
     this.clearTimestamps()
@@ -260,21 +274,24 @@ export class Aggregate extends AggregateBase {
   startRecording () {
     if (!recorder) {
       warn('Recording library was never imported')
-      return this.abort()
+      return this.abort('Recorder was never imported')
     }
+    this.clearTimestamps()
+    // set the fallbacks as early as possible
+    this.setTimestamps()
     this.recording = true
-    const { blockClass, ignoreClass, maskTextClass, blockSelector, maskInputOptions, maskTextSelector, maskAllInputs } = getConfigurationValue(this.agentIdentifier, 'session_replay')
+    const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs } = getConfigurationValue(this.agentIdentifier, 'session_replay')
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
     const stop = recorder({
       emit: this.store.bind(this),
-      blockClass,
-      ignoreClass,
-      maskTextClass,
-      blockSelector,
-      maskInputOptions,
-      maskTextSelector,
-      maskAllInputs,
+      blockClass: block_class,
+      ignoreClass: ignore_class,
+      maskTextClass: mask_text_class,
+      blockSelector: block_selector,
+      maskInputOptions: mask_input_options,
+      maskTextSelector: mask_text_selector,
+      maskAllInputs: mask_all_inputs,
       checkoutEveryNms: CHECKOUT_MS[this.mode]
     })
 
@@ -286,6 +303,7 @@ export class Aggregate extends AggregateBase {
 
   /** Store a payload in the buffer (this.events).  This should be the callback to the recording lib noticing a mutation */
   store (event, isCheckout) {
+    this.setTimestamps(event)
     if (this.blocked) return
     const eventBytes = stringify(event).length
     /** The estimated size of the payload after compression */
@@ -293,7 +311,8 @@ export class Aggregate extends AggregateBase {
     // Vortex will block payloads at a certain size, we might as well not send.
     if (payloadSize > MAX_PAYLOAD_SIZE) {
       this.clearBuffer()
-      return this.abort()
+      this.ee.emit(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Too-Big/Seen'], undefined, FEATURE_NAMES.metrics, this.ee)
+      return this.abort('Payload too big')
     }
     // Checkout events are flags by the recording lib that indicate a fullsnapshot was taken every n ms. These are important
     // to help reconstruct the replay later and must be included.  While waiting and buffering for errors to come through,
@@ -303,8 +322,21 @@ export class Aggregate extends AggregateBase {
       this.clearBuffer()
     }
 
-    this.setTimestamps(event)
-    if (event.type === 2) this.hasSnapshot = true
+    // meta event
+    if (event.type === 4) {
+      this.hasMeta = true
+      this.lastMeta = event
+    }
+    // snapshot event
+    if (event.type === 2) {
+      this.hasSnapshot = true
+      // small chance that the meta event got separated from its matching snapshot across payload harvests
+      // it needs to precede the snapshot, so shove it in first.
+      if (!this.hasMeta) {
+        this.events.push(this.lastMeta)
+        this.hasMeta = true
+      }
+    }
 
     this.events.push(event)
     this.payloadBytesEstimation += eventBytes
@@ -323,14 +355,18 @@ export class Aggregate extends AggregateBase {
     recorder.takeFullSnapshot()
   }
 
-  setTimestamps (rrwebEvent) {
-    if (!rrwebEvent) return
-    if (!this.timestamp.first) this.timestamp.first = rrwebEvent.timestamp
-    this.timestamp.last = rrwebEvent.timestamp
+  setTimestamps (event) {
+    // fallbacks if timestamps cannot be derived from rrweb events
+    this.timestamp.cycle.last = getRuntime(this.agentIdentifier).offset + globalScope.performance.now()
+    if (!this.timestamp.cycle.first) this.timestamp.cycle.first = this.timestamp.cycle.last
+    // timestamps based on rrweb events
+    if (!event || !event.timestamp) return
+    if (!this.timestamp.event.first) this.timestamp.event.first = event.timestamp
+    this.timestamp.event.last = event.timestamp
   }
 
   clearTimestamps () {
-    this.timestamp = { first: undefined, last: undefined }
+    this.timestamp = { event: { first: undefined, last: undefined }, cycle: { first: undefined, last: undefined } }
   }
 
   /** Estimate the payload size */
@@ -340,7 +376,8 @@ export class Aggregate extends AggregateBase {
   }
 
   /** Abort the feature, once aborted it will not resume */
-  abort () {
+  abort (reason) {
+    warn(`SR aborted -- ${reason}`)
     this.blocked = true
     this.mode = MODE.OFF
     this.stopRecording()

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

@@ -108,6 +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)
         loadedSuccessfully(false)
       }
     }

package/src/loaders/browser-agent.js

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