[RUMF-1280] collect click position (#1566)

DataDog · Jun 7, 2022 · 8577823 · 8577823
1 parent b3b7688
commit 8577823
Show file tree

Hide file tree

Showing 15 changed files with 377 additions and 63 deletions.
diff --git a/packages/core/src/tools/utils.spec.ts b/packages/core/src/tools/utils.spec.ts
@@ -2,6 +2,7 @@ import type { Clock } from '../../test/specHelper'
 import { mockClock } from '../../test/specHelper'
 import {
   combine,
+  cssEscape,
   deepClone,
   findCommaSeparatedValue,
   getType,
@@ -569,3 +570,12 @@ describe('startWith', () => {
     expect(startsWith('barfoo', 'foo')).toEqual(false)
   })
 })
+
+describe('cssEscape', () => {
+  it('should escape a string', () => {
+    expect(cssEscape('.foo#bar')).toEqual('\\.foo\\#bar')
+    expect(cssEscape('()[]{}')).toEqual('\\(\\)\\[\\]\\{\\}')
+    expect(cssEscape('--a')).toEqual('--a')
+    expect(cssEscape('\0')).toEqual('\ufffd')
+  })
+})
diff --git a/packages/core/src/tools/utils.ts b/packages/core/src/tools/utils.ts
@@ -208,6 +208,14 @@ export function includes(candidate: string | unknown[], search: any) {
   return candidate.indexOf(search) !== -1
 }
 
+export function arrayFrom<T>(arrayLike: ArrayLike<T>): T[] {
+  const array = []
+  for (let i = 0; i < arrayLike.length; i++) {
+    array.push(arrayLike[i])
+  }
+  return array
+}
+
 export function find<T, S extends T>(
   array: T[],
   predicate: (item: T, index: number, array: T[]) => item is S
@@ -635,3 +643,24 @@ export function removeDuplicates<T>(array: T[]) {
 export function matchList(list: Array<string | RegExp>, value: string) {
   return list.some((item) => item === value || (item instanceof RegExp && item.test(value)))
 }
+
+// https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/selector/escapeSelector.js
+export function cssEscape(str: string) {
+  if (window.CSS && window.CSS.escape) {
+    return window.CSS.escape(str)
+  }
+
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g, function (ch, asCodePoint) {
+    if (asCodePoint) {
+      // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
+      if (ch === '\0') {
+        return '\uFFFD'
+      }
+      // Control characters and (dependent upon position) numbers get escaped as code points
+      return `${ch.slice(0, -1)}\\${ch.charCodeAt(ch.length - 1).toString(16)} `
+    }
+    // Other potentially-special ASCII characters get backslash-escaped
+    return `\\${ch}`
+  })
+}
diff --git a/packages/core/test/specHelper.ts b/packages/core/test/specHelper.ts
@@ -311,7 +311,7 @@ class StubXhr extends StubEventEmitter {
   }
 }
 
-export function createNewEvent(eventName: 'click', properties?: { [name: string]: unknown }): MouseEvent
+export function createNewEvent<P extends Record<string, unknown>>(eventName: 'click', properties?: P): MouseEvent & P
 export function createNewEvent(eventName: string, properties?: { [name: string]: unknown }): Event
 export function createNewEvent(eventName: string, properties: { [name: string]: unknown } = {}) {
   let event: Event

diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts
@@ -25,7 +25,8 @@ describe('actionCollection', () => {
   })
   it('should create action from auto action', () => {
     const { lifeCycle, rawRumEvents } = setupBuilder.build()
-    const event = createNewEvent('click')
+
+    const event = createNewEvent('click', { target: document.createElement('button') })
     lifeCycle.notify(LifeCycleEventType.AUTO_ACTION_COMPLETED, {
       counts: {
         errorCount: 10,
@@ -39,6 +40,12 @@ describe('actionCollection', () => {
       startClocks: { relative: 1234 as RelativeTime, timeStamp: 123456789 as TimeStamp },
       type: ActionType.CLICK,
       event,
+      target: {
+        selector: '#foo',
+        width: 1,
+        height: 2,
+      },
+      position: { x: 1, y: 2 },
     })
 
     expect(rawRumEvents[0].startTime).toBe(1234 as RelativeTime)
@@ -60,6 +67,13 @@ describe('actionCollection', () => {
         },
         target: {
           name: 'foo',
+          selector: '#foo',
+          width: 1,
+          height: 2,
+        },
+        position: {
+          x: 1,
+          y: 2,
         },
         type: ActionType.CLICK,
       },

diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts
@@ -60,6 +60,8 @@ function processAction(
     ? {
         action: {
           id: action.id,
+          target: action.target,
+          position: action.position,
           loading_time: toServerDuration(action.duration),
           frustration: {
             type: action.frustrationTypes,