@datadog/browser-rum - npm Package Compare versions

Comparing version 4.32.0 to 4.32.1

cjs/domain/record/observers.d.ts

@@ -11,3 +11,3 @@ import type { DefaultPrivacyLevel } from '@datadog/browser-core';
 export declare type MutationCallBack = (m: BrowserMutationPayload) => void;
-declare type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void;
+export declare type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void;
 declare type ScrollCallback = (p: ScrollPosition) => void;
@@ -48,2 +48,3 @@ export declare type StyleSheetCallback = (s: StyleSheetRule) => void;
 };
+export declare function initMouseInteractionObserver(cb: MouseInteractionCallBack, defaultPrivacyLevel: DefaultPrivacyLevel): ListenerHandler;
 declare type InputObserverOptions = {
@@ -50,0 +51,0 @@ domEvents?: Array<DOM_EVENT.INPUT | DOM_EVENT.CHANGE>;

cjs/domain/record/observers.js

 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initFrustrationObserver = exports.initStyleSheetObserver = exports.initInputObserver = exports.initMutationObserver = exports.initObservers = void 0;
+exports.initFrustrationObserver = exports.initStyleSheetObserver = exports.initInputObserver = exports.initMouseInteractionObserver = exports.initMutationObserver = exports.initObservers = void 0;
 var browser_core_1 = require("@datadog/browser-core");
@@ -104,15 +104,13 @@ var browser_rum_core_1 = require("@datadog/browser-rum-core");
         }
-        var _a = (0, utils_1.isTouchEvent)(event) ? event.changedTouches[0] : event, clientX = _a.clientX, clientY = _a.clientY;
-        var position = {
-            id: (0, serializationUtils_1.getSerializedNodeId)(target),
-            type: eventTypeToMouseInteraction[event.type],
-            x: clientX,
-            y: clientY,
-        };
-        if (window.visualViewport) {
-            var _b = (0, viewports_1.convertMouseEventToLayoutCoordinates)(clientX, clientY), visualViewportX = _b.visualViewportX, visualViewportY = _b.visualViewportY;
-            position.x = visualViewportX;
-            position.y = visualViewportY;
+        var id = (0, serializationUtils_1.getSerializedNodeId)(target);
+        var type = eventTypeToMouseInteraction[event.type];
+        var interaction;
+        if (type !== types_1.MouseInteractionType.Blur && type !== types_1.MouseInteractionType.Focus) {
+            var _a = computeCoordinates(event), x = _a.x, y = _a.y;
+            interaction = { id: id, type: type, x: x, y: y };
         }
-        var record = (0, browser_core_1.assign)({ id: getRecordIdForEvent(event) }, (0, utils_1.assembleIncrementalSnapshot)(types_1.IncrementalSource.MouseInteraction, position));
+        else {
+            interaction = { id: id, type: type };
+        }
+        var record = (0, browser_core_1.assign)({ id: getRecordIdForEvent(event) }, (0, utils_1.assembleIncrementalSnapshot)(types_1.IncrementalSource.MouseInteraction, interaction));
         cb(record);
@@ -125,2 +123,12 @@ };
 }
+exports.initMouseInteractionObserver = initMouseInteractionObserver;
+function computeCoordinates(event) {
+    var _a = (0, utils_1.isTouchEvent)(event) ? event.changedTouches[0] : event, x = _a.clientX, y = _a.clientY;
+    if (window.visualViewport) {
+        var _b = (0, viewports_1.convertMouseEventToLayoutCoordinates)(x, y), visualViewportX = _b.visualViewportX, visualViewportY = _b.visualViewportY;
+        x = visualViewportX;
+        y = visualViewportY;
+    }
+    return { x: x, y: y };
+}
 function initScrollObserver(cb, defaultPrivacyLevel, elementsScrollPositions) {
@@ -127,0 +135,0 @@ var updatePosition = (0, browser_core_1.throttle)((0, browser_core_1.monitor)(function (event) {

cjs/types/sessionReplay.d.ts

@@ -106,2 +106,32 @@ /**
 /**
+ * Browser-specific. Schema of a MouseInteraction.
+ */
+export declare type MouseInteraction = {
+    /**
+     * The type of MouseInteraction: 0=mouseup, 1=mousedown, 2=click, 3=contextmenu, 4=dblclick, 7=touchstart, 9=touchend
+     */
+    readonly type: 0 | 1 | 2 | 3 | 4 | 7 | 9;
+    /**
+     * Id for the target node for this MouseInteraction.
+     */
+    id: number;
+    /**
+     * X-axis coordinate for this MouseInteraction.
+     */
+    x: number;
+    /**
+     * Y-axis coordinate for this MouseInteraction.
+     */
+    y: number;
+} | {
+    /**
+     * The type of MouseInteraction: 5=focus, 6=blur
+     */
+    readonly type: 5 | 6;
+    /**
+     * Id for the target node for this MouseInteraction.
+     */
+    id: number;
+};
+/**
  * Browser-specific. Schema of a ScrollData.
@@ -560,23 +590,2 @@ */
 /**
- * Browser-specific. Schema of a MouseInteraction.
- */
-export interface MouseInteraction {
-    /**
-     * The type of MouseInteraction.
-     */
-    readonly type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9;
-    /**
-     * Id for the target node for this MouseInteraction.
-     */
-    id: number;
-    /**
-     * X-axis coordinate for this MouseInteraction.
-     */
-    x: number;
-    /**
-     * Y-axis coordinate for this MouseInteraction.
-     */
-    y: number;
-}
-/**
  * Browser-specific. Schema of a ScrollPosition.
@@ -583,0 +592,0 @@ */

esm/domain/record/observers.d.ts

@@ -11,3 +11,3 @@ import type { DefaultPrivacyLevel } from '@datadog/browser-core';
 export declare type MutationCallBack = (m: BrowserMutationPayload) => void;
-declare type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void;
+export declare type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void;
 declare type ScrollCallback = (p: ScrollPosition) => void;
@@ -48,2 +48,3 @@ export declare type StyleSheetCallback = (s: StyleSheetRule) => void;
 };
+export declare function initMouseInteractionObserver(cb: MouseInteractionCallBack, defaultPrivacyLevel: DefaultPrivacyLevel): ListenerHandler;
 declare type InputObserverOptions = {
@@ -50,0 +51,0 @@ domEvents?: Array<DOM_EVENT.INPUT | DOM_EVENT.CHANGE>;

esm/domain/record/observers.js

@@ -93,3 +93,3 @@ var _a;
     _a);
-function initMouseInteractionObserver(cb, defaultPrivacyLevel) {
+export function initMouseInteractionObserver(cb, defaultPrivacyLevel) {
     var handler = function (event) {
@@ -100,15 +100,13 @@ var target = getEventTarget(event);
         }
-        var _a = isTouchEvent(event) ? event.changedTouches[0] : event, clientX = _a.clientX, clientY = _a.clientY;
-        var position = {
-            id: getSerializedNodeId(target),
-            type: eventTypeToMouseInteraction[event.type],
-            x: clientX,
-            y: clientY,
-        };
-        if (window.visualViewport) {
-            var _b = convertMouseEventToLayoutCoordinates(clientX, clientY), visualViewportX = _b.visualViewportX, visualViewportY = _b.visualViewportY;
-            position.x = visualViewportX;
-            position.y = visualViewportY;
+        var id = getSerializedNodeId(target);
+        var type = eventTypeToMouseInteraction[event.type];
+        var interaction;
+        if (type !== MouseInteractionType.Blur && type !== MouseInteractionType.Focus) {
+            var _a = computeCoordinates(event), x = _a.x, y = _a.y;
+            interaction = { id: id, type: type, x: x, y: y };
         }
-        var record = assign({ id: getRecordIdForEvent(event) }, assembleIncrementalSnapshot(IncrementalSource.MouseInteraction, position));
+        else {
+            interaction = { id: id, type: type };
+        }
+        var record = assign({ id: getRecordIdForEvent(event) }, assembleIncrementalSnapshot(IncrementalSource.MouseInteraction, interaction));
         cb(record);
@@ -121,2 +119,11 @@ };
 }
+function computeCoordinates(event) {
+    var _a = isTouchEvent(event) ? event.changedTouches[0] : event, x = _a.clientX, y = _a.clientY;
+    if (window.visualViewport) {
+        var _b = convertMouseEventToLayoutCoordinates(x, y), visualViewportX = _b.visualViewportX, visualViewportY = _b.visualViewportY;
+        x = visualViewportX;
+        y = visualViewportY;
+    }
+    return { x: x, y: y };
+}
 function initScrollObserver(cb, defaultPrivacyLevel, elementsScrollPositions) {
@@ -123,0 +130,0 @@ var updatePosition = throttle(monitor(function (event) {

esm/types/sessionReplay.d.ts

@@ -106,2 +106,32 @@ /**
 /**
+ * Browser-specific. Schema of a MouseInteraction.
+ */
+export declare type MouseInteraction = {
+    /**
+     * The type of MouseInteraction: 0=mouseup, 1=mousedown, 2=click, 3=contextmenu, 4=dblclick, 7=touchstart, 9=touchend
+     */
+    readonly type: 0 | 1 | 2 | 3 | 4 | 7 | 9;
+    /**
+     * Id for the target node for this MouseInteraction.
+     */
+    id: number;
+    /**
+     * X-axis coordinate for this MouseInteraction.
+     */
+    x: number;
+    /**
+     * Y-axis coordinate for this MouseInteraction.
+     */
+    y: number;
+} | {
+    /**
+     * The type of MouseInteraction: 5=focus, 6=blur
+     */
+    readonly type: 5 | 6;
+    /**
+     * Id for the target node for this MouseInteraction.
+     */
+    id: number;
+};
+/**
  * Browser-specific. Schema of a ScrollData.
@@ -560,23 +590,2 @@ */
 /**
- * Browser-specific. Schema of a MouseInteraction.
- */
-export interface MouseInteraction {
-    /**
-     * The type of MouseInteraction.
-     */
-    readonly type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9;
-    /**
-     * Id for the target node for this MouseInteraction.
-     */
-    id: number;
-    /**
-     * X-axis coordinate for this MouseInteraction.
-     */
-    x: number;
-    /**
-     * Y-axis coordinate for this MouseInteraction.
-     */
-    y: number;
-}
-/**
  * Browser-specific. Schema of a ScrollPosition.
@@ -583,0 +592,0 @@ */

package.json

 {
   "name": "@datadog/browser-rum",
-  "version": "4.32.0",
+  "version": "4.32.1",
   "license": "Apache-2.0",
@@ -15,7 +15,7 @@ "main": "cjs/entries/main.js",
   "dependencies": {
-    "@datadog/browser-core": "4.32.0",
-    "@datadog/browser-rum-core": "4.32.0"
+    "@datadog/browser-core": "4.32.1",
+    "@datadog/browser-rum-core": "4.32.1"
   },
   "peerDependencies": {
-    "@datadog/browser-logs": "4.32.0"
+    "@datadog/browser-logs": "4.32.1"
   },
@@ -36,3 +36,3 @@ "peerDependenciesMeta": {
   },
-  "gitHead": "6c048d69afd02c14515af5335b446932d85487fd"
+  "gitHead": "c9e05c379595bfe664fbc673f2d429b3dee5274a"
 }

src/domain/record/observers.spec.ts

@@ -7,5 +7,10 @@ import { DefaultPrivacyLevel, isIE, noop, relativeNow, timeStampNow } from '@datadog/browser-core'
 import { NodePrivacyLevel, PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK_USER_INPUT } from '../../constants'
-import { RecordType } from '../../types'
-import type { FrustrationCallback, InputCallback, StyleSheetCallback } from './observers'
-import { initStyleSheetObserver, initFrustrationObserver, initInputObserver } from './observers'
+import { IncrementalSource, MouseInteractionType, RecordType } from '../../types'
+import type { FrustrationCallback, InputCallback, MouseInteractionCallBack, StyleSheetCallback } from './observers'
+import {
+  initStyleSheetObserver,
+  initFrustrationObserver,
+  initInputObserver,
+  initMouseInteractionObserver,
+} from './observers'
 import { serializeDocument, SerializationContextStatus } from './serialize'
@@ -332,1 +337,101 @@ import { createElementsScrollPositions } from './elementsScrollPositions'
 })
+
+describe('initMouseInteractionObserver', () => {
+  let mouseInteractionCallbackSpy: jasmine.Spy<MouseInteractionCallBack>
+  let stopObserver: () => void
+  let sandbox: HTMLDivElement
+  let a: HTMLAnchorElement
+
+  beforeEach(() => {
+    if (isIE()) {
+      pending('IE not supported')
+    }
+
+    sandbox = document.createElement('div')
+    a = document.createElement('a')
+    a.setAttribute('tabindex', '0') // make the element focusable
+    sandbox.appendChild(a)
+    document.body.appendChild(sandbox)
+    a.focus()
+
+    serializeDocument(document, DEFAULT_CONFIGURATION, {
+      shadowRootsController: DEFAULT_SHADOW_ROOT_CONTROLLER,
+      status: SerializationContextStatus.INITIAL_FULL_SNAPSHOT,
+      elementsScrollPositions: createElementsScrollPositions(),
+    })
+
+    mouseInteractionCallbackSpy = jasmine.createSpy()
+    stopObserver = initMouseInteractionObserver(mouseInteractionCallbackSpy, DefaultPrivacyLevel.ALLOW)
+  })
+
+  afterEach(() => {
+    sandbox.remove()
+    stopObserver()
+  })
+
+  it('should generate click record', () => {
+    a.click()
+
+    expect(mouseInteractionCallbackSpy).toHaveBeenCalledWith({
+      id: jasmine.any(Number),
+      type: RecordType.IncrementalSnapshot,
+      timestamp: jasmine.any(Number),
+      data: {
+        source: IncrementalSource.MouseInteraction,
+        type: MouseInteractionType.Click,
+        id: jasmine.any(Number),
+        x: jasmine.any(Number),
+        y: jasmine.any(Number),
+      },
+    })
+  })
+
+  it('should generate blur record', () => {
+    a.blur()
+
+    expect(mouseInteractionCallbackSpy).toHaveBeenCalledWith({
+      id: jasmine.any(Number),
+      type: RecordType.IncrementalSnapshot,
+      timestamp: jasmine.any(Number),
+      data: {
+        source: IncrementalSource.MouseInteraction,
+        type: MouseInteractionType.Blur,
+        id: jasmine.any(Number),
+      },
+    })
+  })
+
+  // related to safari issue, see RUMF-1450
+  describe('forced layout issue', () => {
+    let coordinatesComputed: boolean
+
+    beforeEach(() => {
+      if (!window.visualViewport) {
+        pending('no visualViewport')
+      }
+
+      coordinatesComputed = false
+      Object.defineProperty(window.visualViewport, 'offsetTop', {
+        get() {
+          coordinatesComputed = true
+          return 0
+        },
+        configurable: true,
+      })
+    })
+
+    afterEach(() => {
+      delete (window.visualViewport as any).offsetTop
+    })
+
+    it('should compute x/y coordinates for click record', () => {
+      a.click()
+      expect(coordinatesComputed).toBeTrue()
+    })
+
+    it('should not compute x/y coordinates for blur record', () => {
+      a.blur()
+      expect(coordinatesComputed).toBeFalse()
+    })
+  })
+})

src/domain/record/observers.ts

@@ -71,3 +71,3 @@ import type { DefaultPrivacyLevel } from '@datadog/browser-core'
 
-type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void
+export type MouseInteractionCallBack = (record: BrowserIncrementalSnapshotRecord) => void
 
@@ -198,3 +198,3 @@ type ScrollCallback = (p: ScrollPosition) => void
 }
-function initMouseInteractionObserver(
+export function initMouseInteractionObserver(
   cb: MouseInteractionCallBack,
@@ -208,18 +208,16 @@ defaultPrivacyLevel: DefaultPrivacyLevel
     }
-    const { clientX, clientY } = isTouchEvent(event) ? event.changedTouches[0] : event
-    const position: MouseInteraction = {
-      id: getSerializedNodeId(target),
-      type: eventTypeToMouseInteraction[event.type as keyof typeof eventTypeToMouseInteraction],
-      x: clientX,
-      y: clientY,
+    const id = getSerializedNodeId(target)
+    const type = eventTypeToMouseInteraction[event.type as keyof typeof eventTypeToMouseInteraction]
+
+    let interaction: MouseInteraction
+    if (type !== MouseInteractionType.Blur && type !== MouseInteractionType.Focus) {
+      const { x, y } = computeCoordinates(event)
+      interaction = { id, type, x, y }
+    } else {
+      interaction = { id, type }
     }
-    if (window.visualViewport) {
-      const { visualViewportX, visualViewportY } = convertMouseEventToLayoutCoordinates(clientX, clientY)
-      position.x = visualViewportX
-      position.y = visualViewportY
-    }
 
     const record = assign(
       { id: getRecordIdForEvent(event) },
-      assembleIncrementalSnapshot<MouseInteractionData>(IncrementalSource.MouseInteraction, position)
+      assembleIncrementalSnapshot<MouseInteractionData>(IncrementalSource.MouseInteraction, interaction)
     )
@@ -234,2 +232,12 @@ cb(record)
 
+function computeCoordinates(event: MouseEvent | TouchEvent) {
+  let { clientX: x, clientY: y } = isTouchEvent(event) ? event.changedTouches[0] : event
+  if (window.visualViewport) {
+    const { visualViewportX, visualViewportY } = convertMouseEventToLayoutCoordinates(x, y)
+    x = visualViewportX
+    y = visualViewportY
+  }
+  return { x, y }
+}
+
 function initScrollObserver(
@@ -236,0 +244,0 @@ cb: ScrollCallback,

src/types/sessionReplay.ts

@@ -131,2 +131,34 @@ /* eslint-disable */
 /**
+ * Browser-specific. Schema of a MouseInteraction.
+ */
+export type MouseInteraction =
+  | {
+      /**
+       * The type of MouseInteraction: 0=mouseup, 1=mousedown, 2=click, 3=contextmenu, 4=dblclick, 7=touchstart, 9=touchend
+       */
+      readonly type: 0 | 1 | 2 | 3 | 4 | 7 | 9
+      /**
+       * Id for the target node for this MouseInteraction.
+       */
+      id: number
+      /**
+       * X-axis coordinate for this MouseInteraction.
+       */
+      x: number
+      /**
+       * Y-axis coordinate for this MouseInteraction.
+       */
+      y: number
+    }
+  | {
+      /**
+       * The type of MouseInteraction: 5=focus, 6=blur
+       */
+      readonly type: 5 | 6
+      /**
+       * Id for the target node for this MouseInteraction.
+       */
+      id: number
+    }
+/**
  * Browser-specific. Schema of a ScrollData.
@@ -588,23 +620,2 @@ */
 /**
- * Browser-specific. Schema of a MouseInteraction.
- */
-export interface MouseInteraction {
-  /**
-   * The type of MouseInteraction.
-   */
-  readonly type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9
-  /**
-   * Id for the target node for this MouseInteraction.
-   */
-  id: number
-  /**
-   * X-axis coordinate for this MouseInteraction.
-   */
-  x: number
-  /**
-   * Y-axis coordinate for this MouseInteraction.
-   */
-  y: number
-}
-/**
  * Browser-specific. Schema of a ScrollPosition.
@@ -611,0 +622,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

1567421

increased by0.36%

Lines of code

26288

increased by0.54%

Dependency changes

• + Added@datadog/browser-core@4.32.1(transitive)

• + Added@datadog/browser-logs@4.32.1(transitive)

• + Added@datadog/browser-rum-core@4.32.1(transitive)

• - Removed@datadog/browser-core@4.32.0(transitive)

• - Removed@datadog/browser-logs@4.32.0(transitive)

• - Removed@datadog/browser-rum-core@4.32.0(transitive)

• Updated@datadog/browser-core@4.32.1

• Updated@datadog/browser-rum-core@4.32.1