⚡️ [RUM-6813] Lazy load session replay (#3152)

Author: amortemousque

.gitlab-ci.yml

@@ -308,6 +308,7 @@ script-tests:
   interruptible: true
   script:
     - yarn
+    - yarn build:bundle
     - yarn test:script
 ########################################################################################################################
 # Deploy

packages/core/src/browser/runOnReadyState.ts

@@ -14,3 +14,12 @@ export function runOnReadyState(
   const eventName = expectedReadyState === 'complete' ? DOM_EVENT.LOAD : DOM_EVENT.DOM_CONTENT_LOADED
   return addEventListener(configuration, window, eventName, callback, { once: true })
 }
+
+export function asyncRunOnReadyState(
+  configuration: Configuration,
+  expectedReadyState: 'complete' | 'interactive'
+): Promise<void> {
+  return new Promise((resolve) => {
+    runOnReadyState(configuration, expectedReadyState, resolve)
+  })
+}

packages/core/src/index.ts

@@ -47,7 +47,7 @@ export {
   addTelemetryUsage,
   drainPreStartTelemetry,
 } from './domain/telemetry'
-export { monitored, monitor, callMonitored, setDebugMode } from './tools/monitor'
+export { monitored, monitor, callMonitored, setDebugMode, monitorError } from './tools/monitor'
 export { Observable, Subscription } from './tools/observable'
 export {
   startSessionManager,
@@ -82,7 +82,7 @@ export { AbstractLifeCycle } from './tools/abstractLifeCycle'
 export * from './domain/eventRateLimiter/createEventRateLimiter'
 export * from './tools/utils/browserDetection'
 export { sendToExtension } from './tools/sendToExtension'
-export { runOnReadyState } from './browser/runOnReadyState'
+export { runOnReadyState, asyncRunOnReadyState } from './browser/runOnReadyState'
 export { getZoneJsOriginalValue } from './tools/getZoneJsOriginalValue'
 export { instrumentMethod, instrumentSetter, InstrumentedMethodCall } from './tools/instrumentMethod'
 export {

packages/core/src/tools/monitor.ts

@@ -50,13 +50,17 @@ export function callMonitored<T extends (...args: any[]) => any>(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return fn.apply(context, args)
   } catch (e) {
-    displayIfDebugEnabled(e)
-    if (onMonitorErrorCollected) {
-      try {
-        onMonitorErrorCollected(e)
-      } catch (e) {
-        displayIfDebugEnabled(e)
-      }
+    monitorError(e)
+  }
+}
+
+export function monitorError(e: unknown) {
+  displayIfDebugEnabled(e)
+  if (onMonitorErrorCollected) {
+    try {
+      onMonitorErrorCollected(e)
+    } catch (e) {
+      displayIfDebugEnabled(e)
     }
   }
 }

packages/core/tsconfig.esm.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
-    "module": "es6",
     "rootDir": "./src/",
     "outDir": "./esm/"
   },

packages/rum-core/tsconfig.esm.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
-    "module": "es6",
     "rootDir": "./src/",
     "outDir": "./esm/"
   },

packages/rum-react/tsconfig.esm.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
-    "module": "es6",
     "rootDir": "./src/",
     "outDir": "./esm/"
   },

packages/rum-slim/tsconfig.esm.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
-    "module": "es6",
     "rootDir": "./src/",
     "outDir": "./esm/"
   },

packages/rum/src/boot/lazyLoadRecorder.ts

@@ -0,0 +1,3 @@
+export function lazyLoadRecorder() {
+  return import(/* webpackChunkName: "recorder" */ './startRecording').then((module) => module.startRecording)
+}

packages/rum/src/boot/postStartStrategy.ts

@@ -7,7 +7,7 @@ import type {
   RumSession,
 } from '@datadog/browser-rum-core'
 import { LifeCycleEventType, SessionReplayState } from '@datadog/browser-rum-core'
-import { PageExitReason, runOnReadyState, type DeflateEncoder } from '@datadog/browser-core'
+import { asyncRunOnReadyState, monitorError, PageExitReason, type DeflateEncoder } from '@datadog/browser-core'
 import { getSessionReplayLink } from '../domain/getSessionReplayLink'
 import type { startRecording } from './startRecording'
 
@@ -37,10 +37,11 @@ export function createPostStartStrategy(
   lifeCycle: LifeCycle,
   sessionManager: RumSessionManager,
   viewHistory: ViewHistory,
-  startRecordingImpl: StartRecording,
+  loadRecorder: () => Promise<StartRecording>,
   getOrCreateDeflateEncoder: () => DeflateEncoder | undefined
 ): Strategy {
   let status = RecorderStatus.Stopped
+  let stopRecording: () => void
 
   lifeCycle.subscribe(LifeCycleEventType.SESSION_EXPIRED, () => {
     if (status === RecorderStatus.Starting || status === RecorderStatus.Started) {
@@ -62,6 +63,30 @@ export function createPostStartStrategy(
     }
   })
 
+  const doStart = async () => {
+    const [startRecordingImpl] = await Promise.all([loadRecorder(), asyncRunOnReadyState(configuration, 'interactive')])
+
+    if (status !== RecorderStatus.Starting) {
+      return
+    }
+
+    const deflateEncoder = getOrCreateDeflateEncoder()
+    if (!deflateEncoder) {
+      status = RecorderStatus.Stopped
+      return
+    }
+
+    ;({ stop: stopRecording } = startRecordingImpl(
+      lifeCycle,
+      configuration,
+      sessionManager,
+      viewHistory,
+      deflateEncoder
+    ))
+
+    status = RecorderStatus.Started
+  }
+
   function start(options?: StartRecordingOptions) {
     const session = sessionManager.findTrackedSession()
     if (canStartRecording(session, options)) {
@@ -75,42 +100,22 @@ export function createPostStartStrategy(
 
     status = RecorderStatus.Starting
 
-    runOnReadyState(configuration, 'interactive', () => {
-      if (status !== RecorderStatus.Starting) {
-        return
-      }
-
-      const deflateEncoder = getOrCreateDeflateEncoder()
-      if (!deflateEncoder) {
-        status = RecorderStatus.Stopped
-        return
-      }
-
-      ;({ stop: stopRecording } = startRecordingImpl(
-        lifeCycle,
-        configuration,
-        sessionManager,
-        viewHistory,
-        deflateEncoder
-      ))
-
-      status = RecorderStatus.Started
-    })
+    // Intentionally not awaiting doStart() to keep it asynchronous
+    doStart().catch(monitorError)
 
     if (shouldForceReplay(session!, options)) {
       sessionManager.setForcedReplay()
     }
   }
 
   function stop() {
-    if (status !== RecorderStatus.Stopped && status === RecorderStatus.Started) {
+    if (status === RecorderStatus.Started) {
       stopRecording?.()
     }
 
     status = RecorderStatus.Stopped
   }
 
-  let stopRecording: () => void
   return {
     start,
     stop,