@depup/datadog__browser-rum 6.31.0-depup.0

package/src/domain/record/trackers/trackViewportResize.ts

@@ -0,0 +1,69 @@
+import { throttle, DOM_EVENT, addEventListeners, timeStampNow, noop } from '@datadog/browser-core'
+import type { ViewportDimension } from '@datadog/browser-rum-core'
+import { initViewportObservable } from '@datadog/browser-rum-core'
+import { IncrementalSource, RecordType } from '../../../types'
+import type { BrowserIncrementalSnapshotRecord, ViewportResizeData, VisualViewportRecord } from '../../../types'
+import { getVisualViewport } from '../viewports'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { EmitRecordCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import type { Tracker } from './tracker.types'
+
+const VISUAL_VIEWPORT_OBSERVER_THRESHOLD = 200
+
+export function trackViewportResize(
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  const viewportResizeSubscription = initViewportObservable(scope.configuration).subscribe(
+    (data: ViewportDimension) => {
+      emitRecord(assembleIncrementalSnapshot<ViewportResizeData>(IncrementalSource.ViewportResize, data))
+    }
+  )
+
+  return {
+    stop: () => {
+      viewportResizeSubscription.unsubscribe()
+    },
+  }
+}
+
+export function trackVisualViewportResize(
+  emitRecord: EmitRecordCallback<VisualViewportRecord>,
+  scope: RecordingScope
+): Tracker {
+  const visualViewport = window.visualViewport
+  if (!visualViewport) {
+    return { stop: noop }
+  }
+  const { throttled: updateDimension, cancel: cancelThrottle } = throttle(
+    () => {
+      emitRecord({
+        data: getVisualViewport(visualViewport),
+        type: RecordType.VisualViewport,
+        timestamp: timeStampNow(),
+      })
+    },
+    VISUAL_VIEWPORT_OBSERVER_THRESHOLD,
+    {
+      trailing: false,
+    }
+  )
+  const { stop: removeListener } = addEventListeners(
+    scope.configuration,
+    visualViewport,
+    [DOM_EVENT.RESIZE, DOM_EVENT.SCROLL],
+    updateDimension,
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+
+  return {
+    stop: () => {
+      removeListener()
+      cancelThrottle()
+    },
+  }
+}

package/src/domain/record/trackers/tracker.types.ts

@@ -0,0 +1,3 @@
+export interface Tracker {
+  stop: () => void
+}

package/src/domain/record/viewports.ts

@@ -0,0 +1,68 @@
+/**
+ * Browsers have not standardized various dimension properties. Mobile devices typically report
+ * dimensions in reference to the visual viewport, while desktop uses the layout viewport. For example,
+ * Mobile Chrome will change innerWidth when a pinch zoom takes place, while Chrome Desktop (mac) will not.
+ *
+ * With the new Viewport API, we now calculate and normalize dimension properties to the layout viewport.
+ * If the VisualViewport API is not supported by a browser, it isn't reasonably possible to detect or normalize
+ * which viewport is being measured. Therefore these exported functions will fallback to assuming that the layout
+ * viewport is being measured by the browser
+ */
+
+import type { VisualViewportRecord } from '../../types'
+
+// Scrollbar widths vary across properties on different devices and browsers
+const TOLERANCE = 25
+
+/**
+ * Use the Visual Viewport API's properties to measure scrollX/Y in reference to the layout viewport
+ * in order to determine if window.scrollX/Y is measuring the layout or visual viewport.
+ * This finding corresponds to which viewport mouseEvent.clientX/Y and window.innerWidth/Height measures.
+ */
+function isVisualViewportFactoredIn(visualViewport: VisualViewport) {
+  return (
+    Math.abs(visualViewport.pageTop - visualViewport.offsetTop - window.scrollY) > TOLERANCE ||
+    Math.abs(visualViewport.pageLeft - visualViewport.offsetLeft - window.scrollX) > TOLERANCE
+  )
+}
+
+interface LayoutCoordinates {
+  layoutViewportX: number
+  layoutViewportY: number
+  visualViewportX: number
+  visualViewportY: number
+}
+
+export const convertMouseEventToLayoutCoordinates = (clientX: number, clientY: number): LayoutCoordinates => {
+  const visualViewport = window.visualViewport
+  const normalized: LayoutCoordinates = {
+    layoutViewportX: clientX,
+    layoutViewportY: clientY,
+    visualViewportX: clientX,
+    visualViewportY: clientY,
+  }
+
+  if (!visualViewport) {
+    // On old browsers, we cannot normalize, so fallback to clientX/Y
+    return normalized
+  } else if (isVisualViewportFactoredIn(visualViewport)) {
+    // Typically Mobile Devices
+    normalized.layoutViewportX = Math.round(clientX + visualViewport.offsetLeft)
+    normalized.layoutViewportY = Math.round(clientY + visualViewport.offsetTop)
+  } else {
+    // Typically Desktop Devices
+    normalized.visualViewportX = Math.round(clientX - visualViewport.offsetLeft)
+    normalized.visualViewportY = Math.round(clientY - visualViewport.offsetTop)
+  }
+  return normalized
+}
+
+export const getVisualViewport = (visualViewport: VisualViewport): VisualViewportRecord['data'] => ({
+  scale: visualViewport.scale,
+  offsetLeft: visualViewport.offsetLeft,
+  offsetTop: visualViewport.offsetTop,
+  pageLeft: visualViewport.pageLeft,
+  pageTop: visualViewport.pageTop,
+  height: visualViewport.height,
+  width: visualViewport.width,
+})

package/src/domain/replayStats.ts

@@ -0,0 +1,61 @@
+import type { ReplayStats } from '@datadog/browser-rum-core'
+
+export const MAX_STATS_HISTORY = 1000
+let statsPerView: Map<string, ReplayStats> | undefined
+
+export function getSegmentsCount(viewId: string) {
+  return getOrCreateReplayStats(viewId).segments_count
+}
+
+export function addSegment(viewId: string) {
+  getOrCreateReplayStats(viewId).segments_count += 1
+}
+
+export function addRecord(viewId: string) {
+  getOrCreateReplayStats(viewId).records_count += 1
+}
+
+export function addWroteData(viewId: string, additionalBytesCount: number) {
+  getOrCreateReplayStats(viewId).segments_total_raw_size += additionalBytesCount
+}
+
+export function getReplayStats(viewId: string) {
+  return statsPerView?.get(viewId)
+}
+
+export function resetReplayStats() {
+  statsPerView = undefined
+}
+
+function getOrCreateReplayStats(viewId: string) {
+  if (!statsPerView) {
+    statsPerView = new Map()
+  }
+
+  let replayStats: ReplayStats
+  if (statsPerView.has(viewId)) {
+    replayStats = statsPerView.get(viewId)!
+  } else {
+    replayStats = {
+      records_count: 0,
+      segments_count: 0,
+      segments_total_raw_size: 0,
+    }
+    statsPerView.set(viewId, replayStats)
+    if (statsPerView.size > MAX_STATS_HISTORY) {
+      deleteOldestStats()
+    }
+  }
+
+  return replayStats
+}
+
+function deleteOldestStats() {
+  if (!statsPerView) {
+    return
+  }
+  const toDelete = statsPerView.keys().next().value
+  if (toDelete) {
+    statsPerView.delete(toDelete)
+  }
+}

package/src/domain/scriptLoadingError.ts

@@ -0,0 +1,36 @@
+import { addTelemetryError, display, DOCS_ORIGIN } from '@datadog/browser-core'
+
+export function reportScriptLoadingError({
+  configuredUrl,
+  error,
+  source,
+  scriptType,
+}: {
+  configuredUrl?: string | undefined
+  error: unknown
+  source: string
+  scriptType: 'module' | 'worker'
+}) {
+  display.error(`${source} failed to start: an error occurred while initializing the ${scriptType}:`, error)
+  if (error instanceof Event || (error instanceof Error && isMessageCspRelated(error.message))) {
+    let baseMessage
+    if (configuredUrl) {
+      baseMessage = `Please make sure the ${scriptType} URL ${configuredUrl} is correct and CSP is correctly configured.`
+    } else {
+      baseMessage = 'Please make sure CSP is correctly configured.'
+    }
+    display.error(
+      `${baseMessage} See documentation at ${DOCS_ORIGIN}/integrations/content_security_policy_logs/#use-csp-with-real-user-monitoring-and-session-replay`
+    )
+  } else if (scriptType === 'worker') {
+    addTelemetryError(error)
+  }
+}
+
+function isMessageCspRelated(message: string) {
+  return (
+    message.includes('Content Security Policy') ||
+    // Related to `require-trusted-types-for` CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+    message.includes("requires 'TrustedScriptURL'")
+  )
+}

package/src/domain/segmentCollection/buildReplayPayload.ts

@@ -0,0 +1,52 @@
+import type { Payload, Uint8ArrayBuffer } from '@datadog/browser-core'
+import type { BrowserSegmentMetadata } from '../../types'
+import type { SerializationMetric, SerializationStats } from '../record'
+
+export type BrowserSegmentMetadataAndSegmentSizes = BrowserSegmentMetadata & {
+  raw_segment_size: number
+  compressed_segment_size: number
+}
+
+export type ReplayPayload = Payload & {
+  cssText: SerializationMetric
+  isFullSnapshot: boolean
+  rawSize: number
+  recordCount: number
+  serializationDuration: SerializationMetric
+}
+
+export function buildReplayPayload(
+  data: Uint8ArrayBuffer,
+  metadata: BrowserSegmentMetadata,
+  stats: SerializationStats,
+  rawSegmentBytesCount: number
+): ReplayPayload {
+  const formData = new FormData()
+
+  formData.append(
+    'segment',
+    new Blob([data], {
+      type: 'application/octet-stream',
+    }),
+    `${metadata.session.id}-${metadata.start}`
+  )
+
+  const metadataAndSegmentSizes: BrowserSegmentMetadataAndSegmentSizes = {
+    raw_segment_size: rawSegmentBytesCount,
+    compressed_segment_size: data.byteLength,
+    ...metadata,
+  }
+
+  const serializedMetadataAndSegmentSizes = JSON.stringify(metadataAndSegmentSizes)
+  formData.append('event', new Blob([serializedMetadataAndSegmentSizes], { type: 'application/json' }))
+
+  return {
+    data: formData,
+    bytesCount: data.byteLength,
+    cssText: stats.cssText,
+    isFullSnapshot: metadata.index_in_view === 0,
+    rawSize: rawSegmentBytesCount,
+    recordCount: metadata.records_count,
+    serializationDuration: stats.serializationDuration,
+  }
+}

package/src/domain/segmentCollection/index.ts

@@ -0,0 +1,4 @@
+export { startSegmentCollection, setSegmentBytesLimit } from './segmentCollection'
+export { SEGMENT_BYTES_LIMIT } from './segmentCollection'
+export type { BrowserSegmentMetadataAndSegmentSizes, ReplayPayload } from './buildReplayPayload'
+export { startSegmentTelemetry } from './startSegmentTelemetry'

package/src/domain/segmentCollection/segment.ts

@@ -0,0 +1,79 @@
+import type { Encoder, EncoderResult, Uint8ArrayBuffer } from '@datadog/browser-core'
+import type { BrowserRecord, BrowserSegmentMetadata, CreationReason, SegmentContext } from '../../types'
+import { RecordType } from '../../types'
+import * as replayStats from '../replayStats'
+import type { SerializationStats } from '../record'
+import { aggregateSerializationStats, createSerializationStats } from '../record'
+
+export type FlushReason = Exclude<CreationReason, 'init'> | 'stop'
+export type FlushCallback = (
+  metadata: BrowserSegmentMetadata,
+  stats: SerializationStats,
+  encoderResult: EncoderResult<Uint8ArrayBuffer>
+) => void
+export type AddRecordCallback = (encodedBytesCount: number) => void
+
+export interface Segment {
+  addRecord: (record: BrowserRecord, callback: AddRecordCallback) => void
+  addStats: (stats: SerializationStats) => void
+  flush: (callback: FlushCallback) => void
+}
+
+export function createSegment({
+  context,
+  creationReason,
+  encoder,
+}: {
+  context: SegmentContext
+  creationReason: CreationReason
+  encoder: Encoder<Uint8ArrayBuffer>
+}): Segment {
+  let encodedBytesCount = 0
+  const viewId = context.view.id
+  const indexInView = replayStats.getSegmentsCount(viewId)
+  const metadata: BrowserSegmentMetadata = {
+    start: Infinity,
+    end: -Infinity,
+    creation_reason: creationReason,
+    records_count: 0,
+    has_full_snapshot: false,
+    index_in_view: indexInView,
+    source: 'browser' as const,
+    ...context,
+  }
+
+  const serializationStats = createSerializationStats()
+  replayStats.addSegment(viewId)
+
+  function addRecord(record: BrowserRecord, callback: AddRecordCallback): void {
+    metadata.start = Math.min(metadata.start, record.timestamp)
+    metadata.end = Math.max(metadata.end, record.timestamp)
+    metadata.records_count += 1
+    metadata.has_full_snapshot ||=
+      record.type === RecordType.FullSnapshot || (record.type === RecordType.Change && metadata.index_in_view === 0)
+
+    const prefix = encoder.isEmpty ? '{"records":[' : ','
+    encoder.write(prefix + JSON.stringify(record), (additionalEncodedBytesCount) => {
+      encodedBytesCount += additionalEncodedBytesCount
+      callback(encodedBytesCount)
+    })
+  }
+
+  function addStats(stats: SerializationStats): void {
+    aggregateSerializationStats(serializationStats, stats)
+  }
+
+  function flush(callback: FlushCallback) {
+    if (encoder.isEmpty) {
+      throw new Error('Empty segment flushed')
+    }
+
+    encoder.write(`],${JSON.stringify(metadata).slice(1)}\n`)
+    encoder.finish((encoderResult) => {
+      replayStats.addWroteData(metadata.view.id, encoderResult.rawBytesCount)
+      callback(metadata, serializationStats, encoderResult)
+    })
+  }
+
+  return { addRecord, addStats, flush }
+}

package/src/domain/segmentCollection/segmentCollection.ts

@@ -0,0 +1,200 @@
+import type { DeflateEncoder, HttpRequest, TimeoutId } from '@datadog/browser-core'
+import { isPageExitReason, ONE_SECOND, clearTimeout, setTimeout } from '@datadog/browser-core'
+import type { LifeCycle, ViewHistory, RumSessionManager, RumConfiguration } from '@datadog/browser-rum-core'
+import { LifeCycleEventType } from '@datadog/browser-rum-core'
+import type { BrowserRecord, CreationReason, SegmentContext } from '../../types'
+import type { SerializationStats } from '../record'
+import type { ReplayPayload } from './buildReplayPayload'
+import { buildReplayPayload } from './buildReplayPayload'
+import type { FlushReason, Segment } from './segment'
+import { createSegment } from './segment'
+
+export const SEGMENT_DURATION_LIMIT = 5 * ONE_SECOND
+/**
+ * beacon payload max queue size implementation is 64kb
+ * ensure that we leave room for logs, rum and potential other users
+ */
+export let SEGMENT_BYTES_LIMIT = 60_000
+
+// Segments are the main data structure for session replays. They contain context information used
+// for indexing or UI needs, and a list of records (RRWeb 'events', renamed to avoid confusing
+// namings). They are stored without any processing from the intake, and fetched one after the
+// other while a session is being replayed. Their encoding (deflate) are carefully crafted to allow
+// concatenating multiple segments together. Segments have a size overhead (metadata), so our goal is to
+// build segments containing as many records as possible while complying with the various flush
+// strategies to guarantee a good replay quality.
+//
+// When the recording starts, a segment is initially created.  The segment is flushed (finalized and
+// sent) based on various events (non-exhaustive list):
+//
+// * the page visibility change or becomes to unload
+// * the segment duration reaches a limit
+// * the encoded segment bytes count reaches a limit
+// * ...
+//
+// A segment cannot be created without its context.  If the RUM session ends and no session id is
+// available when creating a new segment, records will be ignored, until the session is renewed and
+// a new session id is available.
+//
+// Empty segments (segments with no record) aren't useful and should be ignored.
+//
+// To help investigate session replays issues, each segment is created with a "creation reason",
+// indicating why the session has been created.
+
+interface SegmentCollector {
+  addRecord(this: void, record: BrowserRecord): void
+  addStats(this: void, stats: SerializationStats): void
+  stop(this: void): void
+}
+
+export function startSegmentCollection(
+  lifeCycle: LifeCycle,
+  configuration: RumConfiguration,
+  sessionManager: RumSessionManager,
+  viewHistory: ViewHistory,
+  httpRequest: HttpRequest<ReplayPayload>,
+  encoder: DeflateEncoder
+): SegmentCollector {
+  return doStartSegmentCollection(
+    lifeCycle,
+    () => computeSegmentContext(configuration.applicationId, sessionManager, viewHistory),
+    httpRequest,
+    encoder
+  )
+}
+
+const enum SegmentCollectionStatus {
+  WaitingForInitialRecord,
+  SegmentPending,
+  Stopped,
+}
+type SegmentCollectionState =
+  | {
+      status: SegmentCollectionStatus.WaitingForInitialRecord
+      nextSegmentCreationReason: CreationReason
+    }
+  | {
+      status: SegmentCollectionStatus.SegmentPending
+      segment: Segment
+      expirationTimeoutId: TimeoutId
+    }
+  | {
+      status: SegmentCollectionStatus.Stopped
+    }
+
+export function doStartSegmentCollection(
+  lifeCycle: LifeCycle,
+  getSegmentContext: () => SegmentContext | undefined,
+  httpRequest: HttpRequest<ReplayPayload>,
+  encoder: DeflateEncoder
+): SegmentCollector {
+  let state: SegmentCollectionState = {
+    status: SegmentCollectionStatus.WaitingForInitialRecord,
+    nextSegmentCreationReason: 'init',
+  }
+
+  const { unsubscribe: unsubscribeViewCreated } = lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, () => {
+    flushSegment('view_change')
+  })
+
+  const { unsubscribe: unsubscribePageMayExit } = lifeCycle.subscribe(
+    LifeCycleEventType.PAGE_MAY_EXIT,
+    (pageMayExitEvent) => {
+      flushSegment(pageMayExitEvent.reason as FlushReason)
+    }
+  )
+
+  function flushSegment(flushReason: FlushReason) {
+    if (state.status === SegmentCollectionStatus.SegmentPending) {
+      state.segment.flush((metadata, stats, encoderResult) => {
+        const payload = buildReplayPayload(encoderResult.output, metadata, stats, encoderResult.rawBytesCount)
+
+        if (isPageExitReason(flushReason)) {
+          httpRequest.sendOnExit(payload)
+        } else {
+          httpRequest.send(payload)
+        }
+      })
+      clearTimeout(state.expirationTimeoutId)
+    }
+
+    if (flushReason !== 'stop') {
+      state = {
+        status: SegmentCollectionStatus.WaitingForInitialRecord,
+        nextSegmentCreationReason: flushReason,
+      }
+    } else {
+      state = {
+        status: SegmentCollectionStatus.Stopped,
+      }
+    }
+  }
+
+  return {
+    addRecord: (record: BrowserRecord) => {
+      if (state.status === SegmentCollectionStatus.Stopped) {
+        return
+      }
+
+      if (state.status === SegmentCollectionStatus.WaitingForInitialRecord) {
+        const context = getSegmentContext()
+        if (!context) {
+          return
+        }
+
+        state = {
+          status: SegmentCollectionStatus.SegmentPending,
+          segment: createSegment({ encoder, context, creationReason: state.nextSegmentCreationReason }),
+          expirationTimeoutId: setTimeout(() => {
+            flushSegment('segment_duration_limit')
+          }, SEGMENT_DURATION_LIMIT),
+        }
+      }
+
+      state.segment.addRecord(record, (encodedBytesCount) => {
+        if (encodedBytesCount > SEGMENT_BYTES_LIMIT) {
+          flushSegment('segment_bytes_limit')
+        }
+      })
+    },
+
+    addStats: (stats: SerializationStats) => {
+      if (state.status === SegmentCollectionStatus.SegmentPending) {
+        state.segment.addStats(stats)
+      }
+    },
+
+    stop: () => {
+      flushSegment('stop')
+      unsubscribeViewCreated()
+      unsubscribePageMayExit()
+    },
+  }
+}
+
+export function computeSegmentContext(
+  applicationId: string,
+  sessionManager: RumSessionManager,
+  viewHistory: ViewHistory
+) {
+  const session = sessionManager.findTrackedSession()
+  const viewContext = viewHistory.findView()
+  if (!session || !viewContext) {
+    return undefined
+  }
+  return {
+    application: {
+      id: applicationId,
+    },
+    session: {
+      id: session.id,
+    },
+    view: {
+      id: viewContext.id,
+    },
+  }
+}
+
+export function setSegmentBytesLimit(newSegmentBytesLimit = 60_000) {
+  SEGMENT_BYTES_LIMIT = newSegmentBytesLimit
+}

package/src/domain/segmentCollection/startSegmentTelemetry.ts

@@ -0,0 +1,91 @@
+import type { BandwidthStats, Context, HttpRequestEvent, Observable, Telemetry } from '@datadog/browser-core'
+import { TelemetryMetrics, addTelemetryMetrics, noop } from '@datadog/browser-core'
+import { isFullSnapshotChangeRecordsEnabled, isIncrementalSnapshotChangeRecordsEnabled } from '../record'
+import type { ReplayPayload } from './buildReplayPayload'
+
+interface SegmentMetrics extends Context {
+  cssText: {
+    count: number
+    max: number
+    sum: number
+  }
+  encoding: {
+    fullSnapshot: 'v1' | 'change'
+    incrementalSnapshot: 'v1' | 'change'
+  }
+  isFullSnapshot: boolean
+  ongoingRequests: {
+    count: number
+    totalSize: number
+  }
+  recordCount: number
+  result: 'failure' | 'queue-full' | 'success'
+  serializationDuration: {
+    count: number
+    max: number
+    sum: number
+  }
+  size: {
+    compressed: number
+    raw: number
+  }
+}
+
+export function startSegmentTelemetry(
+  telemetry: Telemetry,
+  requestObservable: Observable<HttpRequestEvent<ReplayPayload>>
+) {
+  if (!telemetry.metricsEnabled) {
+    return { stop: noop }
+  }
+
+  const { unsubscribe } = requestObservable.subscribe((requestEvent) => {
+    if (
+      requestEvent.type === 'failure' ||
+      requestEvent.type === 'queue-full' ||
+      (requestEvent.type === 'success' && requestEvent.payload.isFullSnapshot)
+    ) {
+      const metrics = createSegmentMetrics(requestEvent.type, requestEvent.bandwidth, requestEvent.payload)
+      // monitor-until: 2026-07-01
+      addTelemetryMetrics(TelemetryMetrics.SEGMENT_METRICS_TELEMETRY_NAME, { metrics })
+    }
+  })
+
+  return {
+    stop: unsubscribe,
+  }
+}
+
+function createSegmentMetrics(
+  result: SegmentMetrics['result'],
+  bandwidthStats: BandwidthStats,
+  payload: ReplayPayload
+): SegmentMetrics {
+  return {
+    cssText: {
+      count: payload.cssText.count,
+      max: payload.cssText.max,
+      sum: payload.cssText.sum,
+    },
+    encoding: {
+      fullSnapshot: isFullSnapshotChangeRecordsEnabled() ? 'change' : 'v1',
+      incrementalSnapshot: isIncrementalSnapshotChangeRecordsEnabled() ? 'change' : 'v1',
+    },
+    isFullSnapshot: payload.isFullSnapshot,
+    ongoingRequests: {
+      count: bandwidthStats.ongoingRequestCount,
+      totalSize: bandwidthStats.ongoingByteCount,
+    },
+    recordCount: payload.recordCount,
+    result,
+    serializationDuration: {
+      count: payload.serializationDuration.count,
+      max: payload.serializationDuration.max,
+      sum: payload.serializationDuration.sum,
+    },
+    size: {
+      compressed: payload.bytesCount,
+      raw: payload.rawSize,
+    },
+  }
+}

package/src/domain/startRecordBridge.ts

@@ -0,0 +1,17 @@
+import { getEventBridge } from '@datadog/browser-core'
+import type { ViewHistory } from '@datadog/browser-rum-core'
+import type { BrowserRecord } from '../types'
+
+export function startRecordBridge(viewHistory: ViewHistory) {
+  const bridge = getEventBridge<'record', BrowserRecord>()!
+
+  return {
+    addRecord: (record: BrowserRecord) => {
+      // Get the current active view, not at the time of the record, aligning with the segment logic.
+      // This approach could potentially associate the record to an incorrect view, in case the record date is in the past (e.g. frustration records).
+      // However the risk is minimal. We could address the issue when potential negative impact are identified.
+      const view = viewHistory.findView()!
+      bridge.send('record', record, view.id)
+    },
+  }
+}