✨ [POC] Before error session replay recording mode

packages/rum/src/boot/recorderApi.ts

@@ -122,6 +122,7 @@ export function makeRecorderApi(
       })
 
       let cachedDeflateEncoder: DeflateEncoder | undefined
+      let flushCachedRecords: () => void = noop
 
       function getOrCreateDeflateEncoder() {
         if (!cachedDeflateEncoder) {
@@ -144,12 +145,20 @@ export function makeRecorderApi(
 
       startStrategy = (options?: StartRecordingOptions) => {
         const session = sessionManager.findTrackedSession()
-        if (!session || (session.sessionReplay === SessionReplayState.OFF && (!options || !options.force))) {
+        if (!session) {
           state = { status: RecorderStatus.IntentToStart }
           return
         }
 
-        if (state.status === RecorderStatus.Starting || state.status === RecorderStatus.Started) {
+        if (state.status === RecorderStatus.Starting) {
+          return
+        }
+
+        if (state.status === RecorderStatus.Started) {
+          if (options && options.force && session.sessionReplay === SessionReplayState.OFF) {
+            flushCachedRecords()
+            sessionManager.setForcedReplay()
+          }
           return
         }
 
@@ -168,7 +177,7 @@ export function makeRecorderApi(
             return
           }
 
-          const { stop: stopRecording } = startRecordingImpl(
+          const { stop: stopRecording, flushCachedRecords: stopCaching } = startRecordingImpl(
             lifeCycle,
             configuration,
             sessionManager,
@@ -179,11 +188,8 @@ export function makeRecorderApi(
             status: RecorderStatus.Started,
             stopRecording,
           }
+          flushCachedRecords = stopCaching
         })
-
-        if (options && options.force && session.sessionReplay === SessionReplayState.OFF) {
-          sessionManager.setForcedReplay()
-        }
       }
 
       stopStrategy = () => {

packages/rum/src/boot/startRecording.ts

@@ -1,12 +1,13 @@
 import type { RawError, HttpRequest, DeflateEncoder } 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'
+import { LifeCycleEventType, SessionReplayState } from '@datadog/browser-rum-core'
 
 import { record } from '../domain/record'
 import { startSegmentCollection, SEGMENT_BYTES_LIMIT } from '../domain/segmentCollection'
 import type { BrowserRecord } from '../types'
 import { startRecordBridge } from '../domain/startRecordBridge'
+import { startRecordsCaching } from '../domain/recordsCaching'
 
 export function startRecording(
   lifeCycle: LifeCycle,
@@ -28,8 +29,9 @@ export function startRecording(
     createHttpRequest(configuration, configuration.sessionReplayEndpointBuilder, SEGMENT_BYTES_LIMIT, reportError)
 
   let addRecord: (record: BrowserRecord) => void
+  let flushCachedRecords: () => void = noop
 
-  if (!canUseEventBridge()) {
+  const initSegmentCollection = () => {
     const segmentCollection = startSegmentCollection(
       lifeCycle,
       configuration,
@@ -38,21 +40,38 @@ export function startRecording(
       replayRequest,
       encoder
     )
-    addRecord = segmentCollection.addRecord
     cleanupTasks.push(segmentCollection.stop)
+    return { addRecord: segmentCollection.addRecord }
+  }
+
+  if (!canUseEventBridge()) {
+    const session = sessionManager.findTrackedSession()!
+    if (session.sessionReplay === SessionReplayState.OFF) {
+      const cacheInitResult = startRecordsCaching()
+      addRecord = cacheInitResult.addRecord
+
+      flushCachedRecords = () => {
+        ;({ addRecord } = initSegmentCollection())
+        const records = cacheInitResult.getRecords()
+        records.forEach((record: BrowserRecord) => addRecord(record))
+      }
+    } else {
+      ;({ addRecord } = initSegmentCollection())
+    }
   } else {
     ;({ addRecord } = startRecordBridge(viewHistory))
   }
 
   const { stop: stopRecording } = record({
-    emit: addRecord,
+    emit: (record) => addRecord(record),
     configuration,
     lifeCycle,
     viewHistory,
   })
   cleanupTasks.push(stopRecording)
 
   return {
+    flushCachedRecords,
     stop: () => {
       cleanupTasks.forEach((task) => task())
     },

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

@@ -0,0 +1 @@
+export * from './recordsCaching'

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

@@ -0,0 +1,18 @@
+import type { BrowserRecord } from '../../types'
+
+export function startRecordsCaching() {
+  const records: BrowserRecord[] = []
+
+  function addRecord(record: BrowserRecord) {
+    records.push(record)
+  }
+
+  function getRecords() {
+    return records
+  }
+
+  return {
+    addRecord,
+    getRecords,
+  }
+}