Init mapping ids to serialised nodes

packages/rum/src/boot/startRecording.ts

@@ -47,13 +47,21 @@ export function startRecording(
   if (!canUseEventBridge()) {
     const session = sessionManager.findTrackedSession()!
     if (session.sessionReplay === SessionReplayState.OFF) {
-      const cacheInitResult = startRecordsCaching()
+      const cacheInitResult = startRecordsCaching(lifeCycle)
       addRecord = cacheInitResult.addRecord
 
       flushCachedRecords = () => {
+        // Stop squashing scheduled task
+        cacheInitResult.clearCachingInterval()
+        // Switch records forwarding to segment collection
         ;({ addRecord } = initSegmentCollection())
+        // Perform squashing of cached records
+        cacheInitResult.squashCachedRecords()
+        // Add all cached records to the segments
         const records = cacheInitResult.getRecords()
         records.forEach((record: BrowserRecord) => addRecord(record))
+        // Stop caching and clear the cache
+        cacheInitResult.stop()
       }
     } else {
       ;({ addRecord } = initSegmentCollection())

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

@@ -2,3 +2,4 @@ export { record } from './record'
 export { serializeNodeWithId, serializeDocument, SerializationContextStatus } from './serialization'
 export { createElementsScrollPositions } from './elementsScrollPositions'
 export { ShadowRootsController } from './shadowRootsController'
+export { getSerializedNodeMap } from './serialization'

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

@@ -1,6 +1,7 @@
 export {
   getElementInputValue,
   getSerializedNodeId,
+  getSerializedNodeMap,
   hasSerializedNode,
   nodeAndAncestorsHaveSerializedNode,
 } from './serializationUtils'

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

@@ -1,9 +1,11 @@
 import { buildUrl } from '@datadog/browser-core'
 import { getParentNode, isNodeShadowRoot, CENSORED_STRING_MARK, shouldMaskNode } from '@datadog/browser-rum-core'
 import type { NodePrivacyLevel } from '@datadog/browser-rum-core'
+import type { SerializedNodeWithId } from '../../../types'
 import type { NodeWithSerializedNode } from './serialization.types'
 
 const serializedNodeIds = new WeakMap<Node, number>()
+const serializedNodesByIds = new Map<number, SerializedNodeWithId>()
 
 export function hasSerializedNode(node: Node): node is NodeWithSerializedNode {
   return serializedNodeIds.has(node)
@@ -26,10 +28,22 @@ export function getSerializedNodeId(node: Node) {
   return serializedNodeIds.get(node)
 }
 
+export function getSerializedNodeById(serializeNodeId: number): SerializedNodeWithId | undefined {
+  return serializedNodesByIds.get(serializeNodeId)
+}
+
 export function setSerializedNodeId(node: Node, serializeNodeId: number) {
   serializedNodeIds.set(node, serializeNodeId)
 }
 
+export function setSerializedNodeWithId(id: number, node: SerializedNodeWithId) {
+  serializedNodesByIds.set(id, node)
+}
+
+export function getSerializedNodeMap(): Map<number, SerializedNodeWithId> {
+  return serializedNodesByIds
+}
+
 /**
  * Get the element "value" to be serialized as an attribute or an input update record. It respects
  * the input privacy mode of the element.

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

@@ -21,7 +21,12 @@ import type {
   TextNode,
 } from '../../../types'
 import { NodeType } from '../../../types'
-import { getSerializedNodeId, getValidTagName, setSerializedNodeId } from './serializationUtils'
+import {
+  getSerializedNodeId,
+  getValidTagName,
+  setSerializedNodeId,
+  setSerializedNodeWithId,
+} from './serializationUtils'
 import type { SerializeOptions } from './serialization.types'
 import { serializeStyleSheets } from './serializeStyleSheets'
 import { serializeAttributes } from './serializeAttributes'
@@ -40,6 +45,7 @@ export function serializeNodeWithId(node: Node, options: SerializeOptions): Seri
   if (options.serializedNodeIds) {
     options.serializedNodeIds.add(id)
   }
+  setSerializedNodeWithId(id, serializedNodeWithId)
   return serializedNodeWithId
 }
 

packages/rum/src/domain/recordsCaching/recordsCaching.ts

@@ -1,18 +1,76 @@
+import { setInterval, clearInterval, timeStampNow } from '@datadog/browser-core'
+import type { TimeStamp } from '@datadog/browser-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { LifeCycleEventType } from '@datadog/browser-rum-core'
 import type { BrowserRecord } from '../../types'
+import { squashRecords } from '../squashing'
 
-export function startRecordsCaching() {
-  const records: BrowserRecord[] = []
+const SQUASHING_INTERVAL = 15_000
+
+export function startRecordsCaching(lifeCycle: LifeCycle) {
+  let cachedRecords: BrowserRecord[] = []
+  // Periodically squash cached records every 30 seconds
+  const intervalId = setInterval(squashCachedRecords, 2 * SQUASHING_INTERVAL)
+
+  // Clear records when view ends
+  const subscription = lifeCycle.subscribe(LifeCycleEventType.AFTER_VIEW_ENDED, () => {
+    clearInterval(intervalId)
+    clearCache()
+  })
 
   function addRecord(record: BrowserRecord) {
-    records.push(record)
+    cachedRecords.push(record)
+  }
+
+  function clearCache() {
+    cachedRecords = []
   }
 
   function getRecords() {
-    return records
+    return cachedRecords
+  }
+
+  function squashCachedRecords() {
+    const squashingTimestamp = (timeStampNow() - SQUASHING_INTERVAL) as TimeStamp
+    const [recordsBeforeSeekTs, recordsAfterSeekTs] = partition(
+      cachedRecords,
+      (r: BrowserRecord) => r.timestamp <= squashingTimestamp
+    )
+
+    const squashedRecords = squashRecords(recordsBeforeSeekTs, squashingTimestamp)
+    cachedRecords = squashedRecords.concat(recordsAfterSeekTs)
+  }
+
+  function clearCachingInterval() {
+    clearInterval(intervalId)
+  }
+
+  function stop() {
+    subscription.unsubscribe()
+    clearInterval(intervalId)
+    clearCache()
   }
 
   return {
+    stop,
     addRecord,
     getRecords,
+    squashCachedRecords,
+    clearCachingInterval,
   }
 }
+
+function partition<T>(array: T[], predicate: (value: T) => boolean): [T[], T[]] {
+  const truthy: T[] = []
+  const falsy: T[] = []
+
+  array.forEach((item) => {
+    if (predicate(item)) {
+      truthy.push(item)
+    } else {
+      falsy.push(item)
+    }
+  })
+
+  return [truthy, falsy]
+}