📈 [PANA-5371] Add telemetry to help evaluate new DOM mutation encoding (#4077)

Author: sethfowler-datadog

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

@@ -1084,10 +1084,12 @@ describe('serializeNode', () => {
 
 describe('serializeDocumentNode handles', function testAllowDomTree() {
   const toJSONObj = (data: any) => JSON.parse(JSON.stringify(data)) as unknown
+  let stats: SerializationStats
   let transaction: SerializationTransaction
 
   beforeEach(() => {
-    transaction = createSerializationTransactionForTesting()
+    stats = createSerializationStats()
+    transaction = createSerializationTransactionForTesting({ stats })
     registerCleanupTask(() => {
       if (isAdoptedStyleSheetsSupported()) {
         document.adoptedStyleSheets = []
@@ -1120,6 +1122,7 @@ describe('serializeDocumentNode handles', function testAllowDomTree() {
           },
         ],
       })
+      expect(stats.cssText).toEqual({ count: 1, max: 20, sum: 20 })
     })
   })
 

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

@@ -82,7 +82,7 @@ export function serializeDocumentNode(
     type: NodeType.Document,
     id: transaction.assignId(document),
     childNodes: serializeChildNodes(document, parentNodePrivacyLevel, transaction),
-    adoptedStyleSheets: serializeStyleSheets(document.adoptedStyleSheets),
+    adoptedStyleSheets: serializeStyleSheets(document.adoptedStyleSheets, transaction),
   }
 }
 
@@ -101,7 +101,7 @@ function serializeDocumentFragmentNode(
     id: transaction.assignId(element),
     childNodes: serializeChildNodes(element, parentNodePrivacyLevel, transaction),
     isShadowRoot,
-    adoptedStyleSheets: isShadowRoot ? serializeStyleSheets(element.adoptedStyleSheets) : undefined,
+    adoptedStyleSheets: isShadowRoot ? serializeStyleSheets(element.adoptedStyleSheets, transaction) : undefined,
   }
 }
 

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

@@ -216,6 +216,10 @@ function serializeStyleSheetsAsChange(
 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)
 }

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

@@ -1,15 +1,27 @@
 import { isAdoptedStyleSheetsSupported } from '@datadog/browser-core/test'
+import { createSerializationTransactionForTesting } from '../test/serialization.specHelper'
 import { serializeStyleSheets } from './serializeStyleSheets'
+import type { SerializationStats } from './serializationStats'
+import { createSerializationStats } from './serializationStats'
+import type { SerializationTransaction } from './serializationTransaction'
 
 describe('serializeStyleSheets', () => {
+  let stats: SerializationStats
+  let transaction: SerializationTransaction
+
   beforeEach(() => {
     if (!isAdoptedStyleSheetsSupported()) {
       pending('no adoptedStyleSheets support')
     }
+    stats = createSerializationStats()
+    transaction = createSerializationTransactionForTesting({ stats })
   })
+
   it('should return undefined if no stylesheets', () => {
-    expect(serializeStyleSheets(undefined)).toBe(undefined)
-    expect(serializeStyleSheets([])).toBe(undefined)
+    expect(serializeStyleSheets(undefined, transaction)).toBe(undefined)
+    expect(stats.cssText).toEqual({ count: 0, max: 0, sum: 0 })
+    expect(serializeStyleSheets([], transaction)).toBe(undefined)
+    expect(stats.cssText).toEqual({ count: 0, max: 0, sum: 0 })
   })
 
   it('should return serialized stylesheet', () => {
@@ -18,9 +30,10 @@ describe('serializeStyleSheets', () => {
     const printStylesheet = new CSSStyleSheet({ disabled: false, media: 'print' })
     printStylesheet.insertRule('a { color: red; }')
 
-    expect(serializeStyleSheets([disabledStylesheet, printStylesheet])).toEqual([
+    expect(serializeStyleSheets([disabledStylesheet, printStylesheet], transaction)).toEqual([
       { cssRules: ['div { width: 100%; }'], disabled: true, media: undefined },
       { cssRules: ['a { color: red; }'], disabled: undefined, media: ['print'] },
     ])
+    expect(stats.cssText).toEqual({ count: 2, max: 20, sum: 37 })
   })
 })

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

@@ -1,12 +1,20 @@
 import type { StyleSheet } from '../../../types'
+import type { SerializationTransaction } from './serializationTransaction'
 
-export function serializeStyleSheets(cssStyleSheets: CSSStyleSheet[] | undefined): StyleSheet[] | undefined {
+export function serializeStyleSheets(
+  cssStyleSheets: CSSStyleSheet[] | undefined,
+  transaction: SerializationTransaction
+): StyleSheet[] | undefined {
   if (cssStyleSheets === undefined || cssStyleSheets.length === 0) {
     return undefined
   }
   return cssStyleSheets.map((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,

packages/rum/src/domain/segmentCollection/startSegmentTelemetry.spec.ts

@@ -1,5 +1,10 @@
 import type { Telemetry, HttpRequestEvent, BandwidthStats } from '@datadog/browser-core'
-import { Observable } from '@datadog/browser-core'
+import {
+  addExperimentalFeatures,
+  ExperimentalFeature,
+  Observable,
+  resetExperimentalFeatures,
+} from '@datadog/browser-core'
 import type { MockTelemetry } from '@datadog/browser-core/test'
 import { registerCleanupTask } from '@datadog/browser-core/test'
 import { startMockTelemetry } from '../../../../core/test'
@@ -53,40 +58,51 @@ describe('segmentTelemetry', () => {
     setupSegmentTelemetryCollection()
 
     for (const result of ['failure', 'queue-full', 'success'] as const) {
-      generateReplayRequest({ result, isFullSnapshot: true })
+      for (const enableChangeRecords of [true, false] as const) {
+        if (enableChangeRecords) {
+          addExperimentalFeatures([ExperimentalFeature.USE_CHANGE_RECORDS])
+        }
 
-      expect(await telemetry.getEvents()).toEqual([
-        jasmine.objectContaining({
-          type: 'log',
-          status: 'debug',
-          message: 'Segment network request metrics',
-          metrics: {
-            cssText: {
-              count: 2,
-              max: 300,
-              sum: 500,
-            },
-            isFullSnapshot: true,
-            ongoingRequests: {
-              count: 2,
-              totalSize: 3000,
-            },
-            recordCount: 3,
-            result,
-            size: {
-              compressed: 1000,
-              raw: 2000,
-            },
-            serializationDuration: {
-              count: 3,
-              max: 65,
-              sum: 105,
+        generateReplayRequest({ result, isFullSnapshot: true })
+
+        expect(await telemetry.getEvents()).toEqual([
+          jasmine.objectContaining({
+            type: 'log',
+            status: 'debug',
+            message: 'Segment network request metrics',
+            metrics: {
+              cssText: {
+                count: 2,
+                max: 300,
+                sum: 500,
+              },
+              encoding: {
+                fullSnapshot: enableChangeRecords ? 'change' : 'v1',
+                incrementalSnapshot: 'v1',
+              },
+              isFullSnapshot: true,
+              ongoingRequests: {
+                count: 2,
+                totalSize: 3000,
+              },
+              recordCount: 3,
+              result,
+              size: {
+                compressed: 1000,
+                raw: 2000,
+              },
+              serializationDuration: {
+                count: 3,
+                max: 65,
+                sum: 105,
+              },
             },
-          },
-        }),
-      ])
+          }),
+        ])
 
-      telemetry.reset()
+        telemetry.reset()
+        resetExperimentalFeatures()
+      }
     }
   })
 
@@ -107,6 +123,10 @@ describe('segmentTelemetry', () => {
               max: 300,
               sum: 500,
             },
+            encoding: {
+              fullSnapshot: 'v1',
+              incrementalSnapshot: 'v1',
+            },
             isFullSnapshot: false,
             ongoingRequests: {
               count: 2,

packages/rum/src/domain/segmentCollection/startSegmentTelemetry.ts

@@ -1,5 +1,11 @@
 import type { BandwidthStats, Context, HttpRequestEvent, Observable, Telemetry } from '@datadog/browser-core'
-import { TelemetryMetrics, addTelemetryMetrics, noop } from '@datadog/browser-core'
+import {
+  ExperimentalFeature,
+  TelemetryMetrics,
+  addTelemetryMetrics,
+  isExperimentalFeatureEnabled,
+  noop,
+} from '@datadog/browser-core'
 import type { ReplayPayload } from './buildReplayPayload'
 
 interface SegmentMetrics extends Context {
@@ -8,6 +14,10 @@ interface SegmentMetrics extends Context {
     max: number
     sum: number
   }
+  encoding: {
+    fullSnapshot: 'v1' | 'change'
+    incrementalSnapshot: 'v1' | 'change'
+  }
   isFullSnapshot: boolean
   ongoingRequests: {
     count: number
@@ -62,6 +72,10 @@ function createSegmentMetrics(
       max: payload.cssText.max,
       sum: payload.cssText.sum,
     },
+    encoding: {
+      fullSnapshot: isExperimentalFeatureEnabled(ExperimentalFeature.USE_CHANGE_RECORDS) ? 'change' : 'v1',
+      incrementalSnapshot: 'v1',
+    },
     isFullSnapshot: payload.isFullSnapshot,
     ongoingRequests: {
       count: bandwidthStats.ongoingRequestCount,