@depup/datadog__browser-rum 6.31.0-depup.0

package/src/domain/record/serialization/serializeNodeAsChange.ts

@@ -0,0 +1,237 @@
+import {
+  reducePrivacyLevel,
+  getNodeSelfPrivacyLevel,
+  getTextContent,
+  isNodeShadowRoot,
+  forEachChildNodes,
+  NodePrivacyLevel,
+  PRIVACY_ATTR_NAME,
+  PRIVACY_ATTR_VALUE_HIDDEN,
+  getScrollX,
+  getScrollY,
+  isElementNode,
+} from '@datadog/browser-rum-core'
+import { MediaInteractionType } from '../../../types'
+import type { NodeId, StyleSheetId } from '../itemIds'
+import type { InsertionCursor } from './insertionCursor'
+import type { ChangeSerializationTransaction } from './serializationTransaction'
+import { serializeDOMAttributes, serializeVirtualAttributes } from './serializeAttributes'
+
+export function serializeNodeAsChange(
+  cursor: InsertionCursor,
+  node: Node,
+  parentPrivacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction
+): void {
+  // Ignore the children of <style> elements; the CSS rules they contain are already
+  // serialized as StyleSheetSnapshots.
+  if (node.parentNode?.nodeName === 'STYLE') {
+    return
+  }
+
+  let privacyLevel: NodePrivacyLevel
+
+  const selfPrivacyLevel = getNodeSelfPrivacyLevel(node)
+  if (selfPrivacyLevel) {
+    privacyLevel = reducePrivacyLevel(selfPrivacyLevel, parentPrivacyLevel)
+  } else {
+    privacyLevel = parentPrivacyLevel
+  }
+
+  if (privacyLevel === NodePrivacyLevel.HIDDEN) {
+    serializeHiddenNodePlaceholder(cursor, node, transaction)
+    return
+  }
+
+  // Totally ignore risky or unwanted elements. (e.g. <script>, some <link> and <meta> elements)
+  if (privacyLevel === NodePrivacyLevel.IGNORE) {
+    return
+  }
+
+  switch (node.nodeType) {
+    case node.CDATA_SECTION_NODE:
+      serializeCDataNodeAsChange(cursor, node as CDATASection, transaction)
+      break
+    case node.DOCUMENT_NODE:
+      serializeDocumentNodeAsChange(cursor, node as Document, transaction)
+      break
+    case node.DOCUMENT_FRAGMENT_NODE:
+      serializeDocumentFragmentNodeAsChange(cursor, node as DocumentFragment, transaction)
+      break
+    case node.DOCUMENT_TYPE_NODE:
+      serializeDocumentTypeNodeAsChange(cursor, node as DocumentType, transaction)
+      break
+    case node.ELEMENT_NODE:
+      serializeElementNodeAsChange(cursor, node as Element, privacyLevel, transaction)
+      break
+    case node.TEXT_NODE:
+      serializeTextNodeAsChange(cursor, node as Text, privacyLevel, transaction)
+      break
+    default:
+      return
+  }
+
+  // If this node can't have children, we're done.
+  switch (node.nodeType) {
+    case node.CDATA_SECTION_NODE:
+    case node.DOCUMENT_TYPE_NODE:
+    case node.TEXT_NODE:
+      return
+  }
+
+  cursor.descend()
+  forEachChildNodes(node, (childNode) => {
+    serializeNodeAsChange(cursor, childNode, privacyLevel, transaction)
+  })
+  cursor.ascend()
+}
+
+function serializeDocumentNodeAsChange(
+  cursor: InsertionCursor,
+  document: Document,
+  transaction: ChangeSerializationTransaction
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(document)
+  transaction.addNode(insertionPoint, '#document')
+  transaction.setScrollPosition(nodeId, getScrollX(), getScrollY())
+  serializeStyleSheetsAsChange(document.adoptedStyleSheets, nodeId, transaction)
+}
+
+function serializeDocumentFragmentNodeAsChange(
+  cursor: InsertionCursor,
+  documentFragment: DocumentFragment,
+  transaction: ChangeSerializationTransaction
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(documentFragment)
+  const isShadowRoot = isNodeShadowRoot(documentFragment)
+  if (!isShadowRoot) {
+    transaction.addNode(insertionPoint, '#document-fragment')
+    return
+  }
+
+  transaction.addNode(insertionPoint, '#shadow-root')
+  transaction.scope.shadowRootsController.addShadowRoot(documentFragment, transaction.scope)
+  serializeStyleSheetsAsChange(documentFragment.adoptedStyleSheets, nodeId, transaction)
+}
+
+function serializeDocumentTypeNodeAsChange(
+  cursor: InsertionCursor,
+  documentType: DocumentType,
+  transaction: ChangeSerializationTransaction
+): void {
+  const { insertionPoint } = cursor.advance(documentType)
+  transaction.addNode(insertionPoint, '#doctype', documentType.name, documentType.publicId, documentType.systemId)
+}
+
+function serializeElementNodeAsChange(
+  cursor: InsertionCursor,
+  element: Element,
+  privacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(element)
+  const domAttributes = Object.entries(serializeDOMAttributes(element, privacyLevel, transaction))
+  transaction.addNode(insertionPoint, encodedElementName(element), ...domAttributes)
+
+  const {
+    _cssText: cssText,
+    rr_mediaState: mediaState,
+    rr_scrollLeft: scrollLeft,
+    rr_scrollTop: scrollTop,
+  } = serializeVirtualAttributes(element, privacyLevel, transaction)
+
+  const linkOrStyle = element as HTMLLinkElement | HTMLStyleElement
+  if (cssText !== undefined && linkOrStyle.sheet) {
+    const sheetId = transaction.scope.styleSheetIds.getOrInsert(linkOrStyle.sheet)
+    transaction.addStyleSheet(cssText)
+    transaction.attachStyleSheets(nodeId, [sheetId])
+  }
+
+  if (mediaState === 'played') {
+    transaction.setMediaPlaybackState(nodeId, MediaInteractionType.Play)
+  } else if (mediaState === 'paused') {
+    transaction.setMediaPlaybackState(nodeId, MediaInteractionType.Pause)
+  }
+
+  if (scrollLeft !== undefined || scrollTop !== undefined) {
+    transaction.setScrollPosition(nodeId, scrollLeft || 0, scrollTop || 0)
+  }
+}
+
+function serializeTextNodeAsChange(
+  cursor: InsertionCursor,
+  textNode: Text,
+  privacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction
+): void {
+  const textContent = getTextContent(textNode, privacyLevel)
+  if (textContent === undefined) {
+    return
+  }
+  const { insertionPoint } = cursor.advance(textNode)
+  transaction.addNode(insertionPoint, '#text', textContent)
+}
+
+function serializeCDataNodeAsChange(
+  cursor: InsertionCursor,
+  cdataNode: CDATASection,
+  transaction: ChangeSerializationTransaction
+): void {
+  const { insertionPoint } = cursor.advance(cdataNode)
+  transaction.addNode(insertionPoint, '#cdata-section')
+}
+
+function serializeHiddenNodePlaceholder(
+  cursor: InsertionCursor,
+  node: Node,
+  transaction: ChangeSerializationTransaction
+): void {
+  // We only generate placeholders for element nodes; other hidden nodes are simply not
+  // serialized.
+  if (!isElementNode(node)) {
+    return
+  }
+
+  const { nodeId, insertionPoint } = cursor.advance(node)
+  transaction.addNode(insertionPoint, encodedElementName(node), [PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_HIDDEN])
+  const { width, height } = node.getBoundingClientRect()
+  transaction.setSize(nodeId, width, height)
+}
+
+function serializeStyleSheetsAsChange(
+  sheets: CSSStyleSheet[] | undefined,
+  nodeId: NodeId,
+  transaction: ChangeSerializationTransaction
+): void {
+  if (!sheets || sheets.length === 0) {
+    return undefined
+  }
+
+  transaction.attachStyleSheets(
+    nodeId,
+    sheets.map((sheet) => serializeStyleSheetAsChange(sheet, transaction))
+  )
+}
+
+function serializeStyleSheetAsChange(sheet: CSSStyleSheet, transaction: ChangeSerializationTransaction): StyleSheetId {
+  const rules = Array.from(sheet.cssRules || sheet.rules, (rule) => rule.cssText)
+  const mediaList = sheet.media.length > 0 ? Array.from(sheet.media) : undefined
+  transaction.addMetric(
+    'cssText',
+    rules.reduce((totalLength, rule) => totalLength + rule.length, 0)
+  )
+  transaction.addStyleSheet(rules, mediaList, sheet.disabled)
+  return transaction.scope.styleSheetIds.getOrInsert(sheet)
+}
+
+function encodedElementName(element: Element): Exclude<string, `#${string}`> {
+  const nodeName = element.nodeName
+  if (isSVGElement(element)) {
+    return `svg>${nodeName}`
+  }
+  return nodeName
+}
+
+function isSVGElement(element: Element): element is SVGElement {
+  return element.namespaceURI === 'http://www.w3.org/2000/svg'
+}

package/src/domain/record/serialization/serializeStyleSheets.ts

@@ -0,0 +1,36 @@
+import type { StyleSheet } from '../../../types'
+import type { SerializationTransaction } from './serializationTransaction'
+
+export function serializeStyleSheets(
+  cssStyleSheets: CSSStyleSheet[] | undefined,
+  transaction: SerializationTransaction
+): StyleSheet[] | undefined {
+  if (cssStyleSheets === undefined || cssStyleSheets.length === 0) {
+    return undefined
+  }
+  const serializeStylesheet = (cssStyleSheet: CSSStyleSheet) => {
+    const rules = cssStyleSheet.cssRules || cssStyleSheet.rules
+    const cssRules = Array.from(rules, (cssRule) => cssRule.cssText)
+    transaction.addMetric(
+      'cssText',
+      cssRules.reduce((totalLength, rule) => totalLength + rule.length, 0)
+    )
+
+    const styleSheet: StyleSheet = {
+      cssRules,
+      disabled: cssStyleSheet.disabled || undefined,
+      media: cssStyleSheet.media.length > 0 ? Array.from(cssStyleSheet.media) : undefined,
+    }
+    return styleSheet
+  }
+  // Safari iOS 16.x implements adoptedStyleSheets as a FrozenArray that:
+  // - can't be iterated over through map or for...of
+  // - can't be converted to regular array with Array.from
+  // - can't be detected with Array.isArray or Object.isFrozen
+  // Use index access to avoid the issue
+  const styleSheets: StyleSheet[] = []
+  for (let index = 0; index < cssStyleSheets.length; index++) {
+    styleSheets.push(serializeStylesheet(cssStyleSheets[index]))
+  }
+  return styleSheets
+}

package/src/domain/record/serializationVerifier.ts

@@ -0,0 +1,208 @@
+import { noop } from '@datadog/browser-core'
+import { IncrementalSource, RecordType } from '../../types'
+import type {
+  AttributeMutation,
+  BrowserChangeRecord,
+  BrowserFullSnapshotRecord,
+  BrowserIncrementalSnapshotRecord,
+  BrowserRecord,
+  RemovedNodeMutation,
+} from '../../types'
+import type { EmitRecordCallback, SerializeEvent } from './record.types'
+import { createRecordingScope } from './recordingScope'
+import type { RecordingScope } from './recordingScope'
+import type { ShadowRootsController } from './shadowRootsController'
+import {
+  createChangeConverter,
+  createCopyingNodeIdRemapper,
+  serializeFullSnapshotAsChange,
+  serializeMutationsAsChange,
+} from './serialization'
+import type { NodeId } from './itemIds'
+
+/**
+ * SerializationVerifier compares the output of the V1 and Change serialization
+ * algorithms. It's designed to seamlessly add verification to existing test suites which
+ * are written against the V1 serialization algorithm.
+ *
+ * To use it, create a SerializationVerifier configured with the same RecordingScope used
+ * by the current test. The SerializationVerifier will automatically listen for V1
+ * serializations being performed by the test code and will perform the corresponding
+ * Change serialization. It will then convert the resulting BrowserChangeRecord to the old
+ * V1 format and compare the results to verify that the two algorithms produce the same
+ * output.
+ */
+export interface SerializationVerifier {
+  stop(this: void): void
+}
+
+export type OnVerificationError = (message: string, context?: any) => void
+
+export function createSerializationVerifier(
+  scope: RecordingScope,
+  onError: OnVerificationError
+): SerializationVerifier {
+  // Node id numbering differs between the V1 and Change serialization
+  // algorithms, so if we want to be able to compare their output, we need to replace the
+  // 'input' node ids in each Change record with the 'output' node ids produced by the V1
+  // serialization algorithm. This NodeIdRemapper will handle that task.
+  const nodeIdRemapper = createCopyingNodeIdRemapper()
+  scope.nodeIds = nodeIdRemapper.outputNodeIds
+
+  // Create a separate recording scope to use for Change serialization.
+  const changeScope = createRecordingScope(scope.configuration, scope.elementsScrollPositions, {
+    addShadowRoot: noop,
+    removeShadowRoot: noop,
+    flush: noop,
+    stop: noop,
+  } as ShadowRootsController)
+  changeScope.nodeIds = nodeIdRemapper.inputNodeIds
+
+  // Create the converter that we'll use to transform the records generated by Change
+  // serialization into the V1 format.
+  let converter = createChangeConverter()
+
+  const { unsubscribe } = scope.serializeObservable.subscribe((event: SerializeEvent) => {
+    let changeRecord: BrowserRecord | undefined
+    const emitRecord: EmitRecordCallback = (record: BrowserRecord): void => {
+      changeRecord = record
+    }
+
+    switch (event.type) {
+      case 'full':
+        // Create a new converter since we've transitioned to a new view.
+        converter = createChangeConverter()
+
+        serializeFullSnapshotAsChange(event.timestamp, event.kind, event.target, emitRecord, noop, changeScope)
+        break
+
+      case 'incremental':
+        serializeMutationsAsChange(event.timestamp, event.target, emitRecord, noop, changeScope)
+        break
+
+      default:
+        event satisfies never
+        return
+    }
+
+    if (!changeRecord) {
+      onError('No change record serialized', event)
+      return
+    }
+
+    try {
+      const v1Record = event.v1
+      const convertedChangeRecord = converter.convert(changeRecord as BrowserChangeRecord, {
+        nodeIdRemapper,
+        timestamp: v1Record.timestamp,
+      })
+
+      verifySnapshotsMatch(v1Record, convertedChangeRecord, onError)
+    } catch (error) {
+      onError('Error verifying change record', error)
+    }
+  })
+
+  return {
+    stop: unsubscribe,
+  }
+}
+
+function verifySnapshotsMatch(
+  expectedRecord: BrowserFullSnapshotRecord | BrowserIncrementalSnapshotRecord,
+  actualRecord: BrowserFullSnapshotRecord | BrowserIncrementalSnapshotRecord,
+  onError: OnVerificationError
+): void {
+  if (
+    expectedRecord.type !== RecordType.IncrementalSnapshot ||
+    expectedRecord.data.source !== IncrementalSource.Mutation ||
+    actualRecord.type !== RecordType.IncrementalSnapshot ||
+    actualRecord.data.source !== IncrementalSource.Mutation
+  ) {
+    // We expect full snapshots to be byte-for-byte equivalent, full stop.
+    verifyByteForByteEquivalence('full snapshot', expectedRecord, actualRecord, onError)
+    return
+  }
+
+  // Verify that everything but the data is byte-for-byte equivalent.
+  verifyByteForByteEquivalence(
+    'incremental snapshot wrapper',
+    { ...expectedRecord, data: null },
+    { ...actualRecord, data: null },
+    onError
+  )
+
+  // Within the data, verify that everything but attribute mutations and node remove
+  // mutations are byte-for-byte equivalent.
+  verifyByteForByteEquivalence(
+    'incremental snapshot data (without attributes and removes)',
+    { ...expectedRecord.data, attributes: null, removes: null },
+    { ...actualRecord.data, attributes: null, removes: null },
+    onError
+  )
+
+  // Verify that the attribute mutations are byte-for-byte equivalent except for order.
+  const orderAttributeMutations = (a: AttributeMutation, b: AttributeMutation): number => a.id - b.id
+  verifyByteForByteEquivalence(
+    'incremental snapshot attribute mutations',
+    expectedRecord.data.attributes.sort(orderAttributeMutations),
+    actualRecord.data.attributes.sort(orderAttributeMutations),
+    onError
+  )
+
+  // Gather the set of removes performed by V1 serialization.
+  const expectedRemoves = expectedRecord.data.removes
+  const expectedRemovedNodes = new Set<NodeId>()
+  for (const remove of expectedRemoves) {
+    expectedRemovedNodes.add(remove.id as NodeId)
+  }
+
+  // Gather the set of removes performed by Change serialization. Change serialization is
+  // more conservative about remove reporting, so it will report some removes that V1
+  // serialization deliberately skips. To paper over that difference, we filter out
+  // removes that V1 serialization didn't also report.
+  const actualRemoves: RemovedNodeMutation[] = actualRecord.data.removes.filter((remove) =>
+    expectedRemovedNodes.has(remove.id as NodeId)
+  )
+
+  // Verify that the removes that remain are byte-for-byte equivalent.
+  verifyByteForByteEquivalence('incremental snapshot removes', expectedRemoves, actualRemoves, onError)
+}
+
+function verifyByteForByteEquivalence(
+  context: string,
+  expected: unknown,
+  actual: unknown,
+  onError: OnVerificationError
+): void {
+  const expectedString = JSON.stringify(expected)
+  const actualString = JSON.stringify(actual)
+  if (actualString !== expectedString) {
+    onError('Serialization mismatch', {
+      context,
+      mismatch: createSerializationMismatchContext(expectedString, actualString),
+    })
+  }
+}
+
+function createSerializationMismatchContext(expected: string, actual: string): Record<string, string> {
+  const length = Math.min(expected.length, actual.length)
+  try {
+    let firstDifferenceIndex = 0
+    while (firstDifferenceIndex < length && expected[firstDifferenceIndex] === actual[firstDifferenceIndex]) {
+      firstDifferenceIndex++
+    }
+    return {
+      expected: getStringNearPosition(expected, firstDifferenceIndex),
+      actual: getStringNearPosition(actual, firstDifferenceIndex),
+    }
+  } catch (e) {
+    return { firstDifferenceError: JSON.stringify(e) }
+  }
+}
+
+function getStringNearPosition(str: string, index: number): string {
+  const leftContextStart = Math.max(index - 50, 0)
+  const rightContextEnd = Math.min(index + 150, str.length)
+  return `${str.substring(leftContextStart, index)}(!)${str.substring(index, rightContextEnd)}`
+}

package/src/domain/record/shadowRootsController.ts

@@ -0,0 +1,62 @@
+import type { RecordingScope } from './recordingScope.ts'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
+import { trackInput, trackMutation, trackScroll } from './trackers'
+
+interface ShadowRootController {
+  stop: () => void
+  flush: () => void
+}
+
+export type AddShadowRootCallBack = (shadowRoot: ShadowRoot, scope: RecordingScope) => void
+export type RemoveShadowRootCallBack = (shadowRoot: ShadowRoot) => void
+
+export interface ShadowRootsController {
+  addShadowRoot: AddShadowRootCallBack
+  removeShadowRoot: RemoveShadowRootCallBack
+  stop: () => void
+  flush: () => void
+}
+
+export const initShadowRootsController = (
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback
+): ShadowRootsController => {
+  const controllerByShadowRoot = new Map<ShadowRoot, ShadowRootController>()
+
+  const shadowRootsController: ShadowRootsController = {
+    addShadowRoot: (shadowRoot: ShadowRoot, scope: RecordingScope) => {
+      if (controllerByShadowRoot.has(shadowRoot)) {
+        return
+      }
+      const mutationTracker = trackMutation(shadowRoot, emitRecord, emitStats, scope)
+      // The change event does not bubble up across the shadow root, we have to listen on the shadow root
+      const inputTracker = trackInput(shadowRoot, emitRecord, scope)
+      // The scroll event does not bubble up across the shadow root, we have to listen on the shadow root
+      const scrollTracker = trackScroll(shadowRoot, emitRecord, scope)
+      controllerByShadowRoot.set(shadowRoot, {
+        flush: () => mutationTracker.flush(),
+        stop: () => {
+          mutationTracker.stop()
+          inputTracker.stop()
+          scrollTracker.stop()
+        },
+      })
+    },
+    removeShadowRoot: (shadowRoot: ShadowRoot) => {
+      const entry = controllerByShadowRoot.get(shadowRoot)
+      if (!entry) {
+        // unidentified root cause: observed in some cases with shadow DOM added by browser extensions
+        return
+      }
+      entry.stop()
+      controllerByShadowRoot.delete(shadowRoot)
+    },
+    stop: () => {
+      controllerByShadowRoot.forEach(({ stop }) => stop())
+    },
+    flush: () => {
+      controllerByShadowRoot.forEach(({ flush }) => flush())
+    },
+  }
+  return shadowRootsController
+}

package/src/domain/record/startFullSnapshots.ts

@@ -0,0 +1,92 @@
+import { LifeCycleEventType, getViewportDimension } from '@datadog/browser-rum-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import { timeStampNow } from '@datadog/browser-core'
+import type { TimeStamp } from '@datadog/browser-core'
+import { RecordType } from '../../types'
+import {
+  isFullSnapshotChangeRecordsEnabled,
+  SerializationKind,
+  serializeFullSnapshotAsChange,
+  serializeFullSnapshot,
+} from './serialization'
+import { getVisualViewport } from './viewports'
+import type { RecordingScope } from './recordingScope'
+import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
+
+export type SerializeFullSnapshotCallback = (
+  timestamp: TimeStamp,
+  kind: SerializationKind,
+  document: Document,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+) => void
+
+export function startFullSnapshots(
+  lifeCycle: LifeCycle,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  flushMutations: () => void,
+  scope: RecordingScope,
+  serialize: SerializeFullSnapshotCallback = defaultSerializeFullSnapshotCallback()
+) {
+  takeFullSnapshot(timeStampNow(), SerializationKind.INITIAL_FULL_SNAPSHOT, emitRecord, emitStats, scope, serialize)
+
+  const { unsubscribe } = lifeCycle.subscribe(LifeCycleEventType.VIEW_CREATED, (view) => {
+    flushMutations()
+    takeFullSnapshot(
+      view.startClocks.timeStamp,
+      SerializationKind.SUBSEQUENT_FULL_SNAPSHOT,
+      emitRecord,
+      emitStats,
+      scope,
+      serialize
+    )
+  })
+
+  return {
+    stop: unsubscribe,
+  }
+}
+
+export function takeFullSnapshot(
+  timestamp: TimeStamp,
+  kind: SerializationKind,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope,
+  serialize: SerializeFullSnapshotCallback = defaultSerializeFullSnapshotCallback()
+): void {
+  const { width, height } = getViewportDimension()
+  emitRecord({
+    data: {
+      height,
+      href: window.location.href,
+      width,
+    },
+    type: RecordType.Meta,
+    timestamp,
+  })
+
+  emitRecord({
+    data: {
+      has_focus: document.hasFocus(),
+    },
+    type: RecordType.Focus,
+    timestamp,
+  })
+
+  serialize(timestamp, kind, document, emitRecord, emitStats, scope)
+
+  if (window.visualViewport) {
+    emitRecord({
+      data: getVisualViewport(window.visualViewport),
+      type: RecordType.VisualViewport,
+      timestamp,
+    })
+  }
+}
+
+function defaultSerializeFullSnapshotCallback(): SerializeFullSnapshotCallback {
+  return isFullSnapshotChangeRecordsEnabled() ? serializeFullSnapshotAsChange : serializeFullSnapshot
+}

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

@@ -0,0 +1,12 @@
+export { trackMove } from './trackMove'
+export { trackMouseInteraction } from './trackMouseInteraction'
+export { trackScroll } from './trackScroll'
+export { trackViewportResize, trackVisualViewportResize } from './trackViewportResize'
+export { trackMediaInteraction } from './trackMediaInteraction'
+export { trackStyleSheet } from './trackStyleSheet'
+export { trackFocus } from './trackFocus'
+export { trackFrustration } from './trackFrustration'
+export { trackViewEnd } from './trackViewEnd'
+export { trackInput } from './trackInput'
+export { trackMutation } from './trackMutation'
+export type { Tracker } from './tracker.types'

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

@@ -0,0 +1,16 @@
+import { DOM_EVENT, addEventListeners, timeStampNow } from '@datadog/browser-core'
+import type { FocusRecord } from '../../../types'
+import { RecordType } from '../../../types'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback } from '../record.types'
+import type { Tracker } from './tracker.types'
+
+export function trackFocus(emitRecord: EmitRecordCallback<FocusRecord>, scope: RecordingScope): Tracker {
+  return addEventListeners(scope.configuration, window, [DOM_EVENT.FOCUS, DOM_EVENT.BLUR], () => {
+    emitRecord({
+      data: { has_focus: document.hasFocus() },
+      type: RecordType.Focus,
+      timestamp: timeStampNow(),
+    })
+  })
+}