🎨 [PANA-4976] Separate emission of replay records and serialization stats (#3978)

Author: sethfowler-datadog

packages/rum/src/boot/startRecording.ts

@@ -1,5 +1,5 @@
 import type { RawError, HttpRequest, DeflateEncoder, Telemetry } from '@datadog/browser-core'
-import { createHttpRequest, addTelemetryDebug, canUseEventBridge } from '@datadog/browser-core'
+import { createHttpRequest, addTelemetryDebug, canUseEventBridge, noop } from '@datadog/browser-core'
 import type { LifeCycle, ViewHistory, RumConfiguration, RumSessionManager } from '@datadog/browser-rum-core'
 import { LifeCycleEventType } from '@datadog/browser-rum-core'
 
@@ -30,7 +30,8 @@ export function startRecording(
   const replayRequest =
     httpRequest || createHttpRequest([configuration.sessionReplayEndpointBuilder], reportError, SEGMENT_BYTES_LIMIT)
 
-  let addRecord: (record: BrowserRecord, stats?: SerializationStats) => void
+  let addRecord: (record: BrowserRecord) => void
+  let addStats: (stats: SerializationStats) => void
 
   if (!canUseEventBridge()) {
     const segmentCollection = startSegmentCollection(
@@ -42,16 +43,19 @@ export function startRecording(
       encoder
     )
     addRecord = segmentCollection.addRecord
+    addStats = segmentCollection.addStats
     cleanupTasks.push(segmentCollection.stop)
 
     const segmentTelemetry = startSegmentTelemetry(telemetry, replayRequest.observable)
     cleanupTasks.push(segmentTelemetry.stop)
   } else {
     ;({ addRecord } = startRecordBridge(viewHistory))
+    addStats = noop
   }
 
   const { stop: stopRecording } = record({
-    emit: addRecord,
+    emitRecord: addRecord,
+    emitStats: addStats,
     configuration,
     lifeCycle,
     viewHistory,

packages/rum/src/domain/record/record.spec.ts

@@ -1,4 +1,4 @@
-import { DefaultPrivacyLevel, findLast } from '@datadog/browser-core'
+import { DefaultPrivacyLevel, findLast, noop } from '@datadog/browser-core'
 import type { RumConfiguration, ViewCreatedEvent } from '@datadog/browser-rum-core'
 import { LifeCycle, LifeCycleEventType } from '@datadog/browser-rum-core'
 import { createNewEvent, collectAsyncCalls, registerCleanupTask } from '@datadog/browser-core/test'
@@ -22,11 +22,12 @@ import { appendElement } from '../../../../rum-core/test'
 import { getReplayStats, resetReplayStats } from '../replayStats'
 import type { RecordAPI } from './record'
 import { record } from './record'
+import type { EmitRecordCallback } from './record.types'
 
 describe('record', () => {
   let recordApi: RecordAPI
   let lifeCycle: LifeCycle
-  let emitSpy: jasmine.Spy<(record: BrowserRecord) => void>
+  let emitSpy: jasmine.Spy<EmitRecordCallback>
   const FAKE_VIEW_ID = '123'
 
   beforeEach(() => {
@@ -450,7 +451,8 @@ describe('record', () => {
   function startRecording() {
     lifeCycle = new LifeCycle()
     recordApi = record({
-      emit: emitSpy,
+      emitRecord: emitSpy,
+      emitStats: noop,
       configuration: { defaultPrivacyLevel: DefaultPrivacyLevel.ALLOW } as RumConfiguration,
       lifeCycle,
       viewHistory: {

packages/rum/src/domain/record/record.ts

@@ -1,7 +1,7 @@
 import { sendToExtension } from '@datadog/browser-core'
 import type { LifeCycle, RumConfiguration, ViewHistory } from '@datadog/browser-rum-core'
-import type { BrowserRecord } from '../../types'
 import * as replayStats from '../replayStats'
+import type { BrowserRecord } from '../../types'
 import type { Tracker } from './trackers'
 import {
   trackFocus,
@@ -22,12 +22,13 @@ import type { ShadowRootsController } from './shadowRootsController'
 import { initShadowRootsController } from './shadowRootsController'
 import { startFullSnapshots } from './startFullSnapshots'
 import { initRecordIds } from './recordIds'
-import type { SerializationStats } from './serialization'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
 import { createSerializationScope } from './serialization'
 import { createNodeIds } from './nodeIds'
 
 export interface RecordOptions {
-  emit?: (record: BrowserRecord, stats?: SerializationStats) => void
+  emitRecord: EmitRecordCallback
+  emitStats: EmitStatsCallback
   configuration: RumConfiguration
   lifeCycle: LifeCycle
   viewHistory: ViewHistory
@@ -40,14 +41,14 @@ export interface RecordAPI {
 }
 
 export function record(options: RecordOptions): RecordAPI {
-  const { emit, configuration, lifeCycle } = options
+  const { emitRecord, emitStats, configuration, lifeCycle } = options
   // runtime checks for user options
-  if (!emit) {
-    throw new Error('emit function is required')
+  if (!emitRecord || !emitStats) {
+    throw new Error('emit functions are required')
   }
 
-  const emitAndComputeStats = (record: BrowserRecord, stats?: SerializationStats) => {
-    emit(record, stats)
+  const processRecord: EmitRecordCallback = (record: BrowserRecord) => {
+    emitRecord(record)
     sendToExtension('record', { record })
     const view = options.viewHistory.findView()!
     replayStats.addRecord(view.id)
@@ -58,7 +59,8 @@ export function record(options: RecordOptions): RecordAPI {
   const shadowRootsController = initShadowRootsController(
     configuration,
     scope,
-    emitAndComputeStats,
+    processRecord,
+    emitStats,
     elementsScrollPositions
   )
 
@@ -69,7 +71,8 @@ export function record(options: RecordOptions): RecordAPI {
     configuration,
     scope,
     flushMutations,
-    emitAndComputeStats
+    processRecord,
+    emitStats
   )
 
   function flushMutations() {
@@ -78,23 +81,20 @@ export function record(options: RecordOptions): RecordAPI {
   }
 
   const recordIds = initRecordIds()
-  const mutationTracker = trackMutation(emitAndComputeStats, configuration, scope, shadowRootsController, document)
+  const mutationTracker = trackMutation(processRecord, emitStats, configuration, scope, shadowRootsController, document)
   const trackers: Tracker[] = [
     mutationTracker,
-    trackMove(configuration, scope, emitAndComputeStats),
-    trackMouseInteraction(configuration, scope, emitAndComputeStats, recordIds),
-    trackScroll(configuration, scope, emitAndComputeStats, elementsScrollPositions, document),
-    trackViewportResize(configuration, emitAndComputeStats),
-    trackInput(configuration, scope, emitAndComputeStats),
-    trackMediaInteraction(configuration, scope, emitAndComputeStats),
-    trackStyleSheet(scope, emitAndComputeStats),
-    trackFocus(configuration, emitAndComputeStats),
-    trackVisualViewportResize(configuration, emitAndComputeStats),
-    trackFrustration(lifeCycle, emitAndComputeStats, recordIds),
-    trackViewEnd(lifeCycle, (viewEndRecord) => {
-      flushMutations()
-      emitAndComputeStats(viewEndRecord)
-    }),
+    trackMove(configuration, scope, processRecord),
+    trackMouseInteraction(configuration, scope, processRecord, recordIds),
+    trackScroll(configuration, scope, processRecord, elementsScrollPositions, document),
+    trackViewportResize(configuration, processRecord),
+    trackInput(configuration, scope, processRecord),
+    trackMediaInteraction(configuration, scope, processRecord),
+    trackStyleSheet(scope, processRecord),
+    trackFocus(configuration, processRecord),
+    trackVisualViewportResize(configuration, processRecord),
+    trackFrustration(lifeCycle, processRecord, recordIds),
+    trackViewEnd(lifeCycle, flushMutations, processRecord),
   ]
 
   return {

packages/rum/src/domain/record/record.types.ts

@@ -0,0 +1,5 @@
+import type { BrowserRecord } from '../../types'
+import type { SerializationStats } from './serialization'
+
+export type EmitRecordCallback<Record extends BrowserRecord = BrowserRecord> = (record: Record) => void
+export type EmitStatsCallback = (stats: SerializationStats) => void

packages/rum/src/domain/record/shadowRootsController.ts

@@ -1,7 +1,7 @@
 import type { RumConfiguration } from '@datadog/browser-rum-core'
-import type { BrowserIncrementalSnapshotRecord } from '../../types'
 import { trackInput, trackMutation, trackScroll } from './trackers'
 import type { ElementsScrollPositions } from './elementsScrollPositions'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
 import type { SerializationScope } from './serialization'
 
 interface ShadowRootController {
@@ -21,7 +21,8 @@ export interface ShadowRootsController {
 export const initShadowRootsController = (
   configuration: RumConfiguration,
   scope: SerializationScope,
-  callback: (record: BrowserIncrementalSnapshotRecord) => void,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
   elementsScrollPositions: ElementsScrollPositions
 ): ShadowRootsController => {
   const controllerByShadowRoot = new Map<ShadowRoot, ShadowRootController>()
@@ -31,11 +32,18 @@ export const initShadowRootsController = (
       if (controllerByShadowRoot.has(shadowRoot)) {
         return
       }
-      const mutationTracker = trackMutation(callback, configuration, scope, shadowRootsController, shadowRoot)
+      const mutationTracker = trackMutation(
+        emitRecord,
+        emitStats,
+        configuration,
+        scope,
+        shadowRootsController,
+        shadowRoot
+      )
       // The change event does not bubble up across the shadow root, we have to listen on the shadow root
-      const inputTracker = trackInput(configuration, scope, callback, shadowRoot)
+      const inputTracker = trackInput(configuration, scope, emitRecord, shadowRoot)
       // The scroll event does not bubble up across the shadow root, we have to listen on the shadow root
-      const scrollTracker = trackScroll(configuration, scope, callback, elementsScrollPositions, shadowRoot)
+      const scrollTracker = trackScroll(configuration, scope, emitRecord, elementsScrollPositions, shadowRoot)
       controllerByShadowRoot.set(shadowRoot, {
         flush: () => mutationTracker.flush(),
         stop: () => {

packages/rum/src/domain/record/startFullSnapshots.spec.ts

@@ -2,22 +2,25 @@ import type { RumConfiguration, ViewCreatedEvent } from '@datadog/browser-rum-co
 import { LifeCycle, LifeCycleEventType } from '@datadog/browser-rum-core'
 import type { TimeStamp } from '@datadog/browser-core'
 import { noop } from '@datadog/browser-core'
-import { RecordType, type BrowserRecord } from '../../types'
+import { RecordType } from '../../types'
 import { appendElement } from '../../../../rum-core/test'
 import { startFullSnapshots } from './startFullSnapshots'
 import { createElementsScrollPositions } from './elementsScrollPositions'
 import type { ShadowRootsController } from './shadowRootsController'
-import { createSerializationScope, type SerializationStats } from './serialization'
+import { createSerializationScope } from './serialization'
 import { createNodeIds } from './nodeIds'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
 
 describe('startFullSnapshots', () => {
   const viewStartClock = { relative: 1, timeStamp: 1 as TimeStamp }
   let lifeCycle: LifeCycle
-  let emitCallback: jasmine.Spy<(record: BrowserRecord, stats?: SerializationStats) => void>
+  let emitRecordCallback: jasmine.Spy<EmitRecordCallback>
+  let emitStatsCallback: jasmine.Spy<EmitStatsCallback>
 
   beforeEach(() => {
     lifeCycle = new LifeCycle()
-    emitCallback = jasmine.createSpy()
+    emitRecordCallback = jasmine.createSpy()
+    emitStatsCallback = jasmine.createSpy()
     appendElement('<style>body { width: 100%; }</style>', document.head)
     startFullSnapshots(
       createElementsScrollPositions(),
@@ -26,39 +29,40 @@ describe('startFullSnapshots', () => {
       {} as RumConfiguration,
       createSerializationScope(createNodeIds()),
       noop,
-      emitCallback
+      emitRecordCallback,
+      emitStatsCallback
     )
   })
 
   it('takes a full snapshot when startFullSnapshots is called', () => {
-    expect(emitCallback).toHaveBeenCalled()
+    expect(emitRecordCallback).toHaveBeenCalled()
   })
 
   it('takes a full snapshot when the view changes', () => {
-    emitCallback.calls.reset()
+    emitRecordCallback.calls.reset()
 
     lifeCycle.notify(LifeCycleEventType.VIEW_CREATED, {
       startClocks: viewStartClock,
     } as Partial<ViewCreatedEvent> as any)
 
-    expect(emitCallback).toHaveBeenCalled()
+    expect(emitRecordCallback).toHaveBeenCalled()
   })
 
   it('full snapshot related records should have the view change date', () => {
-    emitCallback.calls.reset()
+    emitRecordCallback.calls.reset()
 
     lifeCycle.notify(LifeCycleEventType.VIEW_CREATED, {
       startClocks: viewStartClock,
     } as Partial<ViewCreatedEvent> as any)
 
-    const records = emitCallback.calls.allArgs().map((args) => args[0])
+    const records = emitRecordCallback.calls.allArgs().map((args) => args[0])
     expect(records[0].timestamp).toEqual(1)
     expect(records[1].timestamp).toEqual(1)
     expect(records[2].timestamp).toEqual(1)
   })
 
   it('full snapshot records should contain Meta, Focus, FullSnapshot', () => {
-    const records = emitCallback.calls.allArgs().map((args) => args[0])
+    const records = emitRecordCallback.calls.allArgs().map((args) => args[0])
 
     expect(records).toEqual(
       jasmine.arrayContaining([
@@ -97,7 +101,7 @@ describe('startFullSnapshots', () => {
     if (!window.visualViewport) {
       pending('visualViewport not supported')
     }
-    const record = emitCallback.calls.mostRecent().args[0]
+    const record = emitRecordCallback.calls.mostRecent().args[0]
 
     expect(record).toEqual({
       data: jasmine.any(Object),
@@ -107,8 +111,7 @@ describe('startFullSnapshots', () => {
   })
 
   it('full snapshot records should be emitted with serialization stats', () => {
-    const fullSnapshotEmits = emitCallback.calls.allArgs().filter((args) => args[0].type === RecordType.FullSnapshot)
-    expect(fullSnapshotEmits[0][1]).toEqual({
+    expect(emitStatsCallback.calls.mostRecent().args[0]).toEqual({
       cssText: { count: 1, max: 21, sum: 21 },
       serializationDuration: jasmine.anything(),
     })

packages/rum/src/domain/record/startFullSnapshots.ts

@@ -2,13 +2,13 @@ import { LifeCycleEventType, getScrollX, getScrollY, getViewportDimension } from
 import type { RumConfiguration, LifeCycle } from '@datadog/browser-rum-core'
 import { timeStampNow } from '@datadog/browser-core'
 import type { TimeStamp } from '@datadog/browser-core'
-import type { BrowserRecord } from '../../types'
 import { RecordType } from '../../types'
 import type { ElementsScrollPositions } from './elementsScrollPositions'
 import type { ShadowRootsController } from './shadowRootsController'
-import type { SerializationContext, SerializationScope, SerializationStats } from './serialization'
+import type { SerializationContext, SerializationScope } from './serialization'
 import { createSerializationStats, SerializationContextStatus, serializeDocument } from './serialization'
 import { getVisualViewport } from './viewports'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
 
 export function startFullSnapshots(
   elementsScrollPositions: ElementsScrollPositions,
@@ -17,11 +17,12 @@ export function startFullSnapshots(
   configuration: RumConfiguration,
   scope: SerializationScope,
   flushMutations: () => void,
-  emit: (record: BrowserRecord, stats?: SerializationStats) => void
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback
 ) {
   const takeFullSnapshot = (timestamp: TimeStamp, status: SerializationContextStatus) => {
     const { width, height } = getViewportDimension()
-    emit({
+    emitRecord({
       data: {
         height,
         href: window.location.href,
@@ -30,7 +31,8 @@ export function startFullSnapshots(
       type: RecordType.Meta,
       timestamp,
     })
-    emit({
+
+    emitRecord({
       data: {
         has_focus: document.hasFocus(),
       },
@@ -45,23 +47,21 @@ export function startFullSnapshots(
       serializationStats,
       shadowRootsController,
     }
-    emit(
-      {
-        data: {
-          node: serializeDocument(document, configuration, scope, serializationContext),
-          initialOffset: {
-            left: getScrollX(),
-            top: getScrollY(),
-          },
+    emitRecord({
+      data: {
+        node: serializeDocument(document, configuration, scope, serializationContext),
+        initialOffset: {
+          left: getScrollX(),
+          top: getScrollY(),
         },
-        type: RecordType.FullSnapshot,
-        timestamp,
       },
-      serializationStats
-    )
+      type: RecordType.FullSnapshot,
+      timestamp,
+    })
+    emitStats(serializationStats)
 
     if (window.visualViewport) {
-      emit({
+      emitRecord({
         data: getVisualViewport(window.visualViewport),
         type: RecordType.VisualViewport,
         timestamp,

packages/rum/src/domain/record/trackers/index.ts

@@ -7,9 +7,6 @@ export { trackStyleSheet } from './trackStyleSheet'
 export { trackFocus } from './trackFocus'
 export { trackFrustration } from './trackFrustration'
 export { trackViewEnd } from './trackViewEnd'
-export type { InputCallback } from './trackInput'
 export { trackInput } from './trackInput'
-export type { ScrollCallback } from './trackScroll'
-export type { MutationCallBack } from './trackMutation'
 export { trackMutation } from './trackMutation'
 export type { Tracker } from './tracker.types'