@kubesense/kubesense-browser-rum 1.8.0 → 2.0.0-beta.1

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

@@ -0,0 +1,26 @@
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import { serializeInTransaction } from './serializationTransaction'
+import type { SerializationTransaction, SerializationKind } from './serializationTransaction'
+import { serializeNode } from './serializeNode'
+import { createRootInsertionCursor } from './insertionCursor'
+
+export function serializeFullSnapshot(
+  timestamp: TimeStamp,
+  kind: SerializationKind,
+  document: Document,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+): void {
+  scope.resetIds()
+  serializeInTransaction(kind, emitRecord, emitStats, scope, timestamp, (transaction: SerializationTransaction) => {
+    serializeNode(
+      createRootInsertionCursor(scope.nodeIds),
+      document,
+      scope.configuration.defaultPrivacyLevel,
+      transaction
+    )
+  })
+}

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

@@ -0,0 +1,357 @@
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
+import type { NodePrivacyLevelCache, RumMutationRecord } from '@kubesense/kubesense-browser-rum-core'
+import {
+  isNodeShadowHost,
+  getParentNode,
+  forEachChildNodes,
+  getNodePrivacyLevel,
+  getTextContent,
+  NodePrivacyLevel,
+} from '@kubesense/kubesense-browser-rum-core'
+import { StringRole } from '../../../types'
+import type { RecordingScope } from '../recordingScope'
+import type { EmitRecordCallback, EmitResourceCallback, EmitStatsCallback } from '../record.types'
+import type { NodeId, NodeIds, RoleAnnotatedAttributeChange } from '../encoding'
+import { createAttributeAssignment, createAttributeAssignmentOrDeletion, createString } from '../encoding'
+import { isCanvasElement, isCanvasSizeAttribute } from '../canvas/canvasUtils'
+import { CanvasStatus } from '../canvas/canvasManager'
+import type { SerializationTransaction } from './serializationTransaction'
+import { SerializationKind, serializeInTransaction } from './serializationTransaction'
+import { serializeNode } from './serializeNode'
+import { createChildInsertionCursor } from './insertionCursor'
+import { getElementInputValue, normalizedTagName } from './serializationUtils'
+import { serializeAttribute } from './serializeAttribute'
+
+export function serializeMutations(
+  timestamp: TimeStamp,
+  mutations: RumMutationRecord[],
+  emitRecord: EmitRecordCallback,
+  emitResource: EmitResourceCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope
+): void {
+  serializeInTransaction(
+    SerializationKind.INCREMENTAL_SNAPSHOT,
+    emitRecord,
+    emitStats,
+    scope,
+    timestamp,
+    (transaction: SerializationTransaction) => processMutations(mutations, emitResource, transaction)
+  )
+}
+
+type AttributeName = string
+type OldValue = string | null
+
+function processMutations(
+  mutations: RumMutationRecord[],
+  emitResource: EmitResourceCallback,
+  transaction: SerializationTransaction
+): void {
+  const addedNodes = new Set<Node>()
+  const attributeMutations = new Map<Element, Map<AttributeName, OldValue>>()
+  const characterDataMutations = new Map<Node, OldValue>()
+  const removedNodes = new Set<Node>()
+
+  // Collect the changes made by this sequence of mutations. It's important to think of
+  // the mutations as telling us which parts of the tree are dirty, but not necessarily as
+  // specifying exactly which changes have occurred; trying to be too clever will result
+  // in incorrect behavior. For example, if we see a sequence of mutations where a node is
+  // removed and then added back in the same position, one might be tempted to "cancel
+  // out" these two changes and ignore both mutations, but that could cause us to miss
+  // changes to the node that occurred while it was detached.
+  for (const mutation of mutations) {
+    switch (mutation.type) {
+      case 'attributes': {
+        const node = mutation.target
+        let attributes = attributeMutations.get(node)
+        if (!attributes) {
+          attributes = new Map<AttributeName, OldValue>()
+          attributeMutations.set(node, attributes)
+        }
+        const attributeName = mutation.attributeName
+        if (!attributes.has(attributeName)) {
+          attributes.set(attributeName, mutation.oldValue)
+        }
+        break
+      }
+
+      case 'characterData':
+        if (!characterDataMutations.has(mutation.target)) {
+          characterDataMutations.set(mutation.target, mutation.oldValue)
+        }
+        break
+
+      case 'childList':
+        for (let index = 0; index < mutation.addedNodes.length; index++) {
+          addedNodes.add(mutation.addedNodes[index])
+        }
+        for (let index = 0; index < mutation.removedNodes.length; index++) {
+          removedNodes.add(mutation.removedNodes[index])
+        }
+        break
+    }
+  }
+
+  // Before we process any mutations, snapshot the id that the next newly-added node will
+  // receive. We know that any node with an id greater than or equal to this one is new
+  // and will have been serialized in its entirety in processAddedNodes(), so we can skip
+  // processing more fine-grained mutations for these nodes.
+  const firstNewNodeId = transaction.scope.nodeIds.nextId
+
+  // Because we process incremental mutations synchronously, we know that privacy levels
+  // cannot change during the process, so we use a single, shared privacy level cache.
+  const nodePrivacyLevelCache: NodePrivacyLevelCache = new Map()
+
+  processRemovedNodes(removedNodes, transaction)
+  processAddedNodes(addedNodes, nodePrivacyLevelCache, transaction)
+  processCharacterDataMutations(characterDataMutations, firstNewNodeId, nodePrivacyLevelCache, transaction)
+  processAttributeMutations(attributeMutations, firstNewNodeId, nodePrivacyLevelCache, transaction)
+  processCanvasContentMutations(nodePrivacyLevelCache, emitResource, transaction)
+}
+
+function processRemovedNodes(nodes: Set<Node>, transaction: SerializationTransaction): void {
+  const nodeIds = transaction.scope.nodeIds
+
+  for (const node of nodes) {
+    const nodeId = nodeIds.get(node)
+    if (nodeId === undefined) {
+      continue // This node wasn't serialized.
+    }
+
+    forNodeAndDescendants(node, (node: Node) => {
+      if (isCanvasElement(node)) {
+        transaction.scope.canvasManager.forgetCanvas(node)
+      }
+
+      if (isNodeShadowHost(node)) {
+        transaction.scope.shadowRootsController.removeShadowRoot(node.shadowRoot)
+      }
+
+      // Forget this node's identity. If it's added to the DOM again in another mutation,
+      // we'll treat it as a new node. This reduces the number of edge cases that we need
+      // to deal with; for example, changes in privacy level as a result of the different
+      // ancestor chain in the new position are handled without any special effort on our
+      // part.
+      nodeIds.delete(node)
+    })
+
+    transaction.removeNode(nodeId)
+  }
+}
+
+function processAddedNodes(
+  nodes: Set<Node>,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+): void {
+  const nodeIds = transaction.scope.nodeIds
+
+  for (const node of nodes) {
+    if (!node.isConnected) {
+      continue // This node is not in the DOM.
+    }
+
+    const existingNodeId = nodeIds.get(node)
+    if (existingNodeId !== undefined) {
+      continue // This node has already been serialized.
+    }
+
+    const parentNode = getParentNode(node)
+    if (!parentNode) {
+      continue // This node has no parent.
+    }
+
+    const parentId = nodeIds.get(parentNode)
+    if (parentId === undefined) {
+      // This node's parent hasn't been serialized (e.g. because it has privacy level
+      // HIDDEN), so we shouldn't serialize this node either.
+      continue
+    }
+
+    const parentNodePrivacyLevel = getNodePrivacyLevel(
+      parentNode,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+
+    const nextSiblingId = getNextSiblingId(node, nodeIds)
+
+    serializeNode(
+      createChildInsertionCursor(parentId, nextSiblingId, nodeIds),
+      node,
+      parentNodePrivacyLevel,
+      transaction
+    )
+  }
+}
+
+function processCharacterDataMutations(
+  mutations: Map<Node, OldValue>,
+  firstNewNodeId: NodeId,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+): void {
+  const nodeIds = transaction.scope.nodeIds
+
+  for (const [node, oldValue] of mutations) {
+    if (node.textContent === oldValue) {
+      continue // No change since the last snapshot.
+    }
+
+    if (!node.isConnected) {
+      continue // This node is not in the DOM.
+    }
+
+    const nodeId = nodeIds.get(node)
+    if (nodeId === undefined) {
+      continue // This node was never serialized.
+    }
+    if (nodeId >= firstNewNodeId) {
+      // This node was just serialized, so we've already got an up-to-date copy of its
+      // text content.
+      continue
+    }
+
+    const parentNode = getParentNode(node)
+    if (!parentNode) {
+      continue // This node has no parent.
+    }
+
+    const parentNodePrivacyLevel = getNodePrivacyLevel(
+      parentNode,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    if (parentNodePrivacyLevel === NodePrivacyLevel.HIDDEN || parentNodePrivacyLevel === NodePrivacyLevel.IGNORE) {
+      continue // Mutations to this node should be ignored.
+    }
+
+    const content = getTextContent(node, parentNodePrivacyLevel)
+    transaction.setText(nodeId, createString(StringRole.TextContent, content))
+  }
+}
+
+function processAttributeMutations(
+  mutations: Map<Element, Map<AttributeName, OldValue>>,
+  firstNewNodeId: NodeId,
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  transaction: SerializationTransaction
+): void {
+  const nodeIds = transaction.scope.nodeIds
+
+  for (const [node, attributeNames] of mutations) {
+    if (!node.isConnected) {
+      continue // This node is not in the DOM.
+    }
+
+    const nodeId = nodeIds.get(node)
+    if (nodeId === undefined) {
+      continue // This node was never serialized.
+    }
+    if (nodeId >= firstNewNodeId) {
+      // This node was just serialized, so we've already got an up-to-date copy of its
+      // attributes.
+      continue
+    }
+
+    const privacyLevel = getNodePrivacyLevel(
+      node,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    if (privacyLevel === NodePrivacyLevel.HIDDEN || privacyLevel === NodePrivacyLevel.IGNORE) {
+      continue // Mutations to this node should be ignored.
+    }
+
+    const tagName = normalizedTagName(node)
+
+    const change: RoleAnnotatedAttributeChange = [nodeId]
+    for (const [domAttributeName, oldValue] of attributeNames) {
+      if (isCanvasElement(node) && isCanvasSizeAttribute(domAttributeName)) {
+        // Assigning either dimension resets the bitmap even when the attribute value does not change,
+        // so this must run before the "no change since the last snapshot" check below.
+        transaction.scope.canvasManager.resetCanvasBitmap(node)
+      }
+
+      if (node.getAttribute(domAttributeName) === oldValue) {
+        continue // No change since the last snapshot.
+      }
+
+      if (domAttributeName === 'value') {
+        const domAttributeValue = getElementInputValue(node, privacyLevel)
+        if (domAttributeValue !== undefined) {
+          change.push(createAttributeAssignment(tagName, domAttributeName, domAttributeValue))
+        }
+        continue
+      }
+
+      const domAttributeValue = serializeAttribute(
+        node,
+        privacyLevel,
+        domAttributeName,
+        transaction.scope.configuration
+      )
+      change.push(createAttributeAssignmentOrDeletion(tagName, domAttributeName, domAttributeValue))
+    }
+
+    if (change.length > 1) {
+      transaction.setAttributes(change)
+    }
+  }
+}
+
+function processCanvasContentMutations(
+  nodePrivacyLevelCache: NodePrivacyLevelCache,
+  emitResource: EmitResourceCallback,
+  transaction: SerializationTransaction
+): void {
+  for (const { canvas, captureAttempt, hash, image } of transaction.scope.canvasManager.takeCanvasContentMutations()) {
+    if (!captureAttempt.isCurrent() || !canvas.isConnected) {
+      continue
+    }
+    const nodeId = transaction.scope.nodeIds.get(canvas)
+    if (nodeId === undefined) {
+      transaction.scope.canvasManager.forgetCanvas(canvas)
+      continue
+    }
+    const privacyLevel = getNodePrivacyLevel(
+      canvas,
+      transaction.scope.configuration.defaultPrivacyLevel,
+      nodePrivacyLevelCache
+    )
+    if (privacyLevel !== NodePrivacyLevel.ALLOW) {
+      transaction.scope.canvasManager.markCanvas(canvas, CanvasStatus.Dirty)
+      continue
+    }
+    try {
+      emitResource(hash, image, () => {
+        if (captureAttempt.isCurrent()) {
+          transaction.scope.canvasManager.retryCanvas(canvas)
+        }
+      })
+      transaction.setImageContent(nodeId, createString(StringRole.ResourceId, hash))
+      captureAttempt.setLastChangeHash(hash)
+    } catch {
+      transaction.scope.canvasManager.markCanvas(canvas, CanvasStatus.Dirty)
+    }
+  }
+}
+
+function getNextSiblingId(node: Node, nodeIds: NodeIds): NodeId | undefined {
+  let nextSibling = node.nextSibling
+  while (nextSibling) {
+    const id = nodeIds.get(nextSibling)
+    if (id !== undefined) {
+      return id
+    }
+    nextSibling = nextSibling.nextSibling
+  }
+
+  return undefined
+}
+
+function forNodeAndDescendants(node: Node, action: (node: Node) => void): void {
+  action(node)
+  forEachChildNodes(node, (childNode) => forNodeAndDescendants(childNode, action))
+}