@depup/datadog__browser-rum 6.31.0-depup.0

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

@@ -0,0 +1,43 @@
+export interface SerializationMetric {
+  count: number
+  max: number
+  sum: number
+}
+
+export interface SerializationStats {
+  cssText: SerializationMetric
+  serializationDuration: SerializationMetric
+}
+
+export function createSerializationStats(): SerializationStats {
+  return {
+    cssText: {
+      count: 0,
+      max: 0,
+      sum: 0,
+    },
+    serializationDuration: {
+      count: 0,
+      max: 0,
+      sum: 0,
+    },
+  }
+}
+
+export function updateSerializationStats(
+  stats: SerializationStats,
+  metric: keyof SerializationStats,
+  value: number
+): void {
+  stats[metric].count += 1
+  stats[metric].max = Math.max(stats[metric].max, value)
+  stats[metric].sum += value
+}
+
+export function aggregateSerializationStats(aggregateStats: SerializationStats, stats: SerializationStats) {
+  for (const metric of ['cssText', 'serializationDuration'] as const) {
+    aggregateStats[metric].count += stats[metric].count
+    aggregateStats[metric].max = Math.max(aggregateStats[metric].max, stats[metric].max)
+    aggregateStats[metric].sum += stats[metric].sum
+  }
+}

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

@@ -0,0 +1,255 @@
+import type { TimeStamp } from '@datadog/browser-core'
+import { elapsed, timeStampNow } from '@datadog/browser-core'
+
+import { ChangeType, RecordType } from '../../../types'
+import type {
+  AddCDataSectionNodeChange,
+  AddDocTypeNodeChange,
+  AddDocumentFragmentNodeChange,
+  AddDocumentNodeChange,
+  AddElementNodeChange,
+  AddNodeChange,
+  AddShadowRootNodeChange,
+  AddTextNodeChange,
+  AttachedStyleSheetsChange,
+  AttributeChange,
+  BrowserRecord,
+  InsertionPoint,
+  MediaInteractionType,
+  StyleSheetMediaList,
+  StyleSheetRules,
+} from '../../../types'
+import type { NodeId, StyleSheetId } from '../itemIds'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import type { SerializationStats } from './serializationStats'
+import { createSerializationStats, updateSerializationStats } from './serializationStats'
+import { createChangeEncoder } from './changeEncoder'
+
+export type SerializationTransactionCallback = (transaction: SerializationTransaction) => void
+
+export const enum SerializationKind {
+  INITIAL_FULL_SNAPSHOT,
+  SUBSEQUENT_FULL_SNAPSHOT,
+  INCREMENTAL_SNAPSHOT,
+}
+
+/**
+ * A serialization transaction is used to build and emit a sequence of session replay
+ * records containing a serialized snapshot of the DOM.
+ */
+export interface SerializationTransaction {
+  /** Add a record to the transaction. It will be emitted when the transaction ends. */
+  add(record: BrowserRecord): void
+
+  /**
+   * Add a metric to the transaction's statistics. The aggregated statistics will be
+   * emitted when the transaction ends.
+   */
+  addMetric(metric: keyof SerializationStats, value: number): void
+
+  /**
+   * Assign and return an id to the given node. If the node has previously been assigned
+   * an id, the existing id will be reused.
+   */
+  assignId(node: Node): NodeId
+
+  /** The kind of serialization being performed in this transaction. */
+  kind: SerializationKind
+
+  /**
+   * A set used to track nodes which have been serialized in the current transaction. If
+   * undefined, this feature is disabled; this is the default state in new transactions
+   * for performance reasons. Set the property to a non-undefined value if you need this
+   * capability.
+   */
+  serializedNodeIds?: Set<NodeId>
+
+  /** The recording scope in which this transaction is occurring. */
+  scope: RecordingScope
+}
+
+/**
+ * Perform serialization within a transaction. At the end of the transaction, the
+ * generated records and statistics will be emitted.
+ */
+export function serializeInTransaction(
+  kind: SerializationKind,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope,
+  serialize: SerializationTransactionCallback
+): void {
+  const records: BrowserRecord[] = []
+  const stats = createSerializationStats()
+
+  const transaction: SerializationTransaction = {
+    add(record: BrowserRecord): void {
+      records.push(record)
+    },
+    addMetric(metric: keyof SerializationStats, value: number): void {
+      updateSerializationStats(stats, metric, value)
+    },
+    assignId(node: Node): NodeId {
+      const id = scope.nodeIds.getOrInsert(node)
+      if (transaction.serializedNodeIds) {
+        transaction.serializedNodeIds.add(id)
+      }
+      return id
+    },
+    kind,
+    scope,
+  }
+
+  const start = timeStampNow()
+  serialize(transaction)
+  updateSerializationStats(stats, 'serializationDuration', elapsed(start, timeStampNow()))
+
+  for (const record of records) {
+    emitRecord(record)
+  }
+
+  emitStats(stats)
+}
+
+type AddNodeParams<NodeChange extends AddNodeChange> = NodeChange extends [any, any, ...infer Params] ? Params : never
+
+export type ChangeSerializationTransactionCallback = (transaction: ChangeSerializationTransaction) => void
+
+/**
+ * ChangeSerializationTransaction is used to build and emit a BrowserChangeRecord
+ * containing a serialized snapshot of the DOM. Unlike SerializationTransaction, it
+ * doesn't support emitting arbitrary BrowserRecords; instead, the builder methods it
+ * exposes are used to construct a single BrowserChangeRecord which is emitted at the end
+ * of the transaction.
+ */
+export interface ChangeSerializationTransaction {
+  /**
+   * Add a metric to the transaction's statistics. The aggregated statistics will be
+   * emitted when the transaction ends.
+   */
+  addMetric(metric: keyof SerializationStats, value: number): void
+
+  /** Add a node to the document at the given insertion point. */
+  addNode(pos: InsertionPoint, nodeName: '#cdata-section', ...params: AddNodeParams<AddCDataSectionNodeChange>): void
+  addNode(pos: InsertionPoint, nodeName: '#doctype', ...params: AddNodeParams<AddDocTypeNodeChange>): void
+  addNode(pos: InsertionPoint, nodeName: '#document', ...params: AddNodeParams<AddDocumentNodeChange>): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: '#document-fragment',
+    ...params: AddNodeParams<AddDocumentFragmentNodeChange>
+  ): void
+  addNode(pos: InsertionPoint, nodeName: '#shadow-root', ...params: AddNodeParams<AddShadowRootNodeChange>): void
+  addNode(pos: InsertionPoint, nodeName: '#text', ...params: AddNodeParams<AddTextNodeChange>): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: Exclude<string, `#${string}`>,
+    ...params: AddNodeParams<AddElementNodeChange>
+  ): void
+  addNode(pos: InsertionPoint, nodeName: string, ...params: AddNodeParams<AddNodeChange>): void
+
+  /** Add a stylesheet to the document. */
+  addStyleSheet(rules: StyleSheetRules, mediaList?: StyleSheetMediaList, disabled?: boolean): void
+
+  /**
+   * Attach one or more stylesheets to a <link>, <style>, #document, #document-fragment,
+   * or #shadow-root node.
+   */
+  attachStyleSheets(nodeId: NodeId, sheetIds: StyleSheetId[]): void
+
+  /** Remove a node from the document. */
+  removeNode(nodeId: NodeId): void
+
+  /** Set a node's attributes to the given values. */
+  setAttributes(change: AttributeChange): void
+
+  /** Set the media playback state of an <audio> or <video> element. */
+  setMediaPlaybackState(nodeId: NodeId, state: MediaInteractionType): void
+
+  /** Set the given node's scroll position in CSS pixels. */
+  setScrollPosition(nodeId: NodeId, x: number, y: number): void
+
+  /** Set the given node's size in CSS pixels. */
+  setSize(nodeId: NodeId, width: number, height: number): void
+
+  /** Set the given node's text content. */
+  setText(nodeId: NodeId, content: string): void
+
+  /** The kind of serialization being performed in this transaction. */
+  kind: SerializationKind
+
+  /** The recording scope in which this transaction is occurring. */
+  scope: RecordingScope
+}
+
+export function serializeChangesInTransaction(
+  kind: SerializationKind,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope,
+  timestamp: TimeStamp,
+  serialize: ChangeSerializationTransactionCallback
+): void {
+  const encoder = createChangeEncoder(scope.stringIds)
+  const stats = createSerializationStats()
+
+  const transaction: ChangeSerializationTransaction = {
+    addMetric(metric: keyof SerializationStats, value: number): void {
+      updateSerializationStats(stats, metric, value)
+    },
+    addNode(...change): void {
+      encoder.add(ChangeType.AddNode, change as AddNodeChange)
+    },
+    addStyleSheet(rules: StyleSheetRules, mediaList?: StyleSheetMediaList, disabled?: boolean): void {
+      if (disabled) {
+        encoder.add(ChangeType.AddStyleSheet, [rules, mediaList || [], disabled])
+      } else if (mediaList) {
+        encoder.add(ChangeType.AddStyleSheet, [rules, mediaList])
+      } else {
+        encoder.add(ChangeType.AddStyleSheet, [rules])
+      }
+    },
+    attachStyleSheets(nodeId: NodeId, sheetIds: StyleSheetId[]): void {
+      const change: AttachedStyleSheetsChange = [nodeId]
+      for (const sheetId of sheetIds) {
+        change.push(sheetId)
+      }
+      encoder.add(ChangeType.AttachedStyleSheets, change)
+    },
+    removeNode(nodeId: NodeId): void {
+      encoder.add(ChangeType.RemoveNode, nodeId)
+    },
+    setAttributes(change: AttributeChange): void {
+      encoder.add(ChangeType.Attribute, change)
+    },
+    setMediaPlaybackState(nodeId: NodeId, state: MediaInteractionType): void {
+      encoder.add(ChangeType.MediaPlaybackState, [nodeId, state])
+    },
+    setScrollPosition(nodeId: NodeId, x: number, y: number): void {
+      encoder.add(ChangeType.ScrollPosition, [nodeId, x, y])
+    },
+    setSize(nodeId: NodeId, width: number, height: number): void {
+      encoder.add(ChangeType.Size, [nodeId, width, height])
+    },
+    setText(nodeId: NodeId, content: string): void {
+      encoder.add(ChangeType.Text, [nodeId, content])
+    },
+    kind,
+    scope,
+  }
+
+  const start = timeStampNow()
+  serialize(transaction)
+  updateSerializationStats(stats, 'serializationDuration', elapsed(start, timeStampNow()))
+
+  const changes = encoder.flush()
+  if (changes.length > 0) {
+    emitRecord({
+      data: changes,
+      type: RecordType.Change,
+      timestamp,
+    })
+  }
+
+  emitStats(stats)
+}

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

@@ -0,0 +1,103 @@
+import { buildUrl } from '@datadog/browser-core'
+import { CENSORED_STRING_MARK, shouldMaskNode } from '@datadog/browser-rum-core'
+import type { NodePrivacyLevel } from '@datadog/browser-rum-core'
+
+/**
+ * Get the element "value" to be serialized as an attribute or an input update record. It respects
+ * the input privacy mode of the element.
+ * PERFROMANCE OPTIMIZATION: Assumes that privacy level `HIDDEN` is never encountered because of earlier checks.
+ */
+export function getElementInputValue(element: Element, nodePrivacyLevel: NodePrivacyLevel) {
+  /*
+   BROWSER SPEC NOTE: <input>, <select>
+   For some <input> elements, the `value` is an exceptional property/attribute that has the
+   value synced between el.value and el.getAttribute()
+   input[type=button,checkbox,hidden,image,radio,reset,submit]
+   */
+  const tagName = element.tagName
+  const value = (element as HTMLInputElement | HTMLTextAreaElement).value
+
+  if (shouldMaskNode(element, nodePrivacyLevel)) {
+    const type = (element as HTMLInputElement | HTMLTextAreaElement).type
+    if (tagName === 'INPUT' && (type === 'button' || type === 'submit' || type === 'reset')) {
+      // Overrule `MASK` privacy level for button-like element values, as they are used during replay
+      // to display their label. They can still be hidden via the "hidden" privacy attribute or class name.
+      return value
+    } else if (!value || tagName === 'OPTION') {
+      // <Option> value provides no benefit
+      return
+    }
+    return CENSORED_STRING_MARK
+  }
+
+  if (tagName === 'OPTION' || tagName === 'SELECT') {
+    return (element as HTMLOptionElement | HTMLSelectElement).value
+  }
+
+  if (tagName !== 'INPUT' && tagName !== 'TEXTAREA') {
+    return
+  }
+
+  return value
+}
+
+export const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm
+export const ABSOLUTE_URL = /^[A-Za-z]+:|^\/\//
+export const DATA_URI = /^["']?data:.*,/i
+
+export function switchToAbsoluteUrl(cssText: string, cssHref: string | null): string {
+  return cssText.replace(
+    URL_IN_CSS_REF,
+    (
+      matchingSubstring: string,
+      singleQuote: string | undefined,
+      urlWrappedInSingleQuotes: string | undefined,
+      doubleQuote: string | undefined,
+      urlWrappedInDoubleQuotes: string | undefined,
+      urlNotWrappedInQuotes: string | undefined
+    ) => {
+      const url = urlWrappedInSingleQuotes || urlWrappedInDoubleQuotes || urlNotWrappedInQuotes
+
+      if (!cssHref || !url || ABSOLUTE_URL.test(url) || DATA_URI.test(url)) {
+        return matchingSubstring
+      }
+
+      const quote = singleQuote || doubleQuote || ''
+      return `url(${quote}${makeUrlAbsolute(url, cssHref)}${quote})`
+    }
+  )
+}
+
+function makeUrlAbsolute(url: string, baseUrl: string): string {
+  try {
+    return buildUrl(url, baseUrl).href
+  } catch {
+    return url
+  }
+}
+
+const TAG_NAME_REGEX = /[^a-z1-6-_]/
+export function getValidTagName(tagName: string): string {
+  const processedTagName = tagName.toLowerCase().trim()
+
+  if (TAG_NAME_REGEX.test(processedTagName)) {
+    // if the tag name is odd and we cannot extract
+    // anything from the string, then we return a
+    // generic div
+    return 'div'
+  }
+
+  return processedTagName
+}
+
+/**
+ * Returns the tag name of the given element, normalized to ensure a consistent lowercase
+ * representation regardless of whether the element is HTML, XHTML, or SVG.
+ */
+export function normalizedTagName(element: Element): string {
+  return element.tagName.toLowerCase()
+}
+
+export function censoredImageForSize(width: number, height: number) {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' style='background-color:silver'%3E%3C/svg%3E`
+}

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

@@ -0,0 +1,55 @@
+import {
+  NodePrivacyLevel,
+  CENSORED_STRING_MARK,
+  CENSORED_IMG_MARK,
+  sanitizeIfLongDataUrl,
+  shouldMaskAttribute,
+} from '@datadog/browser-rum-core'
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+import { censoredImageForSize } from './serializationUtils'
+
+// TODO: temporarily bump the Session Replay limit to 1Mb for dataUrls
+// This limit should be removed after [PANA-2843] is implemented
+export const MAX_ATTRIBUTE_VALUE_CHAR_LENGTH = 1_000_000
+
+export function serializeAttribute(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  attributeName: string,
+  configuration: RumConfiguration
+): string | null {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    // dup condition for direct access case
+    return null
+  }
+
+  const attributeValue = element.getAttribute(attributeName)
+  const tagName = element.tagName
+  if (shouldMaskAttribute(tagName, attributeName, attributeValue, nodePrivacyLevel, configuration)) {
+    // mask image URLs
+    if (tagName === 'IMG') {
+      // generate image with similar dimension than the original to have the same rendering behaviour
+      const image = element as HTMLImageElement
+      if (image.naturalWidth > 0) {
+        return censoredImageForSize(image.naturalWidth, image.naturalHeight)
+      }
+      const { width, height } = element.getBoundingClientRect()
+      if (width > 0 || height > 0) {
+        return censoredImageForSize(width, height)
+      }
+      // if we can't get the image size, fallback to the censored image
+      return CENSORED_IMG_MARK
+    }
+    if (tagName === 'SOURCE') {
+      return CENSORED_IMG_MARK
+    }
+
+    return CENSORED_STRING_MARK
+  }
+
+  if (!attributeValue) {
+    return attributeValue
+  }
+
+  return sanitizeIfLongDataUrl(attributeValue, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH)
+}

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

@@ -0,0 +1,194 @@
+import { NodePrivacyLevel, shouldMaskNode } from '@datadog/browser-rum-core'
+import { isSafari } from '@datadog/browser-core'
+import { getElementInputValue, normalizedTagName, switchToAbsoluteUrl } from './serializationUtils'
+import { serializeAttribute } from './serializeAttribute'
+import type { ChangeSerializationTransaction, SerializationTransaction } from './serializationTransaction'
+import { SerializationKind } from './serializationTransaction'
+import type { VirtualAttributes } from './serialization.types'
+
+export function serializeAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction | SerializationTransaction
+): Record<string, number | string> {
+  return {
+    ...serializeDOMAttributes(element, nodePrivacyLevel, transaction),
+    ...serializeVirtualAttributes(element, nodePrivacyLevel, transaction),
+  }
+}
+
+export function serializeDOMAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction | SerializationTransaction
+): Record<string, string> {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    return {}
+  }
+
+  const attrs: Record<string, string> = {}
+  const tagName = normalizedTagName(element)
+
+  for (let i = 0; i < element.attributes.length; i += 1) {
+    const attribute = element.attributes.item(i)!
+    const attributeName = attribute.name
+    const attributeValue = serializeAttribute(element, nodePrivacyLevel, attributeName, transaction.scope.configuration)
+    if (attributeValue !== null) {
+      attrs[attributeName] = attributeValue
+    }
+  }
+
+  if (
+    (element as HTMLInputElement).value &&
+    (tagName === 'textarea' || tagName === 'select' || tagName === 'option' || tagName === 'input')
+  ) {
+    const formValue = getElementInputValue(element, nodePrivacyLevel)
+    if (formValue !== undefined) {
+      attrs.value = formValue
+    }
+  }
+
+  /**
+   * <Option> can be selected, which occurs if its `value` matches ancestor `<Select>.value`
+   */
+  if (tagName === 'option') {
+    const optionElement = element as HTMLOptionElement
+    if (optionElement.selected && !shouldMaskNode(optionElement, nodePrivacyLevel)) {
+      attrs.selected = ''
+    } else {
+      delete attrs.selected
+    }
+  }
+
+  /**
+   * Forms: input[type=checkbox,radio]
+   * The `checked` property for <input> is a little bit special:
+   * 1. el.checked is a setter that returns if truthy.
+   * 2. getAttribute returns the string value
+   * getAttribute('checked') does not sync with `Element.checked`, so use JS property
+   * NOTE: `checked` property exists on `HTMLInputElement`. For serializer assumptions, we check for type=radio|check.
+   */
+  const inputElement = element as HTMLInputElement
+  if (tagName === 'input' && (inputElement.type === 'radio' || inputElement.type === 'checkbox')) {
+    if (inputElement.checked && !shouldMaskNode(inputElement, nodePrivacyLevel)) {
+      attrs.checked = ''
+    } else {
+      delete attrs.checked
+    }
+  }
+
+  return attrs
+}
+
+export function serializeVirtualAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: ChangeSerializationTransaction | SerializationTransaction
+): VirtualAttributes {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    return {}
+  }
+
+  const attrs: VirtualAttributes = {}
+  const doc = element.ownerDocument
+  const tagName = normalizedTagName(element)
+
+  // remote css
+  if (tagName === 'link') {
+    const stylesheet = Array.from(doc.styleSheets).find((s) => s.href === (element as HTMLLinkElement).href)
+    const cssText = getCssRulesString(stylesheet)
+    if (cssText && stylesheet) {
+      transaction.addMetric('cssText', cssText.length)
+      attrs._cssText = cssText
+    }
+  }
+
+  // dynamic stylesheet
+  if (tagName === 'style' && (element as HTMLStyleElement).sheet) {
+    const cssText = getCssRulesString((element as HTMLStyleElement).sheet)
+    if (cssText) {
+      transaction.addMetric('cssText', cssText.length)
+      attrs._cssText = cssText
+    }
+  }
+
+  /**
+   * Serialize the media playback state
+   */
+  if (tagName === 'audio' || tagName === 'video') {
+    const mediaElement = element as HTMLMediaElement
+    attrs.rr_mediaState = mediaElement.paused ? 'paused' : 'played'
+  }
+
+  /**
+   * Serialize the scroll state for each element only for full snapshot
+   */
+  let scrollTop: number | undefined
+  let scrollLeft: number | undefined
+  switch (transaction.kind) {
+    case SerializationKind.INITIAL_FULL_SNAPSHOT:
+      scrollTop = Math.round(element.scrollTop)
+      scrollLeft = Math.round(element.scrollLeft)
+      if (scrollTop || scrollLeft) {
+        transaction.scope.elementsScrollPositions.set(element, { scrollTop, scrollLeft })
+      }
+      break
+    case SerializationKind.SUBSEQUENT_FULL_SNAPSHOT:
+      if (transaction.scope.elementsScrollPositions.has(element)) {
+        ;({ scrollTop, scrollLeft } = transaction.scope.elementsScrollPositions.get(element)!)
+      }
+      break
+  }
+  if (scrollLeft) {
+    attrs.rr_scrollLeft = scrollLeft
+  }
+  if (scrollTop) {
+    attrs.rr_scrollTop = scrollTop
+  }
+
+  return attrs
+}
+
+export function getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
+  if (!cssStyleSheet) {
+    return null
+  }
+  let rules: CSSRuleList | undefined
+  try {
+    rules = cssStyleSheet.rules || cssStyleSheet.cssRules
+  } catch {
+    // if css is protected by CORS we cannot access cssRules see: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
+  }
+  if (!rules) {
+    return null
+  }
+  const styleSheetCssText = Array.from(rules, isSafari() ? getCssRuleStringForSafari : getCssRuleString).join('')
+  return switchToAbsoluteUrl(styleSheetCssText, cssStyleSheet.href)
+}
+
+function getCssRuleStringForSafari(rule: CSSRule): string {
+  // Safari does not escape attribute selectors containing : properly
+  // https://bugs.webkit.org/show_bug.cgi?id=184604
+  if (isCSSStyleRule(rule) && rule.selectorText.includes(':')) {
+    // This regex replaces [foo:bar] by [foo\\:bar]
+    const escapeColon = /(\[[\w-]+[^\\])(:[^\]]+\])/g
+    return rule.cssText.replace(escapeColon, '$1\\$2')
+  }
+
+  return getCssRuleString(rule)
+}
+
+function getCssRuleString(rule: CSSRule): string {
+  // If it's an @import rule, try to inline sub-rules recursively with `getCssRulesString`. This
+  // operation can fail if the imported stylesheet is protected by CORS, in which case we fallback
+  // to the @import rule CSS text.
+  return (isCSSImportRule(rule) && getCssRulesString(rule.styleSheet)) || rule.cssText
+}
+
+function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
+  return 'styleSheet' in rule
+}
+
+function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule {
+  return 'selectorText' in rule
+}

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

@@ -0,0 +1,46 @@
+import { getScrollX, getScrollY } from '@datadog/browser-rum-core'
+import type { TimeStamp } from '@datadog/browser-core'
+import type { BrowserFullSnapshotRecord } from '../../../types'
+import { RecordType } from '../../../types'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import { serializeNode } from './serializeNode'
+import { serializeInTransaction } from './serializationTransaction'
+import type { SerializationKind, SerializationTransaction } from './serializationTransaction'
+
+export function serializeFullSnapshot(
+  timestamp: TimeStamp,
+  kind: SerializationKind,
+  document: Document,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+): void {
+  serializeInTransaction(kind, emitRecord, emitStats, scope, (transaction: SerializationTransaction) => {
+    const defaultPrivacyLevel = transaction.scope.configuration.defaultPrivacyLevel
+
+    // We are sure that Documents are never ignored, so this function never returns null.
+    const node = serializeNode(document, defaultPrivacyLevel, transaction)!
+
+    const record: BrowserFullSnapshotRecord = {
+      data: {
+        node,
+        initialOffset: {
+          left: getScrollX(),
+          top: getScrollY(),
+        },
+      },
+      type: RecordType.FullSnapshot,
+      timestamp,
+    }
+    transaction.add(record)
+
+    scope.serializeObservable.notify({
+      type: 'full',
+      kind,
+      target: document,
+      timestamp,
+      v1: record,
+    })
+  })
+}