👷‍♀️ [RUM 5088] Reduce INP Null Target

packages/core/src/tools/experimentalFeatures.ts

@@ -18,7 +18,6 @@ export enum ExperimentalFeature {
   TOLERANT_RESOURCE_TIMINGS = 'tolerant_resource_timings',
   REMOTE_CONFIGURATION = 'remote_configuration',
   UPDATE_VIEW_NAME = 'update_view_name',
-  NULL_INP_TELEMETRY = 'null_inp_telemetry',
   LONG_ANIMATION_FRAME = 'long_animation_frame',
   VIEW_SPECIFIC_CONTEXT = 'view_specific_context',
 }

packages/core/test/emulate/createNewEvent.ts

@@ -1,11 +1,9 @@
+import type { MouseEventOnElement } from '@datadog/browser-rum-core'
 import type { TrustableEvent } from '../../src'
 import { objectEntries } from '../../src'
 
 export function createNewEvent(eventName: 'click', properties?: Partial<MouseEvent>): MouseEvent
-export function createNewEvent(
-  eventName: 'pointerup',
-  properties?: Partial<PointerEvent>
-): PointerEvent & { target: Element }
+export function createNewEvent(eventName: 'pointerup', properties?: Partial<PointerEvent>): MouseEventOnElement
 export function createNewEvent(eventName: 'message', properties?: Partial<MessageEvent>): MessageEvent
 export function createNewEvent(
   eventName: 'securitypolicyviolation',

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

@@ -1,7 +1,12 @@
 import { addEventListener, DOM_EVENT } from '@datadog/browser-core'
+import type { RelativeTime } from '@datadog/browser-core'
 import type { RumConfiguration } from '../configuration'
 
-export type MouseEventOnElement = PointerEvent & { target: Element }
+export type ExtraPointerEventFields = {
+  target: Element
+  timeStamp: RelativeTime
+}
+export type MouseEventOnElement = PointerEvent & ExtraPointerEventFields
 
 export interface UserActivity {
   selection: boolean

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

@@ -425,15 +425,44 @@ describe('trackClickActions', () => {
     })
   })
 
+  describe('interactionSelectorMap', () => {
+    it('should add pointer down to the map', () => {
+      startClickActionsTracking()
+      const setInteractionMapSpy = spyOn(Map.prototype, 'set').and.callThrough()
+      emulateClick({ activity: { on: 'pointerdown' } })
+      expect(setInteractionMapSpy).toHaveBeenCalled()
+    })
+
+    it('should add pointerup to the map', () => {
+      startClickActionsTracking()
+      const setInteractionMapSpy = spyOn(Map.prototype, 'set').and.callThrough()
+      emulateClick({ activity: { on: 'pointerup' } })
+      expect(setInteractionMapSpy).toHaveBeenCalled()
+    })
+
+    it('should clear outdated entries when pointer up', () => {
+      startClickActionsTracking()
+      const deleteInteractionMapSpy = spyOn(Map.prototype, 'delete').and.callThrough()
+
+      emulateClick({ activity: { on: 'pointerdown' }, eventProperty: { timeStamp: 0 } })
+      clock.tick(EXPIRE_DELAY)
+      emulateClick({ activity: { on: 'pointerdown' }, eventProperty: { timeStamp: 10 } })
+
+      expect(deleteInteractionMapSpy).toHaveBeenCalled()
+    })
+  })
+
   function emulateClick({
     target = button,
     activity,
+    eventProperty,
   }: {
     target?: HTMLElement
     activity?: {
       delay?: number
       on?: 'pointerup' | 'click' | 'pointerdown'
     }
+    eventProperty?: { [key: string]: any }
   } = {}) {
     const targetPosition = target.getBoundingClientRect()
     const offsetX = targetPosition.width / 2
@@ -446,6 +475,7 @@ describe('trackClickActions', () => {
       offsetY,
       timeStamp: timeStampNow(),
       isPrimary: true,
+      ...eventProperty,
     }
     target.dispatchEvent(createNewEvent('pointerdown', eventProperties))
     emulateActivityIfNeeded('pointerdown')

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

@@ -11,6 +11,7 @@ import {
   ONE_SECOND,
   elapsed,
   createValueHistory,
+  relativeNow,
 } from '@datadog/browser-core'
 import type { FrustrationType } from '../../rawRumEvent.types'
 import { ActionType } from '../../rawRumEvent.types'
@@ -61,6 +62,15 @@ type ClickActionIdHistory = ValueHistory<ClickAction['id']>
 // Maximum duration for click actions
 export const CLICK_ACTION_MAX_DURATION = 10 * ONE_SECOND
 export const ACTION_CONTEXT_TIME_OUT_DELAY = 5 * ONE_MINUTE // arbitrary
+export const interactionSelectorMap = new Map<RelativeTime, string | undefined>() // key is relative time
+
+export const deleteOutdatedInteractionSelectors = () => {
+  interactionSelectorMap.forEach((_, key) => {
+    if (relativeNow() - key > 10 * ONE_SECOND) {
+      interactionSelectorMap.delete(key)
+    }
+  })
+}
 
 export function trackClickActions(
   lifeCycle: LifeCycle,
@@ -176,6 +186,15 @@ function startClickAction(
   const click = newClick(lifeCycle, history, getUserActivity, clickActionBase, startEvent)
   appendClickToClickChain(click)
 
+  if (clickActionBase.target) {
+    const { selector } = clickActionBase.target
+    if (selector) {
+      // save the selector for the interaction to next paint
+      interactionSelectorMap.set(startEvent.timeStamp, selector)
+      deleteOutdatedInteractionSelectors()
+    }
+  }
+
   const { stop: stopWaitPageActivityEnd } = waitPageActivityEnd(
     lifeCycle,
     domMutationObservable,
@@ -224,13 +243,17 @@ function computeClickActionBase(
   configuration: RumConfiguration
 ): ClickActionBase {
   const rect = event.target.getBoundingClientRect()
+  const selector = getSelectorFromElement(event.target, configuration.actionNameAttribute)
+
+  interactionSelectorMap.set(event.timeStamp, selector)
+  deleteOutdatedInteractionSelectors()
 
   return {
     type: ActionType.CLICK,
     target: {
       width: Math.round(rect.width),
       height: Math.round(rect.height),
-      selector: getSelectorFromElement(event.target, configuration.actionNameAttribute),
+      selector,
     },
     position: {
       // Use clientX and Y because for SVG element offsetX and Y are relatives to the <svg> element

packages/rum-core/src/domain/view/viewMetrics/trackInteractionToNextPaint.spec.ts

@@ -240,6 +240,20 @@ describe('trackInteractionToNextPaint', () => {
 
       expect(getInteractionToNextPaint()?.targetSelector).toEqual('#bar')
     })
+
+    it('should check interactionSelectorMap for entries', () => {
+      startINPTracking()
+      const getInteractionMapSpy = spyOn(Map.prototype, 'get').and.callThrough()
+      const deleteInteractionMapSpy = spyOn(Map.prototype, 'delete').and.callThrough()
+
+      newInteraction(lifeCycle, {
+        interactionId: 1,
+        duration: 10 as Duration,
+        target: appendElement('<button id="foo"></button>'),
+      })
+      expect(getInteractionMapSpy).toHaveBeenCalled()
+      expect(deleteInteractionMapSpy).toHaveBeenCalled()
+    })
   })
 })
 

packages/rum-core/src/domain/view/viewMetrics/trackInteractionToNextPaint.ts

@@ -8,6 +8,7 @@ import { ViewLoadingType } from '../../../rawRumEvent.types'
 import { getSelectorFromElement } from '../../getSelectorFromElement'
 import { isElementNode } from '../../../browser/htmlDomUtils'
 import type { RumConfiguration } from '../../configuration'
+import { interactionSelectorMap } from '../../action/trackClickActions'
 import { getInteractionCount, initInteractionCountPolyfill } from './interactionCountPolyfill'
 
 // Arbitrary value to prevent unnecessary memory usage on views with lots of interactions.
@@ -69,10 +70,11 @@ export function trackInteractionToNextPaint(
       interactionToNextPaintStartTime = elapsed(viewStart, newInteraction.startTime)
 
       if (newInteraction.target && isElementNode(newInteraction.target)) {
-        interactionToNextPaintTargetSelector = getSelectorFromElement(
-          newInteraction.target,
-          configuration.actionNameAttribute
-        )
+        interactionToNextPaintTargetSelector =
+          interactionSelectorMap.get(newInteraction.startTime) ||
+          getSelectorFromElement(newInteraction.target, configuration.actionNameAttribute)
+
+        interactionSelectorMap.delete(newInteraction.startTime)
       } else {
         interactionToNextPaintTargetSelector = undefined
       }

packages/rum-core/src/index.ts

@@ -39,3 +39,5 @@ export { isLongDataUrl, sanitizeDataUrl, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH } from
 export * from './domain/privacy'
 export { SessionReplayState } from './domain/rumSessionManager'
 export type { RumPlugin } from './domain/plugins'
+export { interactionSelectorMap } from './domain/action/trackClickActions'
+export type { MouseEventOnElement } from './domain/action/listenActionEvents'

packages/rum-core/test/createFakeClick.ts

@@ -1,7 +1,7 @@
 import { clocksNow, Observable, timeStampNow } from '@datadog/browser-core'
 import { createNewEvent } from '@datadog/browser-core/test'
 import type { Click } from '../src/domain/action/trackClickActions'
-import type { UserActivity } from '../src/domain/action/listenActionEvents'
+import type { MouseEventOnElement, UserActivity } from '../src/domain/action/listenActionEvents'
 
 export type FakeClick = Readonly<ReturnType<typeof createFakeClick>>
 
@@ -14,7 +14,7 @@ export function createFakeClick({
   hasError?: boolean
   hasPageActivity?: boolean
   userActivity?: Partial<UserActivity>
-  event?: Partial<PointerEvent & { target: Element }>
+  event?: Partial<MouseEventOnElement>
 } = {}) {
   const stopObservable = new Observable<void>()
   let isStopped = false