@depup/datadog__browser-rum 6.31.0-depup.0

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

@@ -0,0 +1,39 @@
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { ActionType, RumEventType, LifeCycleEventType } from '@datadog/browser-rum-core'
+import type { FrustrationRecord } from '../../../types'
+import { RecordType } from '../../../types'
+import type { EmitRecordCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import type { Tracker } from './tracker.types'
+
+export function trackFrustration(
+  lifeCycle: LifeCycle,
+  emitRecord: EmitRecordCallback<FrustrationRecord>,
+  scope: RecordingScope
+): Tracker {
+  const frustrationSubscription = lifeCycle.subscribe(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, (data) => {
+    if (
+      data.rawRumEvent.type === RumEventType.ACTION &&
+      data.rawRumEvent.action.type === ActionType.CLICK &&
+      data.rawRumEvent.action.frustration?.type?.length &&
+      'events' in data.domainContext &&
+      data.domainContext.events &&
+      data.domainContext.events.length
+    ) {
+      emitRecord({
+        timestamp: data.rawRumEvent.date,
+        type: RecordType.FrustrationRecord,
+        data: {
+          frustrationTypes: data.rawRumEvent.action.frustration.type,
+          recordIds: data.domainContext.events.map((e) => scope.eventIds.getOrInsert(e)),
+        },
+      })
+    }
+  })
+
+  return {
+    stop: () => {
+      frustrationSubscription.unsubscribe()
+    },
+  }
+}

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

@@ -0,0 +1,128 @@
+import { instrumentSetter, DOM_EVENT, addEventListeners, noop } from '@datadog/browser-core'
+import { NodePrivacyLevel, getNodePrivacyLevel, shouldMaskNode } from '@datadog/browser-rum-core'
+import { IncrementalSource } from '../../../types'
+import type { InputData, InputState } from '../../../types'
+import { getEventTarget } from '../eventsUtils'
+import type { RecordingScope } from '../recordingScope'
+import { getElementInputValue } from '../serialization'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+export function trackInput(
+  target: Document | ShadowRoot,
+  emitRecord: EmitRecordCallback,
+  scope: RecordingScope
+): Tracker {
+  const defaultPrivacyLevel = scope.configuration.defaultPrivacyLevel
+  const lastInputStateMap: WeakMap<Node, InputState> = new WeakMap()
+
+  const isShadowRoot = target !== document
+
+  const { stop: stopEventListeners } = addEventListeners(
+    scope.configuration,
+    target,
+    // The 'input' event bubbles across shadow roots, so we don't have to listen for it on shadow
+    // roots since it will be handled by the event listener that we did add to the document. Only
+    // the 'change' event is blocked and needs to be handled on shadow roots.
+    isShadowRoot ? [DOM_EVENT.CHANGE] : [DOM_EVENT.INPUT, DOM_EVENT.CHANGE],
+    (event) => {
+      const target = getEventTarget(event)
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+      ) {
+        onElementChange(target)
+      }
+    },
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+
+  let stopPropertySetterInstrumentation: () => void
+  if (!isShadowRoot) {
+    const instrumentationStoppers = [
+      instrumentSetter(HTMLInputElement.prototype, 'value', onElementChange),
+      instrumentSetter(HTMLInputElement.prototype, 'checked', onElementChange),
+      instrumentSetter(HTMLSelectElement.prototype, 'value', onElementChange),
+      instrumentSetter(HTMLTextAreaElement.prototype, 'value', onElementChange),
+      instrumentSetter(HTMLSelectElement.prototype, 'selectedIndex', onElementChange),
+    ]
+    stopPropertySetterInstrumentation = () => {
+      instrumentationStoppers.forEach((stopper) => stopper.stop())
+    }
+  } else {
+    stopPropertySetterInstrumentation = noop
+  }
+
+  return {
+    stop: () => {
+      stopPropertySetterInstrumentation()
+      stopEventListeners()
+    },
+  }
+
+  function onElementChange(target: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) {
+    const nodePrivacyLevel = getNodePrivacyLevel(target, defaultPrivacyLevel)
+    if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+      return
+    }
+
+    const type = target.type
+
+    let inputState: InputState
+    if (type === 'radio' || type === 'checkbox') {
+      if (shouldMaskNode(target, nodePrivacyLevel)) {
+        return
+      }
+      inputState = { isChecked: (target as HTMLInputElement).checked }
+    } else {
+      const value = getElementInputValue(target, nodePrivacyLevel)
+      if (value === undefined) {
+        return
+      }
+      inputState = { text: value }
+    }
+
+    // Can be multiple changes on the same node within the same batched mutation observation.
+    createRecordIfStateChanged(target, inputState)
+
+    // If a radio was checked, other radios with the same name attribute will be unchecked.
+    const name = target.name
+    if (type === 'radio' && name && (target as HTMLInputElement).checked) {
+      document.querySelectorAll(`input[type="radio"][name="${CSS.escape(name)}"]`).forEach((el: Element) => {
+        if (el !== target) {
+          // TODO: Consider the privacy implications for various differing input privacy levels
+          createRecordIfStateChanged(el, { isChecked: false })
+        }
+      })
+    }
+  }
+
+  /**
+   * There can be multiple changes on the same node within the same batched mutation observation.
+   */
+  function createRecordIfStateChanged(target: Node, inputState: InputState) {
+    const id = scope.nodeIds.get(target)
+    if (id === undefined) {
+      return
+    }
+    const lastInputState = lastInputStateMap.get(target)
+    if (
+      !lastInputState ||
+      (lastInputState as { text?: string }).text !== (inputState as { text?: string }).text ||
+      (lastInputState as { isChecked?: boolean }).isChecked !== (inputState as { isChecked?: boolean }).isChecked
+    ) {
+      lastInputStateMap.set(target, inputState)
+      emitRecord(
+        assembleIncrementalSnapshot<InputData>(IncrementalSource.Input, {
+          id,
+          ...inputState,
+        })
+      )
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import { DOM_EVENT, addEventListeners } from '@datadog/browser-core'
+import { NodePrivacyLevel, getNodePrivacyLevel } from '@datadog/browser-rum-core'
+import type { MediaInteractionData, BrowserIncrementalSnapshotRecord } from '../../../types'
+import { IncrementalSource, MediaInteractionType } from '../../../types'
+import { getEventTarget } from '../eventsUtils'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { EmitRecordCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import type { Tracker } from './tracker.types'
+
+export function trackMediaInteraction(
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  return addEventListeners(
+    scope.configuration,
+    document,
+    [DOM_EVENT.PLAY, DOM_EVENT.PAUSE],
+    (event) => {
+      const target = getEventTarget(event)
+      if (!target) {
+        return
+      }
+      const id = scope.nodeIds.get(target)
+      if (
+        id === undefined ||
+        getNodePrivacyLevel(target, scope.configuration.defaultPrivacyLevel) === NodePrivacyLevel.HIDDEN
+      ) {
+        return
+      }
+      emitRecord(
+        assembleIncrementalSnapshot<MediaInteractionData>(IncrementalSource.MediaInteraction, {
+          id,
+          type: event.type === DOM_EVENT.PLAY ? MediaInteractionType.Play : MediaInteractionType.Pause,
+        })
+      )
+    },
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+}

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

@@ -0,0 +1,74 @@
+import { addEventListeners, DOM_EVENT } from '@datadog/browser-core'
+import { getNodePrivacyLevel, NodePrivacyLevel } from '@datadog/browser-rum-core'
+import type { MouseInteraction, MouseInteractionData, BrowserIncrementalSnapshotRecord } from '../../../types'
+import { IncrementalSource, MouseInteractionType } from '../../../types'
+import { assembleIncrementalSnapshot } from '../assembly'
+import { getEventTarget } from '../eventsUtils'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback } from '../record.types'
+import { tryToComputeCoordinates } from './trackMove'
+import type { Tracker } from './tracker.types'
+
+const eventTypeToMouseInteraction = {
+  // Listen for pointerup DOM events instead of mouseup for MouseInteraction/MouseUp records. This
+  // allows to reference such records from Frustration records.
+  //
+  // In the context of supporting Mobile Session Replay, we introduced `PointerInteraction` records
+  // used by the Mobile SDKs in place of `MouseInteraction`. In the future, we should replace
+  // `MouseInteraction` by `PointerInteraction` in the Browser SDK so we have an uniform way to
+  // convey such interaction. This would cleanly solve the issue since we would have
+  // `PointerInteraction/Up` records that we could reference from `Frustration` records.
+  [DOM_EVENT.POINTER_UP]: MouseInteractionType.MouseUp,
+
+  [DOM_EVENT.MOUSE_DOWN]: MouseInteractionType.MouseDown,
+  [DOM_EVENT.CLICK]: MouseInteractionType.Click,
+  [DOM_EVENT.CONTEXT_MENU]: MouseInteractionType.ContextMenu,
+  [DOM_EVENT.DBL_CLICK]: MouseInteractionType.DblClick,
+  [DOM_EVENT.FOCUS]: MouseInteractionType.Focus,
+  [DOM_EVENT.BLUR]: MouseInteractionType.Blur,
+  [DOM_EVENT.TOUCH_START]: MouseInteractionType.TouchStart,
+  [DOM_EVENT.TOUCH_END]: MouseInteractionType.TouchEnd,
+}
+
+export function trackMouseInteraction(
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  const handler = (event: MouseEvent | TouchEvent | FocusEvent) => {
+    const target = getEventTarget(event)
+    const id = scope.nodeIds.get(target)
+    if (
+      id === undefined ||
+      getNodePrivacyLevel(target, scope.configuration.defaultPrivacyLevel) === NodePrivacyLevel.HIDDEN
+    ) {
+      return
+    }
+    const type = eventTypeToMouseInteraction[event.type as keyof typeof eventTypeToMouseInteraction]
+
+    let interaction: MouseInteraction
+    if (type !== MouseInteractionType.Blur && type !== MouseInteractionType.Focus) {
+      const coordinates = tryToComputeCoordinates(event as MouseEvent | TouchEvent)
+      if (!coordinates) {
+        return
+      }
+      interaction = { id, type, x: coordinates.x, y: coordinates.y }
+    } else {
+      interaction = { id, type }
+    }
+
+    emitRecord({
+      id: scope.eventIds.getOrInsert(event),
+      ...assembleIncrementalSnapshot<MouseInteractionData>(IncrementalSource.MouseInteraction, interaction),
+    })
+  }
+  return addEventListeners(
+    scope.configuration,
+    document,
+    Object.keys(eventTypeToMouseInteraction) as Array<keyof typeof eventTypeToMouseInteraction>,
+    handler,
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+}

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

@@ -0,0 +1,78 @@
+import { addEventListeners, DOM_EVENT, throttle } from '@datadog/browser-core'
+import type { BrowserIncrementalSnapshotRecord, MousemoveData, MousePosition } from '../../../types'
+import { IncrementalSource } from '../../../types'
+import { getEventTarget, isTouchEvent } from '../eventsUtils'
+import { convertMouseEventToLayoutCoordinates } from '../viewports'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+const MOUSE_MOVE_OBSERVER_THRESHOLD = 50
+
+export function trackMove(
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  const { throttled: updatePosition, cancel: cancelThrottle } = throttle(
+    (event: MouseEvent | TouchEvent) => {
+      const target = getEventTarget(event)
+      const id = scope.nodeIds.get(target)
+      if (id === undefined) {
+        return
+      }
+      const coordinates = tryToComputeCoordinates(event)
+      if (!coordinates) {
+        return
+      }
+      const position: MousePosition = {
+        id,
+        timeOffset: 0,
+        x: coordinates.x,
+        y: coordinates.y,
+      }
+
+      emitRecord(
+        assembleIncrementalSnapshot<MousemoveData>(
+          isTouchEvent(event) ? IncrementalSource.TouchMove : IncrementalSource.MouseMove,
+          { positions: [position] }
+        )
+      )
+    },
+    MOUSE_MOVE_OBSERVER_THRESHOLD,
+    {
+      trailing: false,
+    }
+  )
+
+  const { stop: removeListener } = addEventListeners(
+    scope.configuration,
+    document,
+    [DOM_EVENT.MOUSE_MOVE, DOM_EVENT.TOUCH_MOVE],
+    updatePosition,
+    {
+      capture: true,
+      passive: true,
+    }
+  )
+
+  return {
+    stop: () => {
+      removeListener()
+      cancelThrottle()
+    },
+  }
+}
+
+export function tryToComputeCoordinates(event: MouseEvent | TouchEvent) {
+  let { clientX: x, clientY: y } = isTouchEvent(event) ? event.changedTouches[0] : event
+  if (window.visualViewport) {
+    const { visualViewportX, visualViewportY } = convertMouseEventToLayoutCoordinates(x, y)
+    x = visualViewportX
+    y = visualViewportY
+  }
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return undefined
+  }
+  return { x, y }
+}

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

@@ -0,0 +1,74 @@
+import type { TimeStamp } from '@datadog/browser-core'
+import { monitor, noop, timeStampNow } from '@datadog/browser-core'
+import type { RumMutationRecord } from '@datadog/browser-rum-core'
+import { getMutationObserverConstructor } from '@datadog/browser-rum-core'
+import type { RecordingScope } from '../recordingScope'
+import { createMutationBatch } from '../mutationBatch'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import {
+  isIncrementalSnapshotChangeRecordsEnabled,
+  serializeMutations,
+  serializeMutationsAsChange,
+} from '../serialization'
+import type { Tracker } from './tracker.types'
+
+export type MutationTracker = Tracker & { flush: () => void }
+
+export type SerializeMutationsCallback = (
+  timestamp: TimeStamp,
+  mutations: RumMutationRecord[],
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+) => void
+
+/**
+ * Buffers and aggregate mutations generated by a MutationObserver into MutationPayload
+ */
+export function trackMutation(
+  target: Node,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope,
+  serialize: SerializeMutationsCallback = defaultSerializeMutationsCallback()
+): MutationTracker {
+  const MutationObserver = getMutationObserverConstructor()
+  if (!MutationObserver) {
+    return { stop: noop, flush: noop }
+  }
+
+  const mutationBatch = createMutationBatch((mutations) => {
+    serialize(
+      timeStampNow(),
+      mutations.concat(observer.takeRecords() as RumMutationRecord[]),
+      emitRecord,
+      emitStats,
+      scope
+    )
+  })
+
+  const observer = new MutationObserver(monitor(mutationBatch.addMutations) as (callback: RumMutationRecord[]) => void)
+
+  observer.observe(target, {
+    attributeOldValue: true,
+    attributes: true,
+    characterData: true,
+    characterDataOldValue: true,
+    childList: true,
+    subtree: true,
+  })
+
+  return {
+    stop: () => {
+      observer.disconnect()
+      mutationBatch.stop()
+    },
+    flush: () => {
+      mutationBatch.flush()
+    },
+  }
+}
+
+function defaultSerializeMutationsCallback(): SerializeMutationsCallback {
+  return isIncrementalSnapshotChangeRecordsEnabled() ? serializeMutationsAsChange : serializeMutations
+}

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

@@ -0,0 +1,61 @@
+import { DOM_EVENT, throttle, addEventListener } from '@datadog/browser-core'
+import { getScrollX, getScrollY, getNodePrivacyLevel, NodePrivacyLevel } from '@datadog/browser-rum-core'
+import { getEventTarget } from '../eventsUtils'
+import { IncrementalSource } from '../../../types'
+import type { BrowserIncrementalSnapshotRecord, ScrollData } from '../../../types'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+const SCROLL_OBSERVER_THRESHOLD = 100
+
+export function trackScroll(
+  target: Document | ShadowRoot,
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  const { throttled: updatePosition, cancel: cancelThrottle } = throttle((event: Event) => {
+    const target = getEventTarget(event) as HTMLElement | Document
+    if (!target) {
+      return
+    }
+    const id = scope.nodeIds.get(target)
+    if (
+      id === undefined ||
+      getNodePrivacyLevel(target, scope.configuration.defaultPrivacyLevel) === NodePrivacyLevel.HIDDEN
+    ) {
+      return
+    }
+    const scrollPositions =
+      target === document
+        ? {
+            scrollTop: getScrollY(),
+            scrollLeft: getScrollX(),
+          }
+        : {
+            scrollTop: Math.round((target as HTMLElement).scrollTop),
+            scrollLeft: Math.round((target as HTMLElement).scrollLeft),
+          }
+    scope.elementsScrollPositions.set(target, scrollPositions)
+    emitRecord(
+      assembleIncrementalSnapshot<ScrollData>(IncrementalSource.Scroll, {
+        id,
+        x: scrollPositions.scrollLeft,
+        y: scrollPositions.scrollTop,
+      })
+    )
+  }, SCROLL_OBSERVER_THRESHOLD)
+
+  const { stop: removeListener } = addEventListener(scope.configuration, target, DOM_EVENT.SCROLL, updatePosition, {
+    capture: true,
+    passive: true,
+  })
+
+  return {
+    stop: () => {
+      removeListener()
+      cancelThrottle()
+    },
+  }
+}

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

@@ -0,0 +1,117 @@
+import { instrumentMethod } from '@datadog/browser-core'
+import { IncrementalSource } from '../../../types'
+import type { BrowserIncrementalSnapshotRecord, StyleSheetRuleData } from '../../../types'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+type GroupingCSSRuleTypes = typeof CSSGroupingRule | typeof CSSMediaRule | typeof CSSSupportsRule
+
+export function trackStyleSheet(
+  emitRecord: EmitRecordCallback<BrowserIncrementalSnapshotRecord>,
+  scope: RecordingScope
+): Tracker {
+  function checkStyleSheetAndCallback(styleSheet: CSSStyleSheet | null, callback: (id: number) => void): void {
+    if (!styleSheet || !styleSheet.ownerNode) {
+      return
+    }
+    const id = scope.nodeIds.get(styleSheet.ownerNode)
+    if (id === undefined) {
+      return
+    }
+    callback(id)
+  }
+
+  const instrumentationStoppers = [
+    instrumentMethod(CSSStyleSheet.prototype, 'insertRule', ({ target: styleSheet, parameters: [rule, index] }) => {
+      checkStyleSheetAndCallback(styleSheet, (id) =>
+        emitRecord(
+          assembleIncrementalSnapshot<StyleSheetRuleData>(IncrementalSource.StyleSheetRule, {
+            id,
+            adds: [{ rule, index }],
+          })
+        )
+      )
+    }),
+
+    instrumentMethod(CSSStyleSheet.prototype, 'deleteRule', ({ target: styleSheet, parameters: [index] }) => {
+      checkStyleSheetAndCallback(styleSheet, (id) =>
+        emitRecord(
+          assembleIncrementalSnapshot<StyleSheetRuleData>(IncrementalSource.StyleSheetRule, {
+            id,
+            removes: [{ index }],
+          })
+        )
+      )
+    }),
+  ]
+
+  if (typeof CSSGroupingRule !== 'undefined') {
+    instrumentGroupingCSSRuleClass(CSSGroupingRule)
+  } else {
+    instrumentGroupingCSSRuleClass(CSSMediaRule)
+    instrumentGroupingCSSRuleClass(CSSSupportsRule)
+  }
+
+  function instrumentGroupingCSSRuleClass(cls: GroupingCSSRuleTypes) {
+    instrumentationStoppers.push(
+      instrumentMethod(cls.prototype, 'insertRule', ({ target: styleSheet, parameters: [rule, index] }) => {
+        checkStyleSheetAndCallback(styleSheet.parentStyleSheet, (id) => {
+          const path = getPathToNestedCSSRule(styleSheet)
+          if (path) {
+            path.push(index || 0)
+            emitRecord(
+              assembleIncrementalSnapshot<StyleSheetRuleData>(IncrementalSource.StyleSheetRule, {
+                id,
+                adds: [{ rule, index: path }],
+              })
+            )
+          }
+        })
+      }),
+
+      instrumentMethod(cls.prototype, 'deleteRule', ({ target: styleSheet, parameters: [index] }) => {
+        checkStyleSheetAndCallback(styleSheet.parentStyleSheet, (id) => {
+          const path = getPathToNestedCSSRule(styleSheet)
+          if (path) {
+            path.push(index)
+            emitRecord(
+              assembleIncrementalSnapshot<StyleSheetRuleData>(IncrementalSource.StyleSheetRule, {
+                id,
+                removes: [{ index: path }],
+              })
+            )
+          }
+        })
+      })
+    )
+  }
+
+  return {
+    stop: () => {
+      instrumentationStoppers.forEach((stopper) => stopper.stop())
+    },
+  }
+}
+
+export function getPathToNestedCSSRule(rule: CSSRule): number[] | undefined {
+  const path: number[] = []
+  let currentRule = rule
+  while (currentRule.parentRule) {
+    const rules = Array.from((currentRule.parentRule as CSSGroupingRule).cssRules)
+    const index = rules.indexOf(currentRule)
+    path.unshift(index)
+    currentRule = currentRule.parentRule
+  }
+  // A rule may not be attached to a stylesheet
+  if (!currentRule.parentStyleSheet) {
+    return
+  }
+
+  const rules = Array.from(currentRule.parentStyleSheet.cssRules)
+  const index = rules.indexOf(currentRule)
+  path.unshift(index)
+
+  return path
+}

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

@@ -0,0 +1,27 @@
+import { timeStampNow } from '@datadog/browser-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { LifeCycleEventType } from '@datadog/browser-rum-core'
+import type { ViewEndRecord } from '../../../types'
+import { RecordType } from '../../../types'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+export function trackViewEnd(
+  lifeCycle: LifeCycle,
+  emitRecord: EmitRecordCallback<ViewEndRecord>,
+  flushMutations: () => void
+): Tracker {
+  const viewEndSubscription = lifeCycle.subscribe(LifeCycleEventType.VIEW_ENDED, () => {
+    flushMutations()
+    emitRecord({
+      timestamp: timeStampNow(),
+      type: RecordType.ViewEnd,
+    })
+  })
+
+  return {
+    stop: () => {
+      viewEndSubscription.unsubscribe()
+    },
+  }
+}