@kubesense/kubesense-browser-rum 1.0.0

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

@@ -0,0 +1,399 @@
+import { monitor, noop } from '@kubesense/kubesense-browser-core'
+import type {
+  NodePrivacyLevelCache,
+  RumMutationRecord,
+  RumChildListMutationRecord,
+  RumCharacterDataMutationRecord,
+  RumAttributesMutationRecord,
+} from '@kubesense/kubesense-browser-rum-core'
+import { isNodeShadowHost, getMutationObserverConstructor, getParentNode, forEachChildNodes, getNodePrivacyLevel, getTextContent, NodePrivacyLevel } from '@kubesense/kubesense-browser-rum-core'
+import { IncrementalSource } from '../../../types'
+import type {
+  BrowserMutationData,
+  AddedNodeMutation,
+  AttributeMutation,
+  RemovedNodeMutation,
+  TextMutation,
+} from '../../../types'
+import type { RecordingScope } from '../recordingScope'
+import type { SerializationTransaction } from '../serialization'
+import {
+  getElementInputValue,
+  serializeAttribute,
+  serializeInTransaction,
+  serializeNode,
+  SerializationKind,
+} from '../serialization'
+import { createMutationBatch } from '../mutationBatch'
+import type { RemoveShadowRootCallBack } from '../shadowRootsController'
+import { assembleIncrementalSnapshot } from '../assembly'
+import type { NodeId, NodeWithSerializedNode } from '../nodeIds'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+type WithSerializedTarget<T> = T & { target: NodeWithSerializedNode }
+
+export type MutationTracker = Tracker & { flush: () => void }
+
+/**
+ * Buffers and aggregate mutations generated by a MutationObserver into MutationPayload
+ */
+export function trackMutation(
+  target: Node,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+): MutationTracker {
+  const MutationObserver = getMutationObserverConstructor()
+  if (!MutationObserver) {
+    return { stop: noop, flush: noop }
+  }
+
+  const mutationBatch = createMutationBatch((mutations) => {
+    serializeInTransaction(
+      SerializationKind.INCREMENTAL_SNAPSHOT,
+      emitRecord,
+      emitStats,
+      scope,
+      (transaction: SerializationTransaction) =>
+        processMutations(mutations.concat(observer.takeRecords() as RumMutationRecord[]), transaction)
+    )
+  })
+
+  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 processMutations(mutations: RumMutationRecord[], transaction: SerializationTransaction): void {
+  const nodePrivacyLevelCache: NodePrivacyLevelCache = new Map()
+
+  mutations
+    .filter((mutation): mutation is RumChildListMutationRecord => mutation.type === 'childList')
+    .forEach((mutation) => {
+      mutation.removedNodes.forEach((removedNode) => {
+        traverseRemovedShadowDom(removedNode, transaction.scope.shadowRootsController.removeShadowRoot)
+      })
+    })
+
+  // Discard any mutation with a 'target' node that:
+  // * isn't injected in the current document or isn't known/serialized yet: those nodes are likely
+  // part of a mutation occurring in a parent Node
+  // * should be hidden or ignored
+  const filteredMutations = mutations.filter(
+    (mutation): mutation is WithSerializedTarget<RumMutationRecord> =>
+      mutation.target.isConnected &&
+      transaction.scope.nodeIds.areAssignedForNodeAndAncestors(mutation.target) &&
+      getNodePrivacyLevel(
+        mutation.target,
+        transaction.scope.configuration.defaultPrivacyLevel,
+        nodePrivacyLevelCache
+      ) !== NodePrivacyLevel.HIDDEN
+  )
+
+  const { adds, removes, hasBeenSerialized } = processChildListMutations(
+    filteredMutations.filter(
+      (mutation): mutation is WithSerializedTarget<RumChildListMutationRecord> => mutation.type === 'childList'
+    ),
+    nodePrivacyLevelCache,
+    transaction
+  )
+
+  const texts = processCharacterDataMutations(
+    filteredMutations.filter(
+      (mutation): mutation is WithSerializedTarget<RumCharacterDataMutationRecord> =>
+        mutation.type === 'characterData' && !hasBeenSerialized(mutation.target)
+    ),
+    nodePrivacyLevelCache,
+    transaction
+  )
+
+  const attributes = processAttributesMutations(
+    filteredMutations.filter(
+      (mutation): mutation is WithSerializedTarget<RumAttributesMutationRecord> =>
+        mutation.type === 'attributes' && !hasBeenSerialized(mutation.target)
+    ),
+    nodePrivacyLevelCache,
+    transaction
+  )
+
+  if (!texts.length && !attributes.length && !removes.length && !adds.length) {
+    return
+  }
+
+  transaction.add(
+    assembleIncrementalSnapshot<BrowserMutationData>(IncrementalSource.Mutation, {
+      adds,
+      removes,
+      texts,
+      attributes,
+    })
+  )
+}
+
+function processChildListMutations(
+  mutations: Array<WithSerializedTarget<RumChildListMutationRecord>>,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+) {
+  // First, we iterate over mutations to collect:
+  //
+  // * nodes that have been added in the document and not removed by a subsequent mutation
+  // * nodes that have been removed from the document but were not added in a previous mutation
+  //
+  // For this second category, we also collect their previous parent (mutation.target) because we'll
+  // need it to emit a 'remove' mutation.
+  //
+  // Those two categories may overlap: if a node moved from a position to another, it is reported as
+  // two mutation records, one with a "removedNodes" and the other with "addedNodes". In this case,
+  // the node will be in both sets.
+  const addedAndMovedNodes = new Set<Node>()
+  const removedNodes = new Map<Node, NodeWithSerializedNode>()
+  for (const mutation of mutations) {
+    mutation.addedNodes.forEach((node) => {
+      addedAndMovedNodes.add(node)
+    })
+    mutation.removedNodes.forEach((node) => {
+      if (!addedAndMovedNodes.has(node)) {
+        removedNodes.set(node, mutation.target)
+      }
+      addedAndMovedNodes.delete(node)
+    })
+  }
+
+  // Then, we sort nodes that are still in the document by topological order, for two reasons:
+  //
+  // * We will serialize each added nodes with their descendants. We don't want to serialize a node
+  // twice, so we need to iterate over the parent nodes first and skip any node that is contained in
+  // a precedent node.
+  //
+  // * To emit "add" mutations, we need references to the parent and potential next sibling of each
+  // added node. So we need to iterate over the parent nodes first, and when multiple nodes are
+  // siblings, we want to iterate from last to first. This will ensure that any "next" node is
+  // already serialized and have an id.
+  const sortedAddedAndMovedNodes = Array.from(addedAndMovedNodes)
+  sortAddedAndMovedNodes(sortedAddedAndMovedNodes)
+
+  // Then, we iterate over our sorted node sets to emit mutations. We collect the newly serialized
+  // node ids in a set to be able to skip subsequent related mutations.
+  transaction.serializedNodeIds = new Set<NodeId>()
+
+  const addedNodeMutations: AddedNodeMutation[] = []
+  for (const node of sortedAddedAndMovedNodes) {
+    if (hasBeenSerialized(node)) {
+      continue
+    }
+
+    const parentNodePrivacyLevel = getNodePrivacyLevel(
+      node.parentNode!,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    if (parentNodePrivacyLevel === NodePrivacyLevel.HIDDEN || parentNodePrivacyLevel === NodePrivacyLevel.IGNORE) {
+      continue
+    }
+
+    const serializedNode = serializeNode(node, parentNodePrivacyLevel, transaction)
+    if (!serializedNode) {
+      continue
+    }
+
+    const parentNode = getParentNode(node)!
+    addedNodeMutations.push({
+      nextId: getNextSibling(node),
+      parentId: transaction.scope.nodeIds.get(parentNode)!,
+      node: serializedNode,
+    })
+  }
+  // Finally, we emit remove mutations.
+  const removedNodeMutations: RemovedNodeMutation[] = []
+  removedNodes.forEach((parent, node) => {
+    const parentId = transaction.scope.nodeIds.get(parent)
+    const id = transaction.scope.nodeIds.get(node)
+    if (parentId !== undefined && id !== undefined) {
+      removedNodeMutations.push({ parentId, id })
+    }
+  })
+
+  return { adds: addedNodeMutations, removes: removedNodeMutations, hasBeenSerialized }
+
+  function hasBeenSerialized(node: Node) {
+    const id = transaction.scope.nodeIds.get(node)
+    return id !== undefined && transaction.serializedNodeIds?.has(id)
+  }
+
+  function getNextSibling(node: Node): null | number {
+    let nextSibling = node.nextSibling
+    while (nextSibling) {
+      const id = transaction.scope.nodeIds.get(nextSibling)
+      if (id !== undefined) {
+        return id
+      }
+      nextSibling = nextSibling.nextSibling
+    }
+
+    return null
+  }
+}
+
+function processCharacterDataMutations(
+  mutations: Array<WithSerializedTarget<RumCharacterDataMutationRecord>>,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+) {
+  const textMutations: TextMutation[] = []
+
+  // Deduplicate mutations based on their target node
+  const handledNodes = new Set<Node>()
+  const filteredMutations = mutations.filter((mutation) => {
+    if (handledNodes.has(mutation.target)) {
+      return false
+    }
+    handledNodes.add(mutation.target)
+    return true
+  })
+
+  // Emit mutations
+  for (const mutation of filteredMutations) {
+    const value = mutation.target.textContent
+    if (value === mutation.oldValue) {
+      continue
+    }
+
+    const id = transaction.scope.nodeIds.get(mutation.target)
+    if (id === undefined) {
+      continue
+    }
+
+    const parentNodePrivacyLevel = getNodePrivacyLevel(
+      getParentNode(mutation.target)!,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    if (parentNodePrivacyLevel === NodePrivacyLevel.HIDDEN || parentNodePrivacyLevel === NodePrivacyLevel.IGNORE) {
+      continue
+    }
+
+    textMutations.push({
+      id,
+      value: getTextContent(mutation.target, parentNodePrivacyLevel) ?? null,
+    })
+  }
+
+  return textMutations
+}
+
+function processAttributesMutations(
+  mutations: Array<WithSerializedTarget<RumAttributesMutationRecord>>,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+) {
+  const attributeMutations: AttributeMutation[] = []
+
+  // Deduplicate mutations based on their target node and changed attribute
+  const handledElements = new Map<Element, Set<string>>()
+  const filteredMutations = mutations.filter((mutation) => {
+    const handledAttributes = handledElements.get(mutation.target)
+    if (handledAttributes && handledAttributes.has(mutation.attributeName!)) {
+      return false
+    }
+    if (!handledAttributes) {
+      handledElements.set(mutation.target, new Set([mutation.attributeName!]))
+    } else {
+      handledAttributes.add(mutation.attributeName!)
+    }
+    return true
+  })
+
+  // Emit mutations
+  const emittedMutations = new Map<Element, AttributeMutation>()
+  for (const mutation of filteredMutations) {
+    const uncensoredValue = mutation.target.getAttribute(mutation.attributeName!)
+    if (uncensoredValue === mutation.oldValue) {
+      continue
+    }
+
+    const id = transaction.scope.nodeIds.get(mutation.target)
+    if (id === undefined) {
+      continue
+    }
+
+    const privacyLevel = getNodePrivacyLevel(
+      mutation.target,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    const attributeValue = serializeAttribute(
+      mutation.target,
+      privacyLevel,
+      mutation.attributeName!,
+      transaction.scope.configuration
+    )
+
+    let transformedValue: string | null
+    if (mutation.attributeName === 'value') {
+      const inputValue = getElementInputValue(mutation.target, privacyLevel)
+      if (inputValue === undefined) {
+        continue
+      }
+      transformedValue = inputValue
+    } else if (typeof attributeValue === 'string') {
+      transformedValue = attributeValue
+    } else {
+      transformedValue = null
+    }
+
+    let emittedMutation = emittedMutations.get(mutation.target)
+    if (!emittedMutation) {
+      emittedMutation = { id, attributes: {} }
+      attributeMutations.push(emittedMutation)
+      emittedMutations.set(mutation.target, emittedMutation)
+    }
+
+    emittedMutation.attributes[mutation.attributeName!] = transformedValue
+  }
+
+  return attributeMutations
+}
+
+export function sortAddedAndMovedNodes(nodes: Node[]) {
+  nodes.sort((a, b) => {
+    const position = a.compareDocumentPosition(b)
+    /* eslint-disable no-bitwise */
+    if (position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      return -1
+    } else if (position & Node.DOCUMENT_POSITION_CONTAINS) {
+      return 1
+    } else if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return 1
+    } else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return -1
+    }
+    /* eslint-enable no-bitwise */
+    return 0
+  })
+}
+
+function traverseRemovedShadowDom(removedNode: Node, shadowDomRemovedCallback: RemoveShadowRootCallBack) {
+  if (isNodeShadowHost(removedNode)) {
+    shadowDomRemovedCallback(removedNode.shadowRoot)
+  }
+  forEachChildNodes(removedNode, (childNode) => traverseRemovedShadowDom(childNode, shadowDomRemovedCallback))
+}

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

@@ -0,0 +1,61 @@
+import { DOM_EVENT, throttle, addEventListener } from '@kubesense/kubesense-browser-core'
+import { getScrollX, getScrollY, getNodePrivacyLevel, NodePrivacyLevel } from '@kubesense/kubesense-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 '@kubesense/kubesense-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 '@kubesense/kubesense-browser-core'
+import type { LifeCycle } from '@kubesense/kubesense-browser-rum-core'
+import { LifeCycleEventType } from '@kubesense/kubesense-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()
+    },
+  }
+}

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

@@ -0,0 +1,69 @@
+import { throttle, DOM_EVENT, addEventListeners, timeStampNow, noop } from '@kubesense/kubesense-browser-core'
+import type { ViewportDimension } from '@kubesense/kubesense-browser-rum-core'
+import { initViewportObservable } from '@kubesense/kubesense-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
+}