@depup/datadog__browser-rum 6.31.0-depup.0

package/src/boot/startRecording.ts

@@ -0,0 +1,70 @@
+import type { RawError, HttpRequest, DeflateEncoder, Telemetry } 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 type { SerializationStats } from '../domain/record'
+import { record } from '../domain/record'
+import type { ReplayPayload } from '../domain/segmentCollection'
+import { startSegmentCollection, SEGMENT_BYTES_LIMIT, startSegmentTelemetry } from '../domain/segmentCollection'
+import type { BrowserRecord } from '../types'
+import { startRecordBridge } from '../domain/startRecordBridge'
+
+export function startRecording(
+  lifeCycle: LifeCycle,
+  configuration: RumConfiguration,
+  sessionManager: RumSessionManager,
+  viewHistory: ViewHistory,
+  encoder: DeflateEncoder,
+  telemetry: Telemetry,
+  httpRequest?: HttpRequest<ReplayPayload>
+) {
+  const cleanupTasks: Array<() => void> = []
+
+  const reportError = (error: RawError) => {
+    lifeCycle.notify(LifeCycleEventType.RAW_ERROR_COLLECTED, { error })
+    // monitor-until: forever, to keep an eye on the errors reported to customers
+    addTelemetryDebug('Error reported to customer', { 'error.message': error.message })
+  }
+
+  const replayRequest =
+    httpRequest || createHttpRequest([configuration.sessionReplayEndpointBuilder], reportError, SEGMENT_BYTES_LIMIT)
+
+  let addRecord: (record: BrowserRecord) => void
+  let addStats: (stats: SerializationStats) => void
+
+  if (!canUseEventBridge()) {
+    const segmentCollection = startSegmentCollection(
+      lifeCycle,
+      configuration,
+      sessionManager,
+      viewHistory,
+      replayRequest,
+      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({
+    emitRecord: addRecord,
+    emitStats: addStats,
+    configuration,
+    lifeCycle,
+    viewHistory,
+  })
+  cleanupTasks.push(stopRecording)
+
+  return {
+    stop: () => {
+      cleanupTasks.forEach((task) => task())
+    },
+  }
+}

package/src/domain/deflate/deflateEncoder.ts

@@ -0,0 +1,144 @@
+import type {
+  DeflateWorkerResponse,
+  DeflateEncoder,
+  DeflateEncoderStreamId,
+  DeflateWorker,
+  EncoderResult,
+  Uint8ArrayBuffer,
+} from '@datadog/browser-core'
+import { addEventListener, concatBuffers } from '@datadog/browser-core'
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+
+export function createDeflateEncoder(
+  configuration: RumConfiguration,
+  worker: DeflateWorker,
+  streamId: DeflateEncoderStreamId
+): DeflateEncoder {
+  let rawBytesCount = 0
+  let compressedData: Uint8ArrayBuffer[] = []
+  let compressedDataTrailer: Uint8ArrayBuffer
+
+  let isEmpty = true
+  let nextWriteActionId = 0
+  const pendingWriteActions: Array<{
+    writeCallback?: (additionalEncodedBytesCount: number) => void
+    finishCallback?: () => void
+    id: number
+    data: string
+  }> = []
+
+  const { stop: removeMessageListener } = addEventListener(
+    configuration,
+    worker,
+    'message',
+    ({ data: workerResponse }: MessageEvent<DeflateWorkerResponse>) => {
+      if (workerResponse.type !== 'wrote' || (workerResponse.streamId as DeflateEncoderStreamId) !== streamId) {
+        return
+      }
+
+      const nextPendingAction = pendingWriteActions[0]
+      if (nextPendingAction) {
+        if (nextPendingAction.id === workerResponse.id) {
+          pendingWriteActions.shift()
+
+          rawBytesCount += workerResponse.additionalBytesCount
+          compressedData.push(workerResponse.result)
+          compressedDataTrailer = workerResponse.trailer
+
+          if (nextPendingAction.writeCallback) {
+            nextPendingAction.writeCallback(workerResponse.result.byteLength)
+          } else if (nextPendingAction.finishCallback) {
+            nextPendingAction.finishCallback()
+          }
+        } else if (nextPendingAction.id < workerResponse.id) {
+          // Worker responses received out of order
+          removeMessageListener()
+        }
+      }
+    }
+  )
+
+  function consumeResult(): EncoderResult<Uint8ArrayBuffer> {
+    const output =
+      compressedData.length === 0 ? new Uint8Array(0) : concatBuffers(compressedData.concat(compressedDataTrailer))
+    const result: EncoderResult<Uint8ArrayBuffer> = {
+      rawBytesCount,
+      output,
+      outputBytesCount: output.byteLength,
+      encoding: 'deflate',
+    }
+    rawBytesCount = 0
+    compressedData = []
+    return result
+  }
+
+  function sendResetIfNeeded() {
+    if (!isEmpty) {
+      worker.postMessage({
+        action: 'reset',
+        streamId,
+      })
+      isEmpty = true
+    }
+  }
+
+  return {
+    isAsync: true,
+
+    get isEmpty() {
+      return isEmpty
+    },
+
+    write(data, callback) {
+      worker.postMessage({
+        action: 'write',
+        id: nextWriteActionId,
+        data,
+        streamId,
+      })
+      pendingWriteActions.push({
+        id: nextWriteActionId,
+        writeCallback: callback,
+        data,
+      })
+      isEmpty = false
+      nextWriteActionId += 1
+    },
+
+    finish(callback) {
+      sendResetIfNeeded()
+
+      if (!pendingWriteActions.length) {
+        callback(consumeResult())
+      } else {
+        // Make sure we do not call any write callback
+        pendingWriteActions.forEach((pendingWriteAction) => {
+          delete pendingWriteAction.writeCallback
+        })
+
+        // Wait for the last action to finish before calling the finish callback
+        pendingWriteActions[pendingWriteActions.length - 1].finishCallback = () => callback(consumeResult())
+      }
+    },
+
+    finishSync() {
+      sendResetIfNeeded()
+      const pendingData = pendingWriteActions.map((pendingWriteAction) => pendingWriteAction.data).join('')
+      // Ignore all pending write actions responses from the worker
+      pendingWriteActions.length = 0
+      return { ...consumeResult(), pendingData }
+    },
+
+    estimateEncodedBytesCount(data) {
+      // This is a rough estimation of the data size once it'll be encoded by deflate. We observed
+      // that if it's the first chunk of data pushed to the stream, the ratio is lower (3-4), but
+      // after that the ratio is greater (10+). We chose 8 here, which (on average) seems to produce
+      // requests of the expected size.
+      return data.length / 8
+    },
+
+    stop() {
+      removeMessageListener()
+    },
+  }
+}

package/src/domain/deflate/deflateWorker.ts

@@ -0,0 +1,152 @@
+import type { DeflateWorker, DeflateWorkerResponse } from '@datadog/browser-core'
+import { addTelemetryError, display, addEventListener, setTimeout, ONE_SECOND, mockable } from '@datadog/browser-core'
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+import { reportScriptLoadingError } from '../scriptLoadingError'
+
+export const INITIALIZATION_TIME_OUT_DELAY = 30 * ONE_SECOND
+
+declare const __BUILD_ENV__WORKER_STRING__: string
+
+/**
+ * In order to be sure that the worker is correctly working, we need a round trip of
+ * initialization messages, making the creation asynchronous.
+ * These worker lifecycle states handle this case.
+ */
+export const enum DeflateWorkerStatus {
+  Nil,
+  Loading,
+  Error,
+  Initialized,
+}
+
+type DeflateWorkerState =
+  | {
+      status: DeflateWorkerStatus.Nil
+    }
+  | {
+      status: DeflateWorkerStatus.Loading
+      worker: DeflateWorker
+      stop: () => void
+      initializationFailureCallbacks: Array<() => void>
+    }
+  | {
+      status: DeflateWorkerStatus.Error
+    }
+  | {
+      status: DeflateWorkerStatus.Initialized
+      worker: DeflateWorker
+      stop: () => void
+      version: string
+    }
+
+export type CreateDeflateWorker = typeof createDeflateWorker
+
+export function createDeflateWorker(configuration: RumConfiguration): DeflateWorker {
+  return new Worker(configuration.workerUrl || URL.createObjectURL(new Blob([__BUILD_ENV__WORKER_STRING__])))
+}
+
+let state: DeflateWorkerState = { status: DeflateWorkerStatus.Nil }
+
+export function startDeflateWorker(
+  configuration: RumConfiguration,
+  source: string,
+  onInitializationFailure: () => void
+) {
+  if (state.status === DeflateWorkerStatus.Nil) {
+    // doStartDeflateWorker updates the state to "loading" or "error"
+    doStartDeflateWorker(configuration, source)
+  }
+
+  switch (state.status) {
+    case DeflateWorkerStatus.Loading:
+      state.initializationFailureCallbacks.push(onInitializationFailure)
+      return state.worker
+    case DeflateWorkerStatus.Initialized:
+      return state.worker
+  }
+}
+
+export function resetDeflateWorkerState() {
+  if (state.status === DeflateWorkerStatus.Initialized || state.status === DeflateWorkerStatus.Loading) {
+    state.stop()
+  }
+  state = { status: DeflateWorkerStatus.Nil }
+}
+
+export function getDeflateWorkerStatus() {
+  return state.status
+}
+
+/**
+ * Starts the deflate worker and handle messages and errors
+ *
+ * The spec allow browsers to handle worker errors differently:
+ * - Chromium throws an exception
+ * - Firefox fires an error event
+ *
+ * more details: https://bugzilla.mozilla.org/show_bug.cgi?id=1736865#c2
+ */
+export function doStartDeflateWorker(configuration: RumConfiguration, source: string) {
+  try {
+    const worker = mockable(createDeflateWorker)(configuration)
+    const { stop: removeErrorListener } = addEventListener(configuration, worker, 'error', (error) => {
+      onError(configuration, source, error)
+    })
+    const { stop: removeMessageListener } = addEventListener(
+      configuration,
+      worker,
+      'message',
+      ({ data }: MessageEvent<DeflateWorkerResponse>) => {
+        if (data.type === 'errored') {
+          onError(configuration, source, data.error, data.streamId)
+        } else if (data.type === 'initialized') {
+          onInitialized(data.version)
+        }
+      }
+    )
+    worker.postMessage({ action: 'init' })
+    setTimeout(() => onTimeout(source), INITIALIZATION_TIME_OUT_DELAY)
+    const stop = () => {
+      removeErrorListener()
+      removeMessageListener()
+    }
+
+    state = { status: DeflateWorkerStatus.Loading, worker, stop, initializationFailureCallbacks: [] }
+  } catch (error) {
+    onError(configuration, source, error)
+  }
+}
+
+function onTimeout(source: string) {
+  if (state.status === DeflateWorkerStatus.Loading) {
+    display.error(`${source} failed to start: a timeout occurred while initializing the Worker`)
+    state.initializationFailureCallbacks.forEach((callback) => callback())
+    state = { status: DeflateWorkerStatus.Error }
+  }
+}
+
+function onInitialized(version: string) {
+  if (state.status === DeflateWorkerStatus.Loading) {
+    state = { status: DeflateWorkerStatus.Initialized, worker: state.worker, stop: state.stop, version }
+  }
+}
+
+function onError(configuration: RumConfiguration, source: string, error: unknown, streamId?: number) {
+  if (state.status === DeflateWorkerStatus.Loading || state.status === DeflateWorkerStatus.Nil) {
+    reportScriptLoadingError({
+      configuredUrl: configuration.workerUrl,
+      error,
+      source,
+      scriptType: 'worker',
+    })
+    if (state.status === DeflateWorkerStatus.Loading) {
+      state.initializationFailureCallbacks.forEach((callback) => callback())
+    }
+    state = { status: DeflateWorkerStatus.Error }
+  } else {
+    addTelemetryError(error, {
+      worker_version: state.status === DeflateWorkerStatus.Initialized && state.version,
+      stream_id: streamId,
+    })
+  }
+}

package/src/domain/deflate/index.ts

@@ -0,0 +1,9 @@
+export { createDeflateEncoder } from './deflateEncoder'
+export type { CreateDeflateWorker } from './deflateWorker'
+export {
+  startDeflateWorker,
+  DeflateWorkerStatus,
+  getDeflateWorkerStatus,
+  resetDeflateWorkerState,
+  createDeflateWorker,
+} from './deflateWorker'

package/src/domain/getSessionReplayLink.ts

@@ -0,0 +1,40 @@
+import type { RumConfiguration, RumSessionManager, ViewHistory, RumSession } from '@datadog/browser-rum-core'
+import { getSessionReplayUrl, SessionReplayState } from '@datadog/browser-rum-core'
+import { isBrowserSupported } from '../boot/isBrowserSupported'
+
+export function getSessionReplayLink(
+  configuration: RumConfiguration,
+  sessionManager: RumSessionManager,
+  viewHistory: ViewHistory,
+  isRecordingStarted: boolean
+): string | undefined {
+  const session = sessionManager.findTrackedSession()
+  const errorType = getErrorType(session, isRecordingStarted)
+  const viewContext = viewHistory.findView()
+
+  return getSessionReplayUrl(configuration, {
+    viewContext,
+    errorType,
+    session,
+  })
+}
+
+function getErrorType(session: RumSession | undefined, isRecordingStarted: boolean) {
+  if (!isBrowserSupported()) {
+    return 'browser-not-supported'
+  }
+  if (!session) {
+    // possibilities:
+    // - rum sampled out
+    // - session expired (edge case)
+    return 'rum-not-tracked'
+  }
+  if (session.sessionReplay === SessionReplayState.OFF) {
+    // possibilities
+    // - replay sampled out
+    return 'incorrect-session-plan'
+  }
+  if (!isRecordingStarted) {
+    return 'replay-not-started'
+  }
+}

package/src/domain/profiling/actionHistory.ts

@@ -0,0 +1,65 @@
+import type { ClocksState, Duration } from '@datadog/browser-core'
+import { addDuration, createValueHistory, SESSION_TIME_OUT_DELAY } from '@datadog/browser-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { LifeCycleEventType } from '@datadog/browser-rum-core'
+
+export const ACTION_ID_HISTORY_TIME_OUT_DELAY = SESSION_TIME_OUT_DELAY
+
+export interface ActionContext {
+  id: string
+  label: string
+  duration?: Duration
+  startClocks: ClocksState
+}
+
+export function createActionHistory(lifeCycle: LifeCycle) {
+  const history = createValueHistory<ActionContext>({
+    expireDelay: ACTION_ID_HISTORY_TIME_OUT_DELAY,
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.ACTION_STARTED, (actionStart) => {
+    history.add(
+      {
+        id: actionStart.id,
+        // The label is temporarily empty since we need to account for customers that might
+        // redact the action name in the beforeSend callback. We will either try to do patch this
+        // behavior, or remove the label field entirely.
+        label: '',
+        startClocks: actionStart.startClocks,
+        duration: undefined,
+      },
+      actionStart.startClocks.relative
+    )
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, ({ rawRumEvent, startClocks, duration }) => {
+    if (rawRumEvent.type === 'action') {
+      const historyEntry = history
+        .getEntries(startClocks.relative)
+        .find((entry) => entry.value.id === rawRumEvent.action.id)
+      const durationForEntry = duration ?? (0 as Duration)
+
+      if (historyEntry) {
+        historyEntry.value.duration = durationForEntry
+        historyEntry.close(addDuration(startClocks.relative, durationForEntry))
+      } else {
+        history
+          .add(
+            {
+              id: rawRumEvent.action.id,
+              // The label is temporarily empty since we need to account for customers that might
+              // redact the action name in the beforeSend callback. We will either try to do patch this
+              // behavior, or remove the label field entirely.
+              label: '',
+              startClocks,
+              duration,
+            },
+            startClocks.relative
+          )
+          .close(addDuration(startClocks.relative, durationForEntry))
+      }
+    }
+  })
+
+  return history
+}

package/src/domain/profiling/longTaskHistory.ts

@@ -0,0 +1,40 @@
+import type { ClocksState, Duration } from '@datadog/browser-core'
+import { addDuration, createValueHistory, SESSION_TIME_OUT_DELAY } from '@datadog/browser-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { RumPerformanceEntryType, LifeCycleEventType, RumLongTaskEntryType } from '@datadog/browser-rum-core'
+
+export const LONG_TASK_ID_HISTORY_EXPIRE_DELAY = SESSION_TIME_OUT_DELAY
+
+export interface LongTaskContext {
+  id: string
+  startClocks: ClocksState
+  duration: Duration
+  entryType: RumPerformanceEntryType.LONG_ANIMATION_FRAME | RumPerformanceEntryType.LONG_TASK
+}
+
+export function createLongTaskHistory(lifeCycle: LifeCycle) {
+  const history = createValueHistory<LongTaskContext>({
+    expireDelay: LONG_TASK_ID_HISTORY_EXPIRE_DELAY,
+  })
+
+  lifeCycle.subscribe(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, ({ rawRumEvent, startClocks, duration }) => {
+    if (rawRumEvent.type === 'long_task') {
+      history
+        .add(
+          {
+            id: rawRumEvent.long_task.id,
+            startClocks,
+            duration: duration!,
+            entryType:
+              rawRumEvent.long_task.entry_type === RumLongTaskEntryType.LONG_TASK
+                ? RumPerformanceEntryType.LONG_TASK
+                : RumPerformanceEntryType.LONG_ANIMATION_FRAME,
+          },
+          startClocks.relative
+        )
+        .close(addDuration(startClocks.relative, duration!))
+    }
+  })
+
+  return history
+}