🎨 [PANA-4372] Explicitly scope serialization state (#3887)

Author: sethfowler-datadog

packages/rum/src/domain/record/nodeIds.spec.ts

@@ -0,0 +1,98 @@
+import type { NodeId, NodeIds } from './nodeIds'
+import { createNodeIds, NodeIdConstants } from './nodeIds'
+
+describe('NodeIds', () => {
+  let nodeIds: NodeIds
+
+  beforeEach(() => {
+    nodeIds = createNodeIds()
+  })
+
+  describe('assign', () => {
+    it('assigns node ids in order', () => {
+      for (let id = NodeIdConstants.FIRST_ID as NodeId; id < NodeIdConstants.FIRST_ID + 3; id++) {
+        const node = document.createElement('div')
+        expect(nodeIds.assign(node)).toBe(id)
+        expect(nodeIds.assign(node)).toBe(id)
+      }
+    })
+
+    it('reuses any existing node id', () => {
+      nodeIds.assign(document.createElement('div'))
+      nodeIds.assign(document.createElement('div'))
+      const node = document.createElement('div')
+      const nodeId = nodeIds.assign(node)
+      expect(nodeIds.assign(node)).toBe(nodeId)
+      expect(nodeIds.get(node)).toBe(nodeId)
+    })
+  })
+
+  describe('get', () => {
+    it('returns undefined for DOM Nodes that have not been assigned an id', () => {
+      expect(nodeIds.get(document.createElement('div'))).toBe(undefined)
+    })
+
+    it('returns the serialized Node id when available', () => {
+      const node = document.createElement('div')
+      nodeIds.assign(node)
+      expect(nodeIds.get(node)).toBe(NodeIdConstants.FIRST_ID as NodeId)
+    })
+  })
+
+  describe('areAssignedForNodeAndAncestors', () => {
+    it('returns false for DOM Nodes that have not been assigned an id', () => {
+      expect(nodeIds.areAssignedForNodeAndAncestors(document.createElement('div'))).toBe(false)
+    })
+
+    it('returns true for DOM Nodes that have been assigned an id', () => {
+      const node = document.createElement('div')
+      nodeIds.assign(node)
+      expect(nodeIds.areAssignedForNodeAndAncestors(node)).toBe(true)
+    })
+
+    it('returns false for DOM Nodes when an ancestor has not been assigned an id', () => {
+      const node = document.createElement('div')
+      nodeIds.assign(node)
+
+      const parent = document.createElement('div')
+      parent.appendChild(node)
+      nodeIds.assign(parent)
+
+      const grandparent = document.createElement('div')
+      grandparent.appendChild(parent)
+
+      expect(nodeIds.areAssignedForNodeAndAncestors(node)).toBe(false)
+    })
+
+    it('returns true for DOM Nodes when all ancestors have been assigned an id', () => {
+      const node = document.createElement('div')
+      nodeIds.assign(node)
+
+      const parent = document.createElement('div')
+      parent.appendChild(node)
+      nodeIds.assign(parent)
+
+      const grandparent = document.createElement('div')
+      grandparent.appendChild(parent)
+      nodeIds.assign(grandparent)
+
+      expect(nodeIds.areAssignedForNodeAndAncestors(node)).toBe(true)
+    })
+
+    it('returns true for DOM Nodes in shadow subtrees', () => {
+      const node = document.createElement('div')
+      nodeIds.assign(node)
+
+      const parent = document.createElement('div')
+      parent.appendChild(node)
+      nodeIds.assign(parent)
+
+      const grandparent = document.createElement('div')
+      const shadowRoot = grandparent.attachShadow({ mode: 'open' })
+      shadowRoot.appendChild(parent)
+      nodeIds.assign(grandparent)
+
+      expect(nodeIds.areAssignedForNodeAndAncestors(node)).toBe(true)
+    })
+  })
+})

packages/rum/src/domain/record/nodeIds.ts

@@ -0,0 +1,46 @@
+import { getParentNode, isNodeShadowRoot } from '@datadog/browser-rum-core'
+
+export type NodeWithSerializedNode = Node & { __brand: 'NodeWithSerializedNode' }
+export type NodeId = number & { __brand: 'NodeId' }
+
+export const enum NodeIdConstants {
+  FIRST_ID = 1,
+}
+
+export interface NodeIds {
+  assign(node: Node): NodeId
+  get(node: Node): NodeId | undefined
+  areAssignedForNodeAndAncestors(node: Node): node is NodeWithSerializedNode
+}
+
+export function createNodeIds(): NodeIds {
+  const nodeIds = new WeakMap<Node, NodeId>()
+  let nextNodeId = NodeIdConstants.FIRST_ID
+
+  const get = (node: Node): NodeId | undefined => nodeIds.get(node)
+
+  return {
+    assign: (node: Node): NodeId => {
+      // Try to reuse any existing id.
+      let nodeId = get(node)
+      if (nodeId === undefined) {
+        nodeId = nextNodeId++ as NodeId
+        nodeIds.set(node, nodeId)
+      }
+      return nodeId
+    },
+
+    get,
+
+    areAssignedForNodeAndAncestors: (node: Node): node is NodeWithSerializedNode => {
+      let current: Node | null = node
+      while (current) {
+        if (get(current) === undefined && !isNodeShadowRoot(current)) {
+          return false
+        }
+        current = getParentNode(current)
+      }
+      return true
+    },
+  }
+}

packages/rum/src/domain/record/record.ts

@@ -23,6 +23,8 @@ import { initShadowRootsController } from './shadowRootsController'
 import { startFullSnapshots } from './startFullSnapshots'
 import { initRecordIds } from './recordIds'
 import type { SerializationStats } from './serialization'
+import { createSerializationScope } from './serialization'
+import { createNodeIds } from './nodeIds'
 
 export interface RecordOptions {
   emit?: (record: BrowserRecord, stats?: SerializationStats) => void
@@ -52,14 +54,20 @@ export function record(options: RecordOptions): RecordAPI {
   }
 
   const elementsScrollPositions = createElementsScrollPositions()
-
-  const shadowRootsController = initShadowRootsController(configuration, emitAndComputeStats, elementsScrollPositions)
+  const scope = createSerializationScope(createNodeIds())
+  const shadowRootsController = initShadowRootsController(
+    configuration,
+    scope,
+    emitAndComputeStats,
+    elementsScrollPositions
+  )
 
   const { stop: stopFullSnapshots } = startFullSnapshots(
     elementsScrollPositions,
     shadowRootsController,
     lifeCycle,
     configuration,
+    scope,
     flushMutations,
     emitAndComputeStats
   )
@@ -70,16 +78,16 @@ export function record(options: RecordOptions): RecordAPI {
   }
 
   const recordIds = initRecordIds()
-  const mutationTracker = trackMutation(emitAndComputeStats, configuration, shadowRootsController, document)
+  const mutationTracker = trackMutation(emitAndComputeStats, configuration, scope, shadowRootsController, document)
   const trackers: Tracker[] = [
     mutationTracker,
-    trackMove(configuration, emitAndComputeStats),
-    trackMouseInteraction(configuration, emitAndComputeStats, recordIds),
-    trackScroll(configuration, emitAndComputeStats, elementsScrollPositions, document),
+    trackMove(configuration, scope, emitAndComputeStats),
+    trackMouseInteraction(configuration, scope, emitAndComputeStats, recordIds),
+    trackScroll(configuration, scope, emitAndComputeStats, elementsScrollPositions, document),
     trackViewportResize(configuration, emitAndComputeStats),
-    trackInput(configuration, emitAndComputeStats),
-    trackMediaInteraction(configuration, emitAndComputeStats),
-    trackStyleSheet(emitAndComputeStats),
+    trackInput(configuration, scope, emitAndComputeStats),
+    trackMediaInteraction(configuration, scope, emitAndComputeStats),
+    trackStyleSheet(scope, emitAndComputeStats),
     trackFocus(configuration, emitAndComputeStats),
     trackVisualViewportResize(configuration, emitAndComputeStats),
     trackFrustration(lifeCycle, emitAndComputeStats, recordIds),

packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts

@@ -8,6 +8,8 @@ import {
   createElementsScrollPositions,
   createSerializationStats,
 } from '..'
+import { createNodeIds } from '../nodeIds'
+import { createSerializationScope } from './serializationScope'
 
 export const makeHtmlDoc = (htmlContent: string, privacyTag: string) => {
   try {
@@ -50,6 +52,7 @@ export const generateLeanSerializedDoc = (htmlContent: string, privacyTag: strin
         elementsScrollPositions: createElementsScrollPositions(),
       },
       configuration: {} as RumConfiguration,
+      scope: createSerializationScope(createNodeIds()),
     })! as unknown as Record<string, unknown>
   ) as unknown as SerializedNodeWithId
   return serializedDoc

packages/rum/src/domain/record/serialization/index.ts

@@ -1,14 +1,10 @@
-export {
-  getElementInputValue,
-  getSerializedNodeId,
-  hasSerializedNode,
-  nodeAndAncestorsHaveSerializedNode,
-} from './serializationUtils'
-export type { NodeWithSerializedNode } from './serialization.types'
+export { getElementInputValue } from './serializationUtils'
 export { SerializationContextStatus } from './serialization.types'
 export type { SerializationContext } from './serialization.types'
 export { serializeDocument } from './serializeDocument'
 export { serializeNodeWithId } from './serializeNode'
 export { serializeAttribute } from './serializeAttribute'
+export type { SerializationScope } from './serializationScope'
+export { createSerializationScope } from './serializationScope'
 export { createSerializationStats, updateSerializationStats, aggregateSerializationStats } from './serializationStats'
 export type { SerializationMetric, SerializationStats } from './serializationStats'

packages/rum/src/domain/record/serialization/serialization.types.ts

@@ -1,6 +1,7 @@
 import type { RumConfiguration, NodePrivacyLevel } from '@datadog/browser-rum-core'
 import type { ElementsScrollPositions } from '../elementsScrollPositions'
 import type { ShadowRootsController } from '../shadowRootsController'
+import type { SerializationScope } from './serializationScope'
 import type { SerializationStats } from './serializationStats'
 
 // Those values are the only one that can be used when inheriting privacy levels from parent to
@@ -42,6 +43,5 @@ export interface SerializeOptions {
   parentNodePrivacyLevel: ParentNodePrivacyLevel
   serializationContext: SerializationContext
   configuration: RumConfiguration
+  scope: SerializationScope
 }
-
-export type NodeWithSerializedNode = Node & { s: 'Node with serialized node' }

packages/rum/src/domain/record/serialization/serializationScope.ts

@@ -0,0 +1,9 @@
+import type { NodeIds } from '../nodeIds'
+
+export interface SerializationScope {
+  nodeIds: NodeIds
+}
+
+export function createSerializationScope(nodeIds: NodeIds): SerializationScope {
+  return { nodeIds }
+}

packages/rum/src/domain/record/serialization/serializationUtils.spec.ts

@@ -1,39 +1,5 @@
 import { NodePrivacyLevel } from '@datadog/browser-rum-core'
-import {
-  getSerializedNodeId,
-  hasSerializedNode,
-  setSerializedNodeId,
-  getElementInputValue,
-  switchToAbsoluteUrl,
-} from './serializationUtils'
-
-describe('serialized Node storage in DOM Nodes', () => {
-  describe('hasSerializedNode', () => {
-    it('returns false for DOM Nodes that are not yet serialized', () => {
-      expect(hasSerializedNode(document.createElement('div'))).toBe(false)
-    })
-
-    it('returns true for DOM Nodes that have been serialized', () => {
-      const node = document.createElement('div')
-      setSerializedNodeId(node, 42)
-
-      expect(hasSerializedNode(node)).toBe(true)
-    })
-  })
-
-  describe('getSerializedNodeId', () => {
-    it('returns undefined for DOM Nodes that are not yet serialized', () => {
-      expect(getSerializedNodeId(document.createElement('div'))).toBe(undefined)
-    })
-
-    it('returns the serialized Node id', () => {
-      const node = document.createElement('div')
-      setSerializedNodeId(node, 42)
-
-      expect(getSerializedNodeId(node)).toBe(42)
-    })
-  })
-})
+import { getElementInputValue, switchToAbsoluteUrl } from './serializationUtils'
 
 describe('getElementInputValue', () => {
   it('returns "undefined" for a non-input element', () => {

packages/rum/src/domain/record/serialization/serializationUtils.ts

@@ -1,34 +1,6 @@
 import { buildUrl } from '@datadog/browser-core'
-import { getParentNode, isNodeShadowRoot, CENSORED_STRING_MARK, shouldMaskNode } from '@datadog/browser-rum-core'
+import { CENSORED_STRING_MARK, shouldMaskNode } from '@datadog/browser-rum-core'
 import type { NodePrivacyLevel } from '@datadog/browser-rum-core'
-import type { NodeWithSerializedNode } from './serialization.types'
-
-const serializedNodeIds = new WeakMap<Node, number>()
-
-export function hasSerializedNode(node: Node): node is NodeWithSerializedNode {
-  return serializedNodeIds.has(node)
-}
-
-export function nodeAndAncestorsHaveSerializedNode(node: Node): node is NodeWithSerializedNode {
-  let current: Node | null = node
-  while (current) {
-    if (!hasSerializedNode(current) && !isNodeShadowRoot(current)) {
-      return false
-    }
-    current = getParentNode(current)
-  }
-  return true
-}
-
-export function getSerializedNodeId(node: NodeWithSerializedNode): number
-export function getSerializedNodeId(node: Node): number | undefined
-export function getSerializedNodeId(node: Node) {
-  return serializedNodeIds.get(node)
-}
-
-export function setSerializedNodeId(node: Node, serializeNodeId: number) {
-  serializedNodeIds.set(node, serializeNodeId)
-}
 
 /**
  * Get the element "value" to be serialized as an attribute or an input update record. It respects

packages/rum/src/domain/record/serialization/serializeDocument.ts

@@ -3,18 +3,21 @@ import type { RumConfiguration } from '@datadog/browser-rum-core'
 import type { SerializedNodeWithId } from '../../../types'
 import type { SerializationContext } from './serialization.types'
 import { serializeNodeWithId } from './serializeNode'
+import type { SerializationScope } from './serializationScope'
 import { updateSerializationStats } from './serializationStats'
 
 export function serializeDocument(
   document: Document,
   configuration: RumConfiguration,
+  scope: SerializationScope,
   serializationContext: SerializationContext
 ): SerializedNodeWithId {
   const serializationStart = timeStampNow()
   const serializedNode = serializeNodeWithId(document, {
     serializationContext,
     parentNodePrivacyLevel: configuration.defaultPrivacyLevel,
     configuration,
+    scope,
   })
   updateSerializationStats(
     serializationContext.serializationStats,