[REPLAY-898] Recording Frustration signals (dead, error & rage clicks) for session replay

packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts

@@ -85,6 +85,7 @@ describe('actionCollection', () => {
     })
     expect(rawRumEvents[0].domainContext).toEqual({
       event,
+      eventsSequence: undefined,
     })
   })
 

packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts

@@ -101,7 +101,7 @@ function processAction(
     customerContext,
     rawRumEvent: actionEvent,
     startTime: action.startClocks.relative,
-    domainContext: isAutoAction(action) ? { event: action.event } : {},
+    domainContext: isAutoAction(action) ? { event: action.event, eventsSequence: action.eventsSequence } : {},
   }
 }
 

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

@@ -102,6 +102,7 @@ describe('trackClickActions', () => {
         frustrationTypes: [],
         target: undefined,
         position: undefined,
+        eventsSequence: undefined,
       },
     ])
   })
@@ -326,6 +327,19 @@ describe('trackClickActions', () => {
         expect(events[0].duration).toBe((MAX_DURATION_BETWEEN_CLICKS + 2 * actionDuration) as Duration)
       })
 
+      it('should contain original events from of rage sequence', () => {
+        const { domMutationObservable, clock } = setupBuilder.build()
+        const actionDuration = 5
+        emulateClickWithActivity(domMutationObservable, clock, undefined, actionDuration)
+        emulateClickWithActivity(domMutationObservable, clock, undefined, actionDuration)
+        emulateClickWithActivity(domMutationObservable, clock, undefined, actionDuration)
+
+        clock.tick(EXPIRE_DELAY)
+        expect(events.length).toBe(1)
+        expect(events[0].frustrationTypes).toEqual([FrustrationType.RAGE_CLICK])
+        expect(events[0].eventsSequence?.length).toBe(3)
+      })
+
       it('aggregates frustrationTypes from all clicks', () => {
         const { lifeCycle, domMutationObservable, clock } = setupBuilder.build()
 

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

@@ -48,6 +48,7 @@ export interface ClickAction {
   counts: ActionCounts
   event: MouseEvent & { target: Element }
   frustrationTypes: FrustrationType[]
+  eventsSequence?: Event[]
 }
 
 export interface ActionContexts {
@@ -247,7 +248,7 @@ function newClick(
 
     clone: () => newClick(lifeCycle, history, getUserActivity, base),
 
-    validate: () => {
+    validate: (eventsSequence?: Event[]) => {
       stop()
       if (status !== ClickStatus.STOPPED) {
         return
@@ -267,6 +268,7 @@ function newClick(
             errorCount,
             longTaskCount,
           },
+          eventsSequence,
         },
         base
       )
@@ -286,7 +288,7 @@ export function finalizeClicks(clicks: Click[], rageClick: Click) {
   if (isRage) {
     clicks.forEach((click) => click.discard())
     rageClick.stop(timeStampNow())
-    rageClick.validate()
+    rageClick.validate(clicks.map((click) => click.event))
   } else {
     rageClick.discard()
     clicks.forEach((click) => click.validate())

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

@@ -22,6 +22,7 @@ export interface RumViewEventDomainContext {
 
 export interface RumActionEventDomainContext {
   event?: Event
+  eventsSequence?: Event[]
 }
 
 export interface RumFetchResourceEventDomainContext {

packages/rum-core/src/index.ts

@@ -18,7 +18,7 @@ export {
   RumViewEventDomainContext,
   RumEventDomainContext,
 } from './domainContext.types'
-export { CommonContext, ReplayStats } from './rawRumEvent.types'
+export { CommonContext, ReplayStats, ActionType, RumEventType, FrustrationType } from './rawRumEvent.types'
 export { startRum } from './boot/startRum'
 export { LifeCycle, LifeCycleEventType } from './domain/lifeCycle'
 export { ViewCreatedEvent } from './domain/rumEventsCollection/view/trackViews'

packages/rum/src/boot/startRecording.ts

@@ -42,6 +42,7 @@ export function startRecording(
   } = record({
     emit: addRecord,
     defaultPrivacyLevel: configuration.defaultPrivacyLevel,
+    lifeCycle,
   })
 
   const { unsubscribe: unsubscribeViewEnded } = lifeCycle.subscribe(LifeCycleEventType.VIEW_ENDED, () => {

packages/rum/src/domain/record/observer.ts

@@ -10,7 +10,14 @@ import {
   addEventListener,
   noop,
 } from '@datadog/browser-core'
-import { initViewportObservable } from '@datadog/browser-rum-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
+import {
+  FrustrationType,
+  initViewportObservable,
+  ActionType,
+  RumEventType,
+  LifeCycleEventType,
+} from '@datadog/browser-rum-core'
 import { NodePrivacyLevel } from '../../constants'
 import type {
   InputState,
@@ -23,11 +30,14 @@ import type {
   MediaInteraction,
   FocusRecord,
   VisualViewportRecord,
+  FrustrationRecord,
+  IncrementalSnapshotRecord,
+  MouseInteractionData,
 } from '../../types'
-import { IncrementalSource, MediaInteractionType, MouseInteractionType } from '../../types'
+import { RecordType, IncrementalSource, MediaInteractionType, MouseInteractionType } from '../../types'
 import { getNodePrivacyLevel, shouldMaskNode } from './privacy'
 import { getElementInputValue, getSerializedNodeId, hasSerializedNode } from './serializationUtils'
-import { forEach, isTouchEvent } from './utils'
+import { assembleIncrementalSnapshot, forEach, getFrustrationFromAction, isTouchEvent } from './utils'
 import type { MutationController } from './mutationObserver'
 import { startMutationObserver } from './mutationObserver'
 
@@ -37,6 +47,16 @@ const MOUSE_MOVE_OBSERVER_THRESHOLD = 50
 const SCROLL_OBSERVER_THRESHOLD = 100
 const VISUAL_VIEWPORT_OBSERVER_THRESHOLD = 200
 
+const recordIds = new WeakMap<Event, number>()
+let nextId = 1
+
+function getRecordIdForEvent(event: Event): number {
+  if (!recordIds.has(event)) {
+    recordIds.set(event, nextId++)
+  }
+  return recordIds.get(event)!
+}
+
 type ListenerHandler = () => void
 
 type MousemoveCallBack = (
@@ -46,7 +66,7 @@ type MousemoveCallBack = (
 
 export type MutationCallBack = (m: MutationPayload) => void
 
-type MouseInteractionCallBack = (d: MouseInteraction) => void
+type MouseInteractionCallBack = (record: IncrementalSnapshotRecord) => void
 
 type ScrollCallback = (p: ScrollPosition) => void
 
@@ -62,7 +82,10 @@ type FocusCallback = (data: FocusRecord['data']) => void
 
 type VisualViewportResizeCallback = (data: VisualViewportRecord['data']) => void
 
+type FrustrationCallback = (record: FrustrationRecord) => void
+
 interface ObserverParam {
+  lifeCycle: LifeCycle
   defaultPrivacyLevel: DefaultPrivacyLevel
   mutationController: MutationController
   mutationCb: MutationCallBack
@@ -75,6 +98,7 @@ interface ObserverParam {
   mediaInteractionCb: MediaInteractionCallback
   styleSheetRuleCb: StyleSheetRuleCallback
   focusCb: FocusCallback
+  frustrationCb: FrustrationCallback
 }
 
 export function initObservers(o: ObserverParam): ListenerHandler {
@@ -88,6 +112,7 @@ export function initObservers(o: ObserverParam): ListenerHandler {
   const styleSheetObserver = initStyleSheetObserver(o.styleSheetRuleCb)
   const focusHandler = initFocusObserver(o.focusCb)
   const visualViewportResizeHandler = initVisualViewportResizeObserver(o.visualViewportResizeCb)
+  const frustartionHandler = initFrustrationObserver(o.lifeCycle, o.frustrationCb)
 
   return () => {
     mutationHandler()
@@ -100,6 +125,7 @@ export function initObservers(o: ObserverParam): ListenerHandler {
     styleSheetObserver()
     focusHandler()
     visualViewportResizeHandler()
+    frustartionHandler()
   }
 }
 
@@ -175,7 +201,12 @@ function initMouseInteractionObserver(
       position.x = visualViewportX
       position.y = visualViewportY
     }
-    cb(position)
+
+    const record = assign(
+      { id: getRecordIdForEvent(event) },
+      assembleIncrementalSnapshot<MouseInteractionData>(IncrementalSource.MouseInteraction, position)
+    )
+    cb(record)
   }
   return addEventListeners(document, Object.keys(eventTypeToMouseInteraction) as DOM_EVENT[], handler, {
     capture: true,
@@ -399,3 +430,28 @@ function initVisualViewportResizeObserver(cb: VisualViewportResizeCallback): Lis
     cancelThrottle()
   }
 }
+
+function initFrustrationObserver(lifeCycle: LifeCycle, frustrationCb: FrustrationCallback): ListenerHandler {
+  return lifeCycle.subscribe(LifeCycleEventType.RAW_RUM_EVENT_COLLECTED, (data) => {
+    if (
+      data.rawRumEvent.type === RumEventType.ACTION &&
+      data.rawRumEvent.action.type === ActionType.CLICK &&
+      data.rawRumEvent.action.frustration?.type &&
+      'event' in data.domainContext &&
+      data.domainContext.event
+    ) {
+      const frustrationType = getFrustrationFromAction(data.rawRumEvent.action.frustration.type)
+      frustrationCb({
+        timestamp: data.rawRumEvent.date,
+        type: RecordType.FrustrationRecord,
+        data: {
+          frustrationType,
+          recordIds:
+            frustrationType === FrustrationType.RAGE_CLICK && data.domainContext.eventsSequence
+              ? data.domainContext.eventsSequence.map((e) => getRecordIdForEvent(e))
+              : [getRecordIdForEvent(data.domainContext.event)],
+        },
+      })
+    }
+  }).unsubscribe
+}

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

@@ -1,4 +1,5 @@
 import { DefaultPrivacyLevel, isIE } from '@datadog/browser-core'
+import { LifeCycle } from '@datadog/browser-rum-core'
 import type { Clock } from '../../../../core/test/specHelper'
 import { createNewEvent } from '../../../../core/test/specHelper'
 import { collectAsyncCalls, recordsPerFullSnapshot } from '../../../test/utils'
@@ -198,6 +199,7 @@ describe('record', () => {
     recordApi = record({
       emit: emitSpy,
       defaultPrivacyLevel: DefaultPrivacyLevel.ALLOW,
+      lifeCycle: new LifeCycle(),
     })
   }
 

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

@@ -1,12 +1,10 @@
-import { assign, timeStampNow } from '@datadog/browser-core'
+import { timeStampNow } from '@datadog/browser-core'
 import type { DefaultPrivacyLevel, TimeStamp } from '@datadog/browser-core'
+import type { LifeCycle } from '@datadog/browser-rum-core'
 import { getViewportDimension } from '@datadog/browser-rum-core'
 import type {
-  IncrementalSnapshotRecord,
-  IncrementalData,
   InputData,
   MediaInteractionData,
-  MouseInteractionData,
   MousemoveData,
   MutationData,
   ScrollData,
@@ -20,10 +18,12 @@ import { initObservers } from './observer'
 
 import { MutationController } from './mutationObserver'
 import { getVisualViewport, getScrollX, getScrollY } from './viewports'
+import { assembleIncrementalSnapshot } from './utils'
 
 export interface RecordOptions {
   emit?: (record: Record) => void
   defaultPrivacyLevel: DefaultPrivacyLevel
+  lifeCycle: LifeCycle
 }
 
 export interface RecordAPI {
@@ -86,19 +86,20 @@ export function record(options: RecordOptions): RecordAPI {
   takeFullSnapshot()
 
   const stopObservers = initObservers({
+    lifeCycle: options.lifeCycle,
     mutationController,
     defaultPrivacyLevel: options.defaultPrivacyLevel,
     inputCb: (v) => emit(assembleIncrementalSnapshot<InputData>(IncrementalSource.Input, v)),
     mediaInteractionCb: (p) =>
       emit(assembleIncrementalSnapshot<MediaInteractionData>(IncrementalSource.MediaInteraction, p)),
-    mouseInteractionCb: (d) =>
-      emit(assembleIncrementalSnapshot<MouseInteractionData>(IncrementalSource.MouseInteraction, d)),
+    mouseInteractionCb: (mouseInteractionRecord) => emit(mouseInteractionRecord),
     mousemoveCb: (positions, source) => emit(assembleIncrementalSnapshot<MousemoveData>(source, { positions })),
     mutationCb: (m) => emit(assembleIncrementalSnapshot<MutationData>(IncrementalSource.Mutation, m)),
     scrollCb: (p) => emit(assembleIncrementalSnapshot<ScrollData>(IncrementalSource.Scroll, p)),
     styleSheetRuleCb: (r) => emit(assembleIncrementalSnapshot<StyleSheetRuleData>(IncrementalSource.StyleSheetRule, r)),
     viewportResizeCb: (d) => emit(assembleIncrementalSnapshot<ViewportResizeData>(IncrementalSource.ViewportResize, d)),
 
+    frustrationCb: (frustrationRecord) => emit(frustrationRecord),
     focusCb: (data) =>
       emit({
         data,
@@ -120,19 +121,3 @@ export function record(options: RecordOptions): RecordAPI {
     flushMutations: () => mutationController.flush(),
   }
 }
-
-function assembleIncrementalSnapshot<Data extends IncrementalData>(
-  source: Data['source'],
-  data: Omit<Data, 'source'>
-): IncrementalSnapshotRecord {
-  return {
-    data: assign(
-      {
-        source,
-      },
-      data
-    ) as Data,
-    type: RecordType.IncrementalSnapshot,
-    timestamp: timeStampNow(),
-  }
-}

packages/rum/src/domain/record/utils.ts

@@ -1,3 +1,8 @@
+import { assign, includes, timeStampNow } from '@datadog/browser-core'
+import { FrustrationType } from '@datadog/browser-rum-core'
+import type { IncrementalData, IncrementalSnapshotRecord } from '../../types'
+import { RecordType } from '../../types'
+
 export function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent {
   return Boolean((event as TouchEvent).changedTouches)
 }
@@ -8,3 +13,27 @@ export function forEach<List extends { [index: number]: any }>(
 ) {
   Array.prototype.forEach.call(list, callback as any)
 }
+
+export function getFrustrationFromAction(frustrations: FrustrationType[]): FrustrationType {
+  return includes(frustrations, FrustrationType.RAGE_CLICK)
+    ? FrustrationType.RAGE_CLICK
+    : includes(frustrations, FrustrationType.ERROR_CLICK)
+    ? FrustrationType.ERROR_CLICK
+    : FrustrationType.DEAD_CLICK
+}
+
+export function assembleIncrementalSnapshot<Data extends IncrementalData>(
+  source: Data['source'],
+  data: Omit<Data, 'source'>
+): IncrementalSnapshotRecord {
+  return {
+    data: assign(
+      {
+        source,
+      },
+      data
+    ) as Data,
+    type: RecordType.IncrementalSnapshot,
+    timestamp: timeStampNow(),
+  }
+}

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

@@ -131,11 +131,19 @@ describe('Segment', () => {
       it('increments records_count', () => {
         expect(segment.metadata.records_count).toBe(2)
       })
-      it('increases end timestamp', () => {
+      it('does not change start timestamp when receiving a later record', () => {
+        expect(segment.metadata.start).toBe(10)
+      })
+      it('should change the start timestamp when receiving an earlier record', () => {
+        segment.addRecord({ type: RecordType.ViewEnd, timestamp: 5 as TimeStamp })
+        expect(segment.metadata.start).toBe(5)
+      })
+      it('increases end timestamp when receiving a later record', () => {
         expect(segment.metadata.end).toBe(15)
       })
-      it('does not change start timestamp', () => {
-        expect(segment.metadata.start).toBe(10)
+      it('should not change the end timestamp when receiving an earlier record', () => {
+        segment.addRecord({ type: RecordType.ViewEnd, timestamp: 5 as TimeStamp })
+        expect(segment.metadata.end).toBe(15)
       })
     })
 

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

@@ -71,7 +71,12 @@ export class Segment {
   }
 
   addRecord(record: Record): void {
-    this.metadata.end = record.timestamp
+    if (record.timestamp < this.metadata.start) {
+      this.metadata.start = record.timestamp
+    }
+    if (this.metadata.end < record.timestamp) {
+      this.metadata.end = record.timestamp
+    }
     this.metadata.records_count += 1
     replayStats.addRecord(this.metadata.view.id)
     this.metadata.has_full_snapshot ||= record.type === RecordType.FullSnapshot