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

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

@@ -3,227 +3,263 @@ import {
   getNodeSelfPrivacyLevel,
   getTextContent,
   isNodeShadowRoot,
-  hasChildNodes,
   forEachChildNodes,
   NodePrivacyLevel,
   PRIVACY_ATTR_NAME,
   PRIVACY_ATTR_VALUE_HIDDEN,
+  getScrollX,
+  getScrollY,
+  isElementNode,
 } from '@kubesense/kubesense-browser-rum-core'
-import type {
-  DocumentFragmentNode,
-  DocumentNode,
-  SerializedNodeWithId,
-  CDataNode,
-  DocumentTypeNode,
-  ElementNode,
-  TextNode,
-} from '../../../types'
-import { NodeType } from '../../../types'
-import { getValidTagName } from './serializationUtils'
-import type { ParentNodePrivacyLevel } from './serialization.types'
-import { serializeStyleSheets } from './serializeStyleSheets'
-import { serializeAttributes } from './serializeAttributes'
+import type { RoleAnnotatedStringLiteral } from '../../../types'
+import { MediaInteractionType, StringRole } from '../../../types'
+import type { NodeId, StyleSheetId } from '../encoding'
+import { createAttributeAssignment, createString } from '../encoding'
+import { isCanvasElement } from '../canvas/canvasUtils'
+import { CanvasStatus } from '../canvas/canvasManager'
+import type { InsertionCursor } from './insertionCursor'
 import type { SerializationTransaction } from './serializationTransaction'
+import { serializeDOMAttributes, serializeVirtualAttributes } from './serializeAttributes'
+import { normalizedTagName } from './serializationUtils'
 
 export function serializeNode(
-  node: Element,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
-  transaction: SerializationTransaction
-): (SerializedNodeWithId & ElementNode) | null
-export function serializeNode(
+  cursor: InsertionCursor,
   node: Node,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  parentPrivacyLevel: NodePrivacyLevel,
   transaction: SerializationTransaction
-): SerializedNodeWithId | null
-export function serializeNode(
-  node: Node,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
-  transaction: SerializationTransaction
-): SerializedNodeWithId | null {
+): void {
+  // Ignore the children of <style> elements; the CSS rules they contain are already
+  // serialized as StyleSheetSnapshots.
+  if (node.parentNode?.nodeName === 'STYLE') {
+    return
+  }
+
+  // Never serialize the descendants of HIDDEN or IGNORE'd elements.
+  if (parentPrivacyLevel === NodePrivacyLevel.HIDDEN || parentPrivacyLevel === NodePrivacyLevel.IGNORE) {
+    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:
+      serializeCDataNode(cursor, node as CDATASection, transaction)
+      break
     case node.DOCUMENT_NODE:
-      return serializeDocumentNode(node as Document, parentNodePrivacyLevel, transaction)
+      serializeDocumentNode(cursor, node as Document, transaction)
+      break
     case node.DOCUMENT_FRAGMENT_NODE:
-      return serializeDocumentFragmentNode(node as DocumentFragment, parentNodePrivacyLevel, transaction)
+      serializeDocumentFragmentNode(cursor, node as DocumentFragment, transaction)
+      break
     case node.DOCUMENT_TYPE_NODE:
-      return serializeDocumentTypeNode(node as DocumentType, transaction)
+      serializeDocumentTypeNode(cursor, node as DocumentType, transaction)
+      break
     case node.ELEMENT_NODE:
-      return serializeElementNode(node as Element, parentNodePrivacyLevel, transaction)
+      serializeElementNode(cursor, node as Element, privacyLevel, transaction)
+      break
     case node.TEXT_NODE:
-      return serializeTextNode(node as Text, parentNodePrivacyLevel, transaction)
-    case node.CDATA_SECTION_NODE:
-      return serializeCDataNode(node as CDATASection, transaction)
+      serializeTextNode(cursor, node as Text, privacyLevel, transaction)
+      break
     default:
-      return null
+      return
   }
-}
 
-export function serializeChildNodes(
-  node: Node,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
-  transaction: SerializationTransaction
-): SerializedNodeWithId[] {
-  const result: SerializedNodeWithId[] = []
+  // 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) => {
-    const serializedChildNode = serializeNode(childNode, parentNodePrivacyLevel, transaction)
-    if (serializedChildNode) {
-      result.push(serializedChildNode)
-    }
+    serializeNode(cursor, childNode, privacyLevel, transaction)
   })
-  return result
+  cursor.ascend()
 }
 
-export function serializeDocumentNode(
+function serializeDocumentNode(
+  cursor: InsertionCursor,
   document: Document,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
   transaction: SerializationTransaction
-): DocumentNode & SerializedNodeWithId {
-  return {
-    type: NodeType.Document,
-    id: transaction.assignId(document),
-    childNodes: serializeChildNodes(document, parentNodePrivacyLevel, transaction),
-    adoptedStyleSheets: serializeStyleSheets(document.adoptedStyleSheets),
-  }
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(document)
+  transaction.addNode(insertionPoint, createString(StringRole.NodeName, '#document'))
+  transaction.setScrollPosition(nodeId, getScrollX(), getScrollY())
+  serializeStyleSheets(document.adoptedStyleSheets, nodeId, transaction)
 }
 
 function serializeDocumentFragmentNode(
-  element: DocumentFragment,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  cursor: InsertionCursor,
+  documentFragment: DocumentFragment,
   transaction: SerializationTransaction
-): DocumentFragmentNode & SerializedNodeWithId {
-  const isShadowRoot = isNodeShadowRoot(element)
-  if (isShadowRoot) {
-    transaction.scope.shadowRootsController.addShadowRoot(element, transaction.scope)
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(documentFragment)
+  const isShadowRoot = isNodeShadowRoot(documentFragment)
+  if (!isShadowRoot) {
+    transaction.addNode(insertionPoint, createString(StringRole.NodeName, '#document-fragment'))
+    return
   }
 
-  return {
-    type: NodeType.DocumentFragment,
-    id: transaction.assignId(element),
-    childNodes: serializeChildNodes(element, parentNodePrivacyLevel, transaction),
-    isShadowRoot,
-    adoptedStyleSheets: isShadowRoot ? serializeStyleSheets(element.adoptedStyleSheets) : undefined,
-  }
+  transaction.addNode(insertionPoint, createString(StringRole.NodeName, '#shadow-root'))
+  transaction.scope.shadowRootsController.addShadowRoot(documentFragment, transaction.scope)
+  serializeStyleSheets(documentFragment.adoptedStyleSheets, nodeId, transaction)
 }
 
 function serializeDocumentTypeNode(
+  cursor: InsertionCursor,
   documentType: DocumentType,
   transaction: SerializationTransaction
-): DocumentTypeNode & SerializedNodeWithId {
-  return {
-    type: NodeType.DocumentType,
-    id: transaction.assignId(documentType),
-    name: documentType.name,
-    publicId: documentType.publicId,
-    systemId: documentType.systemId,
-  }
+): void {
+  const { insertionPoint } = cursor.advance(documentType)
+  transaction.addNode(
+    insertionPoint,
+    createString(StringRole.NodeName, '#doctype'),
+    createString(StringRole.AttributeValue, documentType.name),
+    createString(StringRole.AttributeValue, documentType.publicId),
+    createString(StringRole.Url, documentType.systemId)
+  )
 }
 
-/**
- * Serializing Element nodes involves capturing:
- * 1. HTML ATTRIBUTES:
- * 2. JS STATE:
- * - scroll offsets
- * - Form fields (input value, checkbox checked, option selection, range)
- * - Canvas state,
- * - Media (video/audio) play mode + currentTime
- * - iframe contents
- * - webcomponents
- * 3. CUSTOM PROPERTIES:
- * - height+width for when `hidden` to cover the element
- * 4. EXCLUDED INTERACTION STATE:
- * - focus (possible, but not worth perf impact)
- * - hover (tracked only via mouse activity)
- * - fullscreen mode
- */
-
 function serializeElementNode(
+  cursor: InsertionCursor,
   element: Element,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  privacyLevel: NodePrivacyLevel,
   transaction: SerializationTransaction
-): (ElementNode & SerializedNodeWithId) | null {
-  const tagName = getValidTagName(element.tagName)
-  const isSVG = isSVGElement(element) || undefined
-
-  // For performance reason, we don't use getNodePrivacyLevel directly: we leverage the
-  // parentNodePrivacyLevel option to avoid iterating over all parents
-  const nodePrivacyLevel = reducePrivacyLevel(getNodeSelfPrivacyLevel(element), parentNodePrivacyLevel)
-
-  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
-    const { width, height } = element.getBoundingClientRect()
-    return {
-      type: NodeType.Element,
-      id: transaction.assignId(element),
-      tagName,
-      attributes: {
-        rr_width: `${width}px`,
-        rr_height: `${height}px`,
-        [PRIVACY_ATTR_NAME]: PRIVACY_ATTR_VALUE_HIDDEN,
-      },
-      childNodes: [],
-      isSVG,
-    }
-  }
+): void {
+  const { nodeId, insertionPoint } = cursor.advance(element)
+  const domAttributes = serializeDOMAttributes(element, privacyLevel, transaction)
+  transaction.addNode(insertionPoint, encodedElementName(element), ...domAttributes)
 
-  // Ignore Elements like Script and some Link, Metas
-  if (nodePrivacyLevel === NodePrivacyLevel.IGNORE) {
-    return null
+  if (isCanvasElement(element)) {
+    transaction.scope.canvasManager.markCanvas(element, CanvasStatus.Dirty)
   }
 
-  const id = transaction.assignId(element)
-  const attributes = serializeAttributes(element, nodePrivacyLevel, transaction)
+  const {
+    _cssText: cssText,
+    rr_mediaState: mediaState,
+    rr_scrollLeft: scrollLeft,
+    rr_scrollTop: scrollTop,
+  } = serializeVirtualAttributes(element, privacyLevel, transaction)
 
-  let childNodes: SerializedNodeWithId[] = []
-  if (
-    hasChildNodes(element) &&
-    // Do not serialize style children as the css rules are already in the _cssText attribute
-    tagName !== 'style'
-  ) {
-    childNodes = serializeChildNodes(element, nodePrivacyLevel, transaction)
+  const linkOrStyle = element as HTMLLinkElement | HTMLStyleElement
+  if (cssText !== undefined && linkOrStyle.sheet) {
+    const sheetId = transaction.scope.styleSheetIds.getOrInsert(linkOrStyle.sheet)
+    transaction.addStyleSheet(createString(StringRole.Css, cssText))
+    transaction.attachStyleSheets(nodeId, [sheetId])
   }
 
-  return {
-    type: NodeType.Element,
-    id,
-    tagName,
-    attributes,
-    childNodes,
-    isSVG,
+  if (mediaState === 'played') {
+    transaction.setMediaPlaybackState(nodeId, MediaInteractionType.Play)
+  } else if (mediaState === 'paused') {
+    transaction.setMediaPlaybackState(nodeId, MediaInteractionType.Pause)
   }
-}
 
-function isSVGElement(el: Element): boolean {
-  return el.tagName === 'svg' || el instanceof SVGElement
+  if (scrollLeft !== undefined || scrollTop !== undefined) {
+    transaction.setScrollPosition(nodeId, scrollLeft || 0, scrollTop || 0)
+  }
 }
 
-/**
- * Text Nodes are dependant on Element nodes
- * Privacy levels are set on elements so we check the parentElement of a text node
- * for privacy level.
- */
-
 function serializeTextNode(
+  cursor: InsertionCursor,
   textNode: Text,
-  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  privacyLevel: NodePrivacyLevel,
   transaction: SerializationTransaction
-): (TextNode & SerializedNodeWithId) | null {
-  const textContent = getTextContent(textNode, parentNodePrivacyLevel)
-  if (textContent === undefined) {
-    return null
-  }
-  return {
-    type: NodeType.Text,
-    id: transaction.assignId(textNode),
-    textContent,
-  }
+): void {
+  const { insertionPoint } = cursor.advance(textNode)
+  const textContent = getTextContent(textNode, privacyLevel)
+  transaction.addNode(
+    insertionPoint,
+    createString(StringRole.NodeName, '#text'),
+    createString(StringRole.TextContent, textContent)
+  )
 }
 
 function serializeCDataNode(
-  node: CDATASection,
+  cursor: InsertionCursor,
+  cdataNode: CDATASection,
+  transaction: SerializationTransaction
+): void {
+  const { insertionPoint } = cursor.advance(cdataNode)
+  transaction.addNode(insertionPoint, createString(StringRole.NodeName, '#cdata-section'))
+}
+
+function serializeHiddenNodePlaceholder(
+  cursor: InsertionCursor,
+  node: Node,
   transaction: SerializationTransaction
-): CDataNode & SerializedNodeWithId {
-  return {
-    type: NodeType.CDATA,
-    id: transaction.assignId(node),
-    textContent: '',
+): void {
+  // We only generate placeholders for element nodes; other hidden nodes are simply not
+  // serialized. (But note that a non-element node can only be hidden if it's a descendant
+  // of another hidden node, since only element nodes can have a different privacy level
+  // than their parent.)
+  if (!isElementNode(node)) {
+    return
   }
+
+  const { nodeId, insertionPoint } = cursor.advance(node)
+  transaction.addNode(
+    insertionPoint,
+    encodedElementName(node),
+    createAttributeAssignment(normalizedTagName(node), PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_HIDDEN)
+  )
+  const { width, height } = node.getBoundingClientRect()
+  transaction.setSize(nodeId, width, height)
+}
+
+function serializeStyleSheets(
+  sheets: CSSStyleSheet[] | undefined,
+  nodeId: NodeId,
+  transaction: SerializationTransaction
+): void {
+  if (!sheets || sheets.length === 0) {
+    return undefined
+  }
+
+  transaction.attachStyleSheets(
+    nodeId,
+    sheets.map((sheet) => serializeStyleSheet(sheet, transaction))
+  )
+}
+
+function serializeStyleSheet(sheet: CSSStyleSheet, transaction: SerializationTransaction): StyleSheetId {
+  const rules = Array.from(sheet.cssRules || sheet.rules, (rule) => createString(StringRole.Css, rule.cssText))
+  const mediaList =
+    sheet.media.length > 0 ? Array.from(sheet.media).map((medium) => createString(StringRole.Css, medium)) : undefined
+  transaction.addMetric(
+    'cssText',
+    rules.reduce((totalLength, rule) => totalLength + rule.string.length, 0)
+  )
+  transaction.addStyleSheet(rules, mediaList, sheet.disabled)
+  return transaction.scope.styleSheetIds.getOrInsert(sheet)
+}
+
+function encodedElementName(element: Element): RoleAnnotatedStringLiteral {
+  const nodeName = element.nodeName
+  if (isSVGElement(element)) {
+    return createString(StringRole.NodeName, `svg>${nodeName}`)
+  }
+  return createString(StringRole.NodeName, nodeName)
+}
+
+function isSVGElement(element: Element): element is SVGElement {
+  return element.namespaceURI === 'http://www.w3.org/2000/svg'
 }

package/src/domain/record/shadowRootsController.ts

@@ -1,5 +1,5 @@
 import type { RecordingScope } from './recordingScope.ts'
-import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
+import type { EmitRecordCallback, EmitResourceCallback, EmitStatsCallback } from './record.types'
 import { trackInput, trackMutation, trackScroll } from './trackers'
 
 interface ShadowRootController {
@@ -19,6 +19,7 @@ export interface ShadowRootsController {
 
 export const initShadowRootsController = (
   emitRecord: EmitRecordCallback,
+  emitResource: EmitResourceCallback,
   emitStats: EmitStatsCallback
 ): ShadowRootsController => {
   const controllerByShadowRoot = new Map<ShadowRoot, ShadowRootController>()
@@ -28,9 +29,9 @@ export const initShadowRootsController = (
       if (controllerByShadowRoot.has(shadowRoot)) {
         return
       }
-      const mutationTracker = trackMutation(shadowRoot, emitRecord, emitStats, scope)
+      const mutationTracker = trackMutation(shadowRoot, emitRecord, emitResource, 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)
+      const inputTracker = trackInput(shadowRoot, emitRecord, emitStats, 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, {

package/src/domain/record/startFullSnapshots.ts

@@ -1,10 +1,9 @@
-import { LifeCycleEventType, getScrollX, getScrollY, getViewportDimension } from '@kubesense/kubesense-browser-rum-core'
+import { LifeCycleEventType, getViewportDimension } from '@kubesense/kubesense-browser-rum-core'
+import { timeStampNow } from '@kubesense/kubesense-js-core/time'
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
 import type { LifeCycle } from '@kubesense/kubesense-browser-rum-core'
-import { timeStampNow } from '@kubesense/kubesense-browser-core'
-import type { TimeStamp } from '@kubesense/kubesense-browser-core'
 import { RecordType } from '../../types'
-import type { SerializationTransaction } from './serialization'
-import { serializeDocument, serializeInTransaction, SerializationKind } from './serialization'
+import { SerializationKind, serializeFullSnapshot } from './serialization'
 import { getVisualViewport } from './viewports'
 import type { RecordingScope } from './recordingScope'
 import type { EmitRecordCallback, EmitStatsCallback } from './record.types'
@@ -41,44 +40,32 @@ export function takeFullSnapshot(
   emitStats: EmitStatsCallback,
   scope: RecordingScope
 ): void {
-  serializeInTransaction(kind, emitRecord, emitStats, scope, (transaction: SerializationTransaction): void => {
-    const { width, height } = getViewportDimension()
-    transaction.add({
-      data: {
-        height,
-        href: window.location.href,
-        width,
-      },
-      type: RecordType.Meta,
-      timestamp,
-    })
+  const { width, height } = getViewportDimension()
+  emitRecord({
+    data: {
+      height,
+      href: window.location.href,
+      width,
+    },
+    type: RecordType.Meta,
+    timestamp,
+  })
 
-    transaction.add({
-      data: {
-        has_focus: document.hasFocus(),
-      },
-      type: RecordType.Focus,
-      timestamp,
-    })
+  emitRecord({
+    data: {
+      has_focus: document.hasFocus(),
+    },
+    type: RecordType.Focus,
+    timestamp,
+  })
+
+  serializeFullSnapshot(timestamp, kind, document, emitRecord, emitStats, scope)
 
-    transaction.add({
-      data: {
-        node: serializeDocument(document, transaction),
-        initialOffset: {
-          left: getScrollX(),
-          top: getScrollY(),
-        },
-      },
-      type: RecordType.FullSnapshot,
+  if (window.visualViewport) {
+    emitRecord({
+      data: getVisualViewport(window.visualViewport),
+      type: RecordType.VisualViewport,
       timestamp,
     })
-
-    if (window.visualViewport) {
-      transaction.add({
-        data: getVisualViewport(window.visualViewport),
-        type: RecordType.VisualViewport,
-        timestamp,
-      })
-    }
-  })
+  }
 }

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

@@ -5,8 +5,9 @@ export { trackViewportResize, trackVisualViewportResize } from './trackViewportR
 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 { trackCanvasContent } from './trackCanvasContent'
+export { trackCanvasCapture } from './trackCanvasCapture'
 export type { Tracker } from './tracker.types'