✨[PANA-3818] Add telemetry for DOM serialization performance (#3792)

sethfowler-datadog · web-flow · commit 036a26e24747 · 2025-08-20T10:05:23.000+01:00
diff --git a/packages/rum/src/domain/record/serialization/index.ts b/packages/rum/src/domain/record/serialization/index.ts
@@ -10,9 +10,5 @@ export type { SerializationContext } from './serialization.types'
 export { serializeDocument } from './serializeDocument'
 export { serializeNodeWithId } from './serializeNode'
 export { serializeAttribute } from './serializeAttribute'
-export {
-  createSerializationStats,
-  updateCssTextSerializationStats,
-  aggregateSerializationStats,
-} from './serializationStats'
+export { createSerializationStats, updateSerializationStats, aggregateSerializationStats } from './serializationStats'
 export type { SerializationMetric, SerializationStats } from './serializationStats'
diff --git a/packages/rum/src/domain/record/serialization/serializationStats.spec.ts b/packages/rum/src/domain/record/serialization/serializationStats.spec.ts
@@ -1,40 +1,59 @@
-import {
-  aggregateSerializationStats,
-  createSerializationStats,
-  updateCssTextSerializationStats,
-} from './serializationStats'
+import { aggregateSerializationStats, createSerializationStats, updateSerializationStats } from './serializationStats'
 
 describe('serializationStats', () => {
   describe('stats for _cssText', () => {
     it('can be updated', () => {
       const stats = createSerializationStats()
 
-      updateCssTextSerializationStats(stats, 'div { color: blue; }'.length)
+      updateSerializationStats(stats, 'cssText', 'div { color: blue; }'.length)
       expect(stats.cssText.count).toBe(1)
       expect(stats.cssText.max).toBe(20)
       expect(stats.cssText.sum).toBe(20)
 
-      updateCssTextSerializationStats(stats, 'span { background-color: red; }'.length)
+      updateSerializationStats(stats, 'cssText', 'span { background-color: red; }'.length)
       expect(stats.cssText.count).toBe(2)
       expect(stats.cssText.max).toBe(31)
       expect(stats.cssText.sum).toBe(51)
     })
   })
 
+  describe('stats for serialization duration', () => {
+    it('can be updated', () => {
+      const stats = createSerializationStats()
+
+      updateSerializationStats(stats, 'serializationDuration', 30)
+      expect(stats.serializationDuration.count).toBe(1)
+      expect(stats.serializationDuration.max).toBe(30)
+      expect(stats.serializationDuration.sum).toBe(30)
+
+      updateSerializationStats(stats, 'serializationDuration', 60)
+      expect(stats.serializationDuration.count).toBe(2)
+      expect(stats.serializationDuration.max).toBe(60)
+      expect(stats.serializationDuration.sum).toBe(90)
+    })
+  })
+
   it('can be aggregated', () => {
     const aggregateStats = createSerializationStats()
 
     const stats1 = createSerializationStats()
-    updateCssTextSerializationStats(stats1, 'div { color: blue; }'.length)
-    updateCssTextSerializationStats(stats1, 'span { background-color: red; }'.length)
+    updateSerializationStats(stats1, 'cssText', 'div { color: blue; }'.length)
+    updateSerializationStats(stats1, 'serializationDuration', 16)
+    updateSerializationStats(stats1, 'cssText', 'span { background-color: red; }'.length)
+    updateSerializationStats(stats1, 'serializationDuration', 32)
     aggregateSerializationStats(aggregateStats, stats1)
 
     const stats2 = createSerializationStats()
-    updateCssTextSerializationStats(stats2, 'p { width: 100%; }'.length)
+    updateSerializationStats(stats2, 'cssText', 'p { width: 100%; }'.length)
+    updateSerializationStats(stats2, 'serializationDuration', 18)
+    updateSerializationStats(stats2, 'serializationDuration', 9)
     aggregateSerializationStats(aggregateStats, stats2)
 
     expect(aggregateStats.cssText.count).toBe(3)
     expect(aggregateStats.cssText.max).toBe(31)
     expect(aggregateStats.cssText.sum).toBe(69)
+    expect(aggregateStats.serializationDuration.count).toBe(4)
+    expect(aggregateStats.serializationDuration.max).toBe(32)
+    expect(aggregateStats.serializationDuration.sum).toBe(75)
   })
 })
diff --git a/packages/rum/src/domain/record/serialization/serializationStats.ts b/packages/rum/src/domain/record/serialization/serializationStats.ts
@@ -6,6 +6,7 @@ export interface SerializationMetric {
 
 export interface SerializationStats {
   cssText: SerializationMetric
+  serializationDuration: SerializationMetric
 }
 
 export function createSerializationStats(): SerializationStats {
@@ -15,17 +16,28 @@ export function createSerializationStats(): SerializationStats {
       max: 0,
       sum: 0,
     },
+    serializationDuration: {
+      count: 0,
+      max: 0,
+      sum: 0,
+    },
   }
 }
 
-export function updateCssTextSerializationStats(stats: SerializationStats, value: number): void {
-  stats.cssText.count += 1
-  stats.cssText.max = Math.max(stats.cssText.max, value)
-  stats.cssText.sum += value
+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) {
-  aggregateStats.cssText.count += stats.cssText.count
-  aggregateStats.cssText.max = Math.max(aggregateStats.cssText.max, stats.cssText.max)
-  aggregateStats.cssText.sum += stats.cssText.sum
+  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
+  }
 }
diff --git a/packages/rum/src/domain/record/serialization/serializeAttributes.ts b/packages/rum/src/domain/record/serialization/serializeAttributes.ts
@@ -4,7 +4,7 @@ import { getElementInputValue, switchToAbsoluteUrl, getValidTagName } from './se
 import type { SerializeOptions } from './serialization.types'
 import { SerializationContextStatus } from './serialization.types'
 import { serializeAttribute } from './serializeAttribute'
-import { updateCssTextSerializationStats } from './serializationStats'
+import { updateSerializationStats } from './serializationStats'
 
 export function serializeAttributes(
   element: Element,
@@ -53,7 +53,7 @@ export function serializeAttributes(
     const stylesheet = Array.from(doc.styleSheets).find((s) => s.href === (element as HTMLLinkElement).href)
     const cssText = getCssRulesString(stylesheet)
     if (cssText && stylesheet) {
-      updateCssTextSerializationStats(options.serializationContext.serializationStats, cssText.length)
+      updateSerializationStats(options.serializationContext.serializationStats, 'cssText', cssText.length)
       safeAttrs._cssText = cssText
     }
   }
@@ -62,7 +62,7 @@ export function serializeAttributes(
   if (tagName === 'style' && (element as HTMLStyleElement).sheet) {
     const cssText = getCssRulesString((element as HTMLStyleElement).sheet)
     if (cssText) {
-      updateCssTextSerializationStats(options.serializationContext.serializationStats, cssText.length)
+      updateSerializationStats(options.serializationContext.serializationStats, 'cssText', cssText.length)
       safeAttrs._cssText = cssText
     }
   }
diff --git a/packages/rum/src/domain/record/serialization/serializeDocument.ts b/packages/rum/src/domain/record/serialization/serializeDocument.ts
@@ -1,17 +1,27 @@
+import { elapsed, timeStampNow } from '@datadog/browser-core'
 import type { RumConfiguration } from '@datadog/browser-rum-core'
 import type { SerializedNodeWithId } from '../../../types'
 import type { SerializationContext } from './serialization.types'
 import { serializeNodeWithId } from './serializeNode'
+import { updateSerializationStats } from './serializationStats'
 
 export function serializeDocument(
   document: Document,
   configuration: RumConfiguration,
   serializationContext: SerializationContext
 ): SerializedNodeWithId {
-  // We are sure that Documents are never ignored, so this function never returns null
-  return serializeNodeWithId(document, {
+  const serializationStart = timeStampNow()
+  const serializedNode = serializeNodeWithId(document, {
     serializationContext,
     parentNodePrivacyLevel: configuration.defaultPrivacyLevel,
     configuration,
-  })!
+  })
+  updateSerializationStats(
+    serializationContext.serializationStats,
+    'serializationDuration',
+    elapsed(serializationStart, timeStampNow())
+  )
+
+  // We are sure that Documents are never ignored, so this function never returns null
+  return serializedNode!
 }
diff --git a/packages/rum/src/domain/record/serialization/serializeNode.spec.ts b/packages/rum/src/domain/record/serialization/serializeNode.spec.ts
@@ -550,6 +550,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 1, max: 21, sum: 21 },
+          serializationDuration: jasmine.anything(),
         })
       })
 
@@ -567,6 +568,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 1, max: 21, sum: 21 },
+          serializationDuration: jasmine.anything(),
         })
       })
 
@@ -585,6 +587,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 1, max: 41, sum: 41 },
+          serializationDuration: jasmine.anything(),
         })
       })
 
@@ -625,6 +628,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 2, max: 33, sum: 54 },
+          serializationDuration: jasmine.anything(),
         })
       })
     })
@@ -652,6 +656,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 0, max: 0, sum: 0 },
+          serializationDuration: jasmine.anything(),
         })
       })
 
@@ -685,6 +690,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 1, max: 21, sum: 21 },
+          serializationDuration: jasmine.anything(),
         })
       })
 
@@ -720,6 +726,7 @@ describe('serializeNodeWithId', () => {
         })
         expect(options.serializationContext.serializationStats).toEqual({
           cssText: { count: 0, max: 0, sum: 0 },
+          serializationDuration: jasmine.anything(),
         })
       })
     })
diff --git a/packages/rum/src/domain/record/startFullSnapshots.spec.ts b/packages/rum/src/domain/record/startFullSnapshots.spec.ts
@@ -108,6 +108,7 @@ describe('startFullSnapshots', () => {
     const fullSnapshotEmits = emitCallback.calls.allArgs().filter((args) => args[0].type === RecordType.FullSnapshot)
     expect(fullSnapshotEmits[0][1]).toEqual({
       cssText: { count: 1, max: 21, sum: 21 },
+      serializationDuration: jasmine.anything(),
     })
   })
 })
diff --git a/packages/rum/src/domain/record/trackers/trackMutation.spec.ts b/packages/rum/src/domain/record/trackers/trackMutation.spec.ts
@@ -119,6 +119,7 @@ describe('trackMutation', () => {
 
       expect(mutationCallbackSpy.calls.mostRecent().args[1]).toEqual({
         cssText: { count: 1, max: 21, sum: 21 },
+        serializationDuration: jasmine.anything(),
       })
     })
 
diff --git a/packages/rum/src/domain/record/trackers/trackMutation.ts b/packages/rum/src/domain/record/trackers/trackMutation.ts
@@ -1,4 +1,4 @@
-import { monitor, noop } from '@datadog/browser-core'
+import { elapsed, monitor, noop, timeStampNow } from '@datadog/browser-core'
 import type {
   RumConfiguration,
   NodePrivacyLevelCache,
@@ -35,6 +35,7 @@ import {
   SerializationContextStatus,
   serializeAttribute,
   createSerializationStats,
+  updateSerializationStats,
 } from '../serialization'
 import { createMutationBatch } from '../mutationBatch'
 import type { ShadowRootCallBack, ShadowRootsController } from '../shadowRootsController'
@@ -233,12 +234,14 @@ function processChildListMutations(
       continue
     }
 
+    const serializationStart = timeStampNow()
     const serializedNode = serializeNodeWithId(node, {
       serializedNodeIds,
       parentNodePrivacyLevel,
       serializationContext,
       configuration,
     })
+    updateSerializationStats(serializationStats, 'serializationDuration', elapsed(serializationStart, timeStampNow()))
     if (!serializedNode) {
       continue
     }
diff --git a/packages/rum/src/domain/segmentCollection/buildReplayPayload.spec.ts b/packages/rum/src/domain/segmentCollection/buildReplayPayload.spec.ts
@@ -25,6 +25,11 @@ describe('buildReplayPayload', () => {
       max: 1000,
       sum: 1500,
     },
+    serializationDuration: {
+      count: 3,
+      max: 76,
+      sum: 103,
+    },
   }
   const METADATA_AND_SEGMENT_SIZES = {
     ...METADATA,
@@ -63,5 +68,6 @@ describe('buildReplayPayload', () => {
     expect(payload.isFullSnapshot).toBe(false)
     expect(payload.rawSize).toBe(13)
     expect(payload.recordCount).toBe(10)
+    expect(payload.serializationDuration).toEqual({ count: 3, max: 76, sum: 103 })
   })
 })
diff --git a/packages/rum/src/domain/segmentCollection/buildReplayPayload.ts b/packages/rum/src/domain/segmentCollection/buildReplayPayload.ts
@@ -12,6 +12,7 @@ export type ReplayPayload = Payload & {
   isFullSnapshot: boolean
   rawSize: number
   recordCount: number
+  serializationDuration: SerializationMetric
 }
 
 export function buildReplayPayload(
@@ -46,5 +47,6 @@ export function buildReplayPayload(
     isFullSnapshot: metadata.index_in_view === 0,
     rawSize: rawSegmentBytesCount,
     recordCount: metadata.records_count,
+    serializationDuration: stats.serializationDuration,
   }
 }
diff --git a/packages/rum/src/domain/segmentCollection/segment.spec.ts b/packages/rum/src/domain/segmentCollection/segment.spec.ts
@@ -14,7 +14,10 @@ import { createSegment } from './segment'
 const CONTEXT: SegmentContext = { application: { id: 'a' }, view: { id: 'b' }, session: { id: 'c' } }
 const RECORD_TIMESTAMP = 10 as TimeStamp
 const RECORD: BrowserRecord = { type: RecordType.ViewEnd, timestamp: RECORD_TIMESTAMP }
-const RECORD_STATS = { cssText: { count: 0, max: 0, sum: 0 } }
+const RECORD_STATS: SerializationStats = {
+  cssText: { count: 0, max: 0, sum: 0 },
+  serializationDuration: { count: 0, max: 0, sum: 0 },
+}
 const FULL_SNAPSHOT_RECORD: BrowserRecord = {
   type: RecordType.FullSnapshot,
   timestamp: RECORD_TIMESTAMP,
@@ -119,12 +122,18 @@ describe('Segment', () => {
     const flushCallbackSpy = jasmine.createSpy<FlushCallback>()
 
     const segment1 = createTestSegment({ creationReason: 'init' })
-    const stats1 = { cssText: { count: 1, max: 100, sum: 150 } }
+    const stats1: SerializationStats = {
+      cssText: { count: 1, max: 100, sum: 150 },
+      serializationDuration: { count: 1, max: 50, sum: 75 },
+    }
     segment1.addRecord(RECORD, stats1, noop)
     segment1.flush(flushCallbackSpy)
 
     const segment2 = createTestSegment({ creationReason: 'segment_duration_limit' })
-    const stats2 = { cssText: { count: 2, max: 200, sum: 275 } }
+    const stats2: SerializationStats = {
+      cssText: { count: 2, max: 200, sum: 275 },
+      serializationDuration: { count: 2, max: 200, sum: 300 },
+    }
     segment2.addRecord(FULL_SNAPSHOT_RECORD, stats2, noop)
     segment2.flush(flushCallbackSpy)
 
@@ -238,13 +247,15 @@ describe('Segment', () => {
           { type: RecordType.ViewEnd, timestamp: 10 as TimeStamp },
           {
             cssText: { count: 1, max: 50, sum: 50 },
+            serializationDuration: { count: 1, max: 20, sum: 20 },
           },
           noop
         )
         segment.addRecord(
           { type: RecordType.ViewEnd, timestamp: 15 as TimeStamp },
           {
             cssText: { count: 2, max: 150, sum: 250 },
+            serializationDuration: { count: 3, max: 35, sum: 65 },
           },
           noop
         )
@@ -253,13 +264,15 @@ describe('Segment', () => {
       it('aggregates stats', () => {
         expect(flushAndGetSerializationStats(segment)).toEqual({
           cssText: { count: 3, max: 150, sum: 300 },
+          serializationDuration: { count: 4, max: 35, sum: 85 },
         })
       })
 
       it('does not change aggregated stats for records with no serialization stats', () => {
         segment.addRecord({ type: RecordType.ViewEnd, timestamp: 5 as TimeStamp }, undefined, noop)
         expect(flushAndGetSerializationStats(segment)).toEqual({
           cssText: { count: 3, max: 150, sum: 300 },
+          serializationDuration: { count: 4, max: 35, sum: 85 },
         })
       })
     })
diff --git a/packages/rum/src/domain/segmentCollection/segmentCollection.spec.ts b/packages/rum/src/domain/segmentCollection/segmentCollection.spec.ts
@@ -121,6 +121,7 @@ describe('startSegmentCollection', () => {
       isFullSnapshot: jasmine.anything(),
       rawSize: jasmine.anything(),
       recordCount: jasmine.anything(),
+      serializationDuration: jasmine.anything(),
     })
   })
 
diff --git a/packages/rum/src/domain/segmentCollection/startSegmentTelemetry.spec.ts b/packages/rum/src/domain/segmentCollection/startSegmentTelemetry.spec.ts
diff --git a/packages/rum/src/domain/segmentCollection/startSegmentTelemetry.ts b/packages/rum/src/domain/segmentCollection/startSegmentTelemetry.ts

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { getElementInputValue, switchToAbsoluteUrl, getValidTagName } from './se`
`4`	`4`	`import type { SerializeOptions } from './serialization.types'`
`5`	`5`	`import { SerializationContextStatus } from './serialization.types'`
`6`	`6`	`import { serializeAttribute } from './serializeAttribute'`
`7`		`-import { updateCssTextSerializationStats } from './serializationStats'`
	`7`	`+import { updateSerializationStats } from './serializationStats'`
`8`	`8`
`9`	`9`	`export function serializeAttributes(`
`10`	`10`	`element: Element,`
`@@ -53,7 +53,7 @@ export function serializeAttributes(`
`53`	`53`	`const stylesheet = Array.from(doc.styleSheets).find((s) => s.href === (element as HTMLLinkElement).href)`
`54`	`54`	`const cssText = getCssRulesString(stylesheet)`
`55`	`55`	`if (cssText && stylesheet) {`
`56`		`- updateCssTextSerializationStats(options.serializationContext.serializationStats, cssText.length)`
	`56`	`+ updateSerializationStats(options.serializationContext.serializationStats, 'cssText', cssText.length)`
`57`	`57`	`safeAttrs._cssText = cssText`
`58`	`58`	`}`
`59`	`59`	`}`
`@@ -62,7 +62,7 @@ export function serializeAttributes(`
`62`	`62`	`if (tagName === 'style' && (element as HTMLStyleElement).sheet) {`
`63`	`63`	`const cssText = getCssRulesString((element as HTMLStyleElement).sheet)`
`64`	`64`	`if (cssText) {`
`65`		`- updateCssTextSerializationStats(options.serializationContext.serializationStats, cssText.length)`
	`65`	`+ updateSerializationStats(options.serializationContext.serializationStats, 'cssText', cssText.length)`
`66`	`66`	`safeAttrs._cssText = cssText`
`67`	`67`	`}`
`68`	`68`	`}`