[RUM-5705] Collect Long Animation Frames

packages/core/src/tools/experimentalFeatures.ts

@@ -20,6 +20,7 @@ export enum ExperimentalFeature {
   REMOTE_CONFIGURATION = 'remote_configuration',
   UPDATE_VIEW_NAME = 'update_view_name',
   NULL_INP_TELEMETRY = 'null_inp_telemetry',
+  LONG_ANIMATION_FRAME = 'long_animation_frame',
 }
 
 const enabledExperimentalFeatures: Set<ExperimentalFeature> = new Set()

packages/rum-core/src/boot/startRum.ts

@@ -17,6 +17,8 @@ import {
   addTelemetryDebug,
   CustomerDataType,
   drainPreStartTelemetry,
+  isExperimentalFeatureEnabled,
+  ExperimentalFeature,
 } from '@datadog/browser-core'
 import { createDOMMutationObservable } from '../browser/domMutationObservable'
 import { startPerformanceCollection } from '../browser/performanceCollection'
@@ -47,6 +49,7 @@ import type { CommonContext } from '../domain/contexts/commonContext'
 import { startDisplayContext } from '../domain/contexts/displayContext'
 import { startVitalCollection } from '../domain/vital/vitalCollection'
 import { startCiVisibilityContext } from '../domain/contexts/ciVisibilityContext'
+import { startLongAnimationFrameCollection } from '../domain/longAnimationFrame/longAnimationFrameCollection'
 import type { RecorderApi } from './rumPublicApi'
 
 export type StartRum = typeof startRum
@@ -165,7 +168,11 @@ export function startRum(
   const { stop: stopResourceCollection } = startResourceCollection(lifeCycle, configuration, pageStateHistory)
   cleanupTasks.push(stopResourceCollection)
 
-  startLongTaskCollection(lifeCycle, configuration)
+  if (isExperimentalFeatureEnabled(ExperimentalFeature.LONG_ANIMATION_FRAME)) {
+    startLongAnimationFrameCollection(lifeCycle, configuration)
+  } else {
+    startLongTaskCollection(lifeCycle, configuration)
+  }
 
   const { addError } = startErrorCollection(lifeCycle, configuration, pageStateHistory, featureFlagContexts)
 

packages/rum-core/src/browser/performanceCollection.ts

@@ -47,6 +47,7 @@ export function startPerformanceCollection(lifeCycle: LifeCycle, configuration:
       RumPerformanceEntryType.FIRST_INPUT,
       RumPerformanceEntryType.LAYOUT_SHIFT,
       RumPerformanceEntryType.EVENT,
+      RumPerformanceEntryType.LONG_ANIMATION_FRAME,
     ]
 
     try {

packages/rum-core/src/browser/performanceObservable.ts

@@ -23,6 +23,7 @@ export enum RumPerformanceEntryType {
   LARGEST_CONTENTFUL_PAINT = 'largest-contentful-paint',
   LAYOUT_SHIFT = 'layout-shift',
   LONG_TASK = 'longtask',
+  LONG_ANIMATION_FRAME = 'long-animation-frame',
   NAVIGATION = 'navigation',
   PAINT = 'paint',
   RESOURCE = 'resource',
@@ -117,9 +118,46 @@ export interface RumLayoutShiftTiming {
   }>
 }
 
+// Documentation https://developer.chrome.com/docs/web-platform/long-animation-frames#better-attribution
+export type RumPerformanceScriptTiming = {
+  duration: Duration
+  entryType: 'script'
+  executionStart: RelativeTime
+  forcedStyleAndLayoutDuration: Duration
+  invoker: string // e.g. "https://static.datadoghq.com/static/c/93085/chunk-bc4db53278fd4c77a637.min.js"
+  invokerType:
+    | 'user-callback'
+    | 'event-listener'
+    | 'resolve-promise'
+    | 'reject-promise'
+    | 'classic-script'
+    | 'module-script'
+  name: 'script'
+  pauseDuration: Duration
+  sourceCharPosition: number
+  sourceFunctionName: string
+  sourceURL: string
+  startTime: RelativeTime
+  window: Window
+  windowAttribution: string
+}
+
+export interface RumPerformanceLongAnimationFrameTiming {
+  blockingDuration: Duration
+  duration: Duration
+  entryType: RumPerformanceEntryType.LONG_ANIMATION_FRAME
+  firstUIEventTimestamp: RelativeTime
+  name: 'long-animation-frame'
+  renderStart: RelativeTime
+  scripts: RumPerformanceScriptTiming[]
+  startTime: RelativeTime
+  styleAndLayoutStart: RelativeTime
+}
+
 export type RumPerformanceEntry =
   | RumPerformanceResourceTiming
   | RumPerformanceLongTaskTiming
+  | RumPerformanceLongAnimationFrameTiming
   | RumPerformancePaintTiming
   | RumPerformanceNavigationTiming
   | RumLargestContentfulPaintTiming
@@ -134,6 +172,7 @@ export type EntryTypeToReturnType = {
   [RumPerformanceEntryType.LAYOUT_SHIFT]: RumLayoutShiftTiming
   [RumPerformanceEntryType.PAINT]: RumPerformancePaintTiming
   [RumPerformanceEntryType.LONG_TASK]: RumPerformanceLongTaskTiming
+  [RumPerformanceEntryType.LONG_ANIMATION_FRAME]: RumPerformanceLongAnimationFrameTiming
   [RumPerformanceEntryType.NAVIGATION]: RumPerformanceNavigationTiming
   [RumPerformanceEntryType.RESOURCE]: RumPerformanceResourceTiming
 }
@@ -180,6 +219,7 @@ export function createPerformanceObservable<T extends RumPerformanceEntryType>(
         RumPerformanceEntryType.RESOURCE,
         RumPerformanceEntryType.NAVIGATION,
         RumPerformanceEntryType.LONG_TASK,
+        RumPerformanceEntryType.LONG_ANIMATION_FRAME,
         RumPerformanceEntryType.PAINT,
       ]
       if (includes(fallbackSupportedEntryTypes, options.type)) {

packages/rum-core/src/domain/longAnimationFrame/longAnimationFrameCollection.ts

@@ -0,0 +1,56 @@
+import { toServerDuration, relativeToClocks, generateUUID } from '@datadog/browser-core'
+import type { RawRumLongAnimationFrameEvent } from '../../rawRumEvent.types'
+import { RumEventType, RumLongTaskEntryType } from '../../rawRumEvent.types'
+import type { LifeCycle } from '../lifeCycle'
+import { LifeCycleEventType } from '../lifeCycle'
+import { RumPerformanceEntryType } from '../../browser/performanceObservable'
+import type { RumConfiguration } from '../configuration'
+
+export function startLongAnimationFrameCollection(lifeCycle: LifeCycle, configuration: RumConfiguration) {
+  lifeCycle.subscribe(LifeCycleEventType.PERFORMANCE_ENTRIES_COLLECTED, (entries) => {
+    for (const entry of entries) {
+      if (entry.entryType !== RumPerformanceEntryType.LONG_ANIMATION_FRAME) {
+        break
+      }
+      if (!configuration.trackLongTasks) {
+        break
+      }
+
+      const startClocks = relativeToClocks(entry.startTime)
+      const rawRumEvent: RawRumLongAnimationFrameEvent = {
+        date: startClocks.timeStamp,
+        long_task: {
+          id: generateUUID(),
+          entry_type: RumLongTaskEntryType.LONG_ANIMATION_FRAME,
+          duration: toServerDuration(entry.duration),
+          blocking_duration: toServerDuration(entry.blockingDuration),
+          first_ui_event_timestamp: relativeToClocks(entry.firstUIEventTimestamp).relative,
+          render_start: relativeToClocks(entry.renderStart).relative,
+          style_and_layout_start: relativeToClocks(entry.styleAndLayoutStart).relative,
+          scripts: entry.scripts.map((script) => ({
+            duration: toServerDuration(script.duration),
+            pause_duration: toServerDuration(script.pauseDuration),
+            forced_style_and_layout_duration: toServerDuration(script.forcedStyleAndLayoutDuration),
+            start_time: relativeToClocks(script.startTime).relative,
+            execution_start: relativeToClocks(script.executionStart).relative,
+            source_url: script.sourceURL,
+            source_function_name: script.sourceFunctionName,
+            source_char_position: script.sourceCharPosition,
+            invoker: script.invoker,
+            invoker_type: script.invokerType,
+            window_attribution: script.windowAttribution,
+          })),
+        },
+        type: RumEventType.LONG_TASK,
+        _dd: {
+          discarded: false,
+        },
+      }
+      lifeCycle.notify(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, {
+        rawRumEvent,
+        startTime: startClocks.relative,
+        domainContext: { performanceEntry: entry },
+      })
+    }
+  })
+}

packages/rum-core/src/domain/longTask/longTaskCollection.spec.ts

@@ -2,7 +2,7 @@ import type { RelativeTime, ServerDuration } from '@datadog/browser-core'
 import type { RumSessionManagerMock, TestSetupBuilder } from '../../../test'
 import { createPerformanceEntry, createRumSessionManagerMock, mockPerformanceObserver, setup } from '../../../test'
 import { RumPerformanceEntryType } from '../../browser/performanceObservable'
-import { RumEventType } from '../../rawRumEvent.types'
+import { RumEventType, RumLongTaskEntryType } from '../../rawRumEvent.types'
 import { LifeCycleEventType } from '../lifeCycle'
 import { startLongTaskCollection } from './longTaskCollection'
 
@@ -65,6 +65,7 @@ describe('long task collection', () => {
       date: jasmine.any(Number),
       long_task: {
         id: jasmine.any(String),
+        entry_type: RumLongTaskEntryType.LONG_TASK,
         duration: (100 * 1e6) as ServerDuration,
       },
       type: RumEventType.LONG_TASK,

packages/rum-core/src/domain/longTask/longTaskCollection.ts

@@ -1,6 +1,6 @@
 import { toServerDuration, relativeToClocks, generateUUID } from '@datadog/browser-core'
 import type { RawRumLongTaskEvent } from '../../rawRumEvent.types'
-import { RumEventType } from '../../rawRumEvent.types'
+import { RumEventType, RumLongTaskEntryType } from '../../rawRumEvent.types'
 import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
 import { RumPerformanceEntryType } from '../../browser/performanceObservable'
@@ -20,6 +20,7 @@ export function startLongTaskCollection(lifeCycle: LifeCycle, configuration: Rum
         date: startClocks.timeStamp,
         long_task: {
           id: generateUUID(),
+          entry_type: RumLongTaskEntryType.LONG_TASK,
           duration: toServerDuration(entry.duration),
         },
         type: RumEventType.LONG_TASK,

packages/rum-core/src/rawRumEvent.types.ts

@@ -10,6 +10,7 @@ import type {
   DefaultPrivacyLevel,
   Connectivity,
   Csp,
+  RelativeTime,
 } from '@datadog/browser-core'
 import type { PageState } from './domain/contexts/pageStateHistory'
 
@@ -22,6 +23,11 @@ export const enum RumEventType {
   VITAL = 'vital',
 }
 
+export const enum RumLongTaskEntryType {
+  LONG_TASK = 'long-task',
+  LONG_ANIMATION_FRAME = 'long-animation-frame',
+}
+
 export interface RawRumResourceEvent {
   date: TimeStamp
   type: RumEventType.RESOURCE
@@ -170,7 +176,46 @@ export interface RawRumLongTaskEvent {
   type: RumEventType.LONG_TASK
   long_task: {
     id: string
+    entry_type: RumLongTaskEntryType.LONG_TASK
+    duration: ServerDuration
+  }
+  _dd: {
+    discarded: boolean
+  }
+}
+
+export type InvokerType =
+  | 'user-callback'
+  | 'event-listener'
+  | 'resolve-promise'
+  | 'reject-promise'
+  | 'classic-script'
+  | 'module-script'
+
+export interface RawRumLongAnimationFrameEvent {
+  date: TimeStamp
+  type: RumEventType.LONG_TASK // LoAF are ingested as Long Task
+  long_task: {
+    id: string
+    entry_type: RumLongTaskEntryType.LONG_ANIMATION_FRAME
     duration: ServerDuration
+    blocking_duration: ServerDuration
+    first_ui_event_timestamp: RelativeTime
+    render_start: RelativeTime
+    style_and_layout_start: RelativeTime
+    scripts: Array<{
+      duration: ServerDuration
+      pause_duration: ServerDuration
+      forced_style_and_layout_duration: ServerDuration
+      start_time: RelativeTime
+      execution_start: RelativeTime
+      source_url: string
+      source_function_name: string
+      source_char_position: number
+      invoker: string
+      invoker_type: InvokerType
+      window_attribution: string
+    }>
   }
   _dd: {
     discarded: boolean
@@ -250,6 +295,7 @@ export type RawRumEvent =
   | RawRumResourceEvent
   | RawRumViewEvent
   | RawRumLongTaskEvent
+  | RawRumLongAnimationFrameEvent
   | RawRumActionEvent
   | RawRumVitalEvent
 

packages/rum-core/test/fixtures.ts

@@ -10,7 +10,7 @@ import {
 } from '@datadog/browser-core'
 import { RumPerformanceEntryType, type EntryTypeToReturnType } from '../src/browser/performanceObservable'
 import type { RawRumEvent } from '../src/rawRumEvent.types'
-import { VitalType, ActionType, RumEventType, ViewLoadingType } from '../src/rawRumEvent.types'
+import { VitalType, ActionType, RumEventType, ViewLoadingType, RumLongTaskEntryType } from '../src/rawRumEvent.types'
 
 export function createRawRumEvent(type: RumEventType, overrides?: Context): RawRumEvent {
   switch (type) {
@@ -51,6 +51,7 @@ export function createRawRumEvent(type: RumEventType, overrides?: Context): RawR
           long_task: {
             id: generateUUID(),
             duration: 0 as ServerDuration,
+            entry_type: RumLongTaskEntryType.LONG_TASK,
           },
           _dd: {
             discarded: false,