Fix action long task correlation

Author: amortemousque

packages/rum-core/src/domain/action/trackClickActions.spec.ts

@@ -568,22 +568,21 @@ describe('trackClickActions', () => {
     const targetPosition = target.getBoundingClientRect()
     const offsetX = targetPosition.width / 2
     const offsetY = targetPosition.height / 2
-    const eventProperties = {
+    const baseEventProperties = {
       target,
       clientX: targetPosition.left + offsetX,
       clientY: targetPosition.top + offsetY,
       offsetX,
       offsetY,
-      timeStamp: timeStampNow(),
       isPrimary: true,
       ...eventProperty,
     }
-    target.dispatchEvent(createNewEvent('pointerdown', eventProperties))
+    target.dispatchEvent(createNewEvent('pointerdown', { ...baseEventProperties, timeStamp: relativeNow() }))
     emulateActivityIfNeeded('pointerdown')
     clock!.tick(EMULATED_CLICK_DURATION)
-    target.dispatchEvent(createNewEvent('pointerup', eventProperties))
+    target.dispatchEvent(createNewEvent('pointerup', { ...baseEventProperties, timeStamp: relativeNow() }))
     emulateActivityIfNeeded('pointerup')
-    target.dispatchEvent(createNewEvent('click', eventProperties))
+    target.dispatchEvent(createNewEvent('click', { ...baseEventProperties, timeStamp: relativeNow() }))
     emulateActivityIfNeeded('click')
 
     function emulateActivityIfNeeded(event: 'pointerdown' | 'pointerup' | 'click') {

packages/rum-core/src/domain/action/trackClickActions.ts

@@ -5,10 +5,10 @@ import {
   getRelativeTime,
   ONE_MINUTE,
   generateUUID,
-  clocksNow,
   elapsed,
   createValueHistory,
   PageExitReason,
+  relativeToClocks
 } from '@datadog/browser-core'
 import type { FrustrationType } from '../../rawRumEvent.types'
 import { ActionType } from '../../rawRumEvent.types'
@@ -288,7 +288,7 @@ function newClick(
   startEvent: MouseEventOnElement
 ) {
   const id = generateUUID()
-  const startClocks = clocksNow()
+  const startClocks = relativeToClocks(startEvent.timeStamp)
   const historyEntry = history.add(id, startClocks.relative)
   const eventCountsSubscription = trackEventCounts({
     lifeCycle,

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

@@ -5,6 +5,7 @@ import type { LifeCycle } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
 import { createPerformanceObservable, RumPerformanceEntryType } from '../../browser/performanceObservable'
 import type { RumConfiguration } from '../configuration'
+
 export function startLongTaskCollection(lifeCycle: LifeCycle, configuration: RumConfiguration) {
   const performanceLongTaskSubscription = createPerformanceObservable(configuration, {
     type: RumPerformanceEntryType.LONG_TASK,

test/e2e/lib/framework/intakeRegistry.ts

@@ -6,6 +6,7 @@ import type {
   RumResourceEvent,
   RumViewEvent,
   RumVitalEvent,
+  RumLongTaskEvent,
 } from '@datadog/browser-rum'
 import type {
   TelemetryEvent,
@@ -102,6 +103,10 @@ export class IntakeRegistry {
     return this.rumEvents.filter(isRumResourceEvent)
   }
 
+  get rumLongTaskEvents() {
+    return this.rumEvents.filter(isRumLongTaskEvent)
+  }
+
   get rumViewEvents() {
     return this.rumEvents.filter(isRumViewEvent)
   }
@@ -171,6 +176,10 @@ function isRumActionEvent(event: RumEvent): event is RumActionEvent {
   return event.type === 'action'
 }
 
+function isRumLongTaskEvent(event: RumEvent): event is RumLongTaskEvent {
+  return event.type === 'long_task'
+}
+
 function isRumViewEvent(event: RumEvent): event is RumViewEvent {
   return event.type === 'view'
 }

test/e2e/scenario/rum/actions.scenario.ts

@@ -154,6 +154,62 @@ test.describe('action collection', () => {
       expect(resourceEvents[0].action!.id).toContain(actionEvents[0].action.id!)
     })
 
+
+
+  createTest('associate a long tasks to its action')
+    .withRum({ trackUserInteractions: true })
+    .withBody(html`
+      <button>click me</button>
+      <script>
+        const button = document.querySelector('button')
+        button.addEventListener('click', () => {
+          const end = performance.now() + 55
+          while (performance.now() < end) {} // block the handler for ~55ms to trigger a long task
+          fetch('/ok') // fire a fetch to extend the action duration
+        })
+      </script>
+    `)
+    .run(async ({ intakeRegistry, flushEvents, page, browserName }) => {
+      test.skip(browserName !== 'chromium', 'Non-Chromium browsers do not support long tasks')
+
+      const button = page.locator('button')
+      await button.click()
+      await waitForServersIdle()
+      await flushEvents()
+      const actionEvents = intakeRegistry.rumActionEvents
+      const longTaskEvents = intakeRegistry.rumLongTaskEvents.filter((event) =>
+        event.long_task.scripts?.[0]?.invoker?.includes('BUTTON.onclick')
+      )
+
+      expect(actionEvents).toHaveLength(1)
+      expect(actionEvents[0].action).toEqual({
+        error: {
+          count: 0,
+        },
+        id: expect.any(String) as unknown as string,
+        loading_time: expect.any(Number),
+        long_task: {
+          count: 1,
+        },
+
+        resource: {
+          count: expect.any(Number) as unknown as number,
+        },
+        target: {
+          name: 'click me',
+        },
+        type: 'click',
+        frustration: {
+          type: [],
+        },
+      })
+
+      expect(longTaskEvents).toHaveLength(1)
+      // long task action id should contain the collected action id + the discarded rage click id
+      expect(longTaskEvents[0].action!.id).toHaveLength(2)
+      expect(longTaskEvents[0].action!.id).toContain(actionEvents[0].action.id!)
+    })
+
   createTest('increment the view.action.count of the view active when the action started')
     .withRum({ trackUserInteractions: true })
     .withBody(html`