@spotify-confidence/csr-recorder 0.17.12 → 0.17.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.17.13](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.12...csr-recorder-v0.17.13) (2026-08-18)
+
+
+### ✨ New Features
+
+* **csr-recorder:** capture click modifier keys ([#435](https://github.com/spotify/confidence-sdk-js/issues/435)) ([a1e7a96](https://github.com/spotify/confidence-sdk-js/commit/a1e7a96996cd2f361f3b44cc924d6b4d5ff0b003))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.7
+
 ## [0.17.12](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.11...csr-recorder-v0.17.12) (2026-08-18)
 
 

package/dist/index.cjs

@@ -11115,6 +11115,49 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 /**
+* rrweb does not include modifier keys in mouse-interaction events. Capture
+* the native click first, then add its safe, non-text metadata to the rrweb
+* event emitted during the same browser event dispatch.
+*/
+function clickModifiersPlugin() {
+	let pendingClick = null;
+	return {
+		name: "csr/click-modifiers@1",
+		options: {},
+		observer: (_callback, win) => {
+			const onClick = (event) => {
+				const click = event;
+				pendingClick = {
+					button: click.button,
+					altKey: click.altKey,
+					ctrlKey: click.ctrlKey,
+					metaKey: click.metaKey,
+					shiftKey: click.shiftKey
+				};
+				queueMicrotask(() => {
+					pendingClick = null;
+				});
+			};
+			win.addEventListener("click", onClick, true);
+			return () => win.removeEventListener("click", onClick, true);
+		},
+		eventProcessor: (event) => {
+			if (pendingClick && event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.MouseInteraction && event.data.type === MouseInteractions.Click) {
+				const click = pendingClick;
+				pendingClick = null;
+				return {
+					...event,
+					data: {
+						...event.data,
+						...click
+					}
+				};
+			}
+			return event;
+		}
+	};
+}
+/**
 * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
 */
 var RrwebEngine = class {
@@ -11122,7 +11165,7 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [];
+		const plugins = [clickModifiersPlugin()];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

package/dist/index.js

@@ -11114,6 +11114,49 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 /**
+* rrweb does not include modifier keys in mouse-interaction events. Capture
+* the native click first, then add its safe, non-text metadata to the rrweb
+* event emitted during the same browser event dispatch.
+*/
+function clickModifiersPlugin() {
+	let pendingClick = null;
+	return {
+		name: "csr/click-modifiers@1",
+		options: {},
+		observer: (_callback, win) => {
+			const onClick = (event) => {
+				const click = event;
+				pendingClick = {
+					button: click.button,
+					altKey: click.altKey,
+					ctrlKey: click.ctrlKey,
+					metaKey: click.metaKey,
+					shiftKey: click.shiftKey
+				};
+				queueMicrotask(() => {
+					pendingClick = null;
+				});
+			};
+			win.addEventListener("click", onClick, true);
+			return () => win.removeEventListener("click", onClick, true);
+		},
+		eventProcessor: (event) => {
+			if (pendingClick && event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.MouseInteraction && event.data.type === MouseInteractions.Click) {
+				const click = pendingClick;
+				pendingClick = null;
+				return {
+					...event,
+					data: {
+						...event.data,
+						...click
+					}
+				};
+			}
+			return event;
+		}
+	};
+}
+/**
 * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
 */
 var RrwebEngine = class {
@@ -11121,7 +11164,7 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [];
+		const plugins = [clickModifiersPlugin()];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotify-confidence/csr-recorder",
   "license": "Apache-2.0",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/spotify/confidence-sdk-js.git",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@rrweb/rrweb-plugin-console-record": "^2.0.1",
-    "@spotify-confidence/csr-common": "0.18.6",
+    "@spotify-confidence/csr-common": "0.18.7",
     "rrweb": "^2.0.1"
   },
   "module": "./dist/index.js",

package/src/engine/rrweb-engine.test.ts

@@ -1,9 +1,12 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { RrwebEngine } from './rrweb-engine';
 
 const recordSpy = vi.fn().mockReturnValue(() => {});
 
-vi.mock('rrweb', () => ({
+vi.mock('rrweb', async importOriginal => ({
+  ...(await importOriginal<typeof import('rrweb')>()),
   record: (opts: unknown) => recordSpy(opts),
 }));
 
@@ -60,4 +63,66 @@ describe('RrwebEngine', () => {
     new RrwebEngine().start({}, () => {});
     expect(recordSpy.mock.calls[0][0].slimDOMOptions).toBe('all');
   });
+
+  it('adds native click modifier keys to the rrweb click event', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/click-modifiers@1',
+    );
+    const removeObserver = plugin.observer(() => {}, window);
+
+    document.dispatchEvent(
+      new MouseEvent('click', {
+        button: 0,
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+        shiftKey: true,
+      }),
+    );
+
+    expect(
+      plugin.eventProcessor({
+        type: 3,
+        timestamp: 1,
+        data: { source: 2, type: 2, id: 7, x: 10, y: 20 },
+      }),
+    ).toEqual({
+      type: 3,
+      timestamp: 1,
+      data: {
+        source: 2,
+        type: 2,
+        id: 7,
+        x: 10,
+        y: 20,
+        button: 0,
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+        shiftKey: true,
+      },
+    });
+
+    removeObserver();
+  });
+
+  it('does not add stale modifiers to a later click', async () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/click-modifiers@1',
+    );
+    const removeObserver = plugin.observer(() => {}, window);
+    document.dispatchEvent(new MouseEvent('click', { metaKey: true }));
+    await Promise.resolve();
+
+    const event = {
+      type: 3,
+      timestamp: 1,
+      data: { source: 2, type: 2, id: 7 },
+    };
+    expect(plugin.eventProcessor(event)).toBe(event);
+
+    removeObserver();
+  });
 });

package/src/engine/rrweb-engine.ts

@@ -1,11 +1,63 @@
-import { RecordingEvent, type ConsoleLogLevel } from '@spotify-confidence/csr-common';
+import { type ConsoleLogLevel, type RecordingEvent } from '@spotify-confidence/csr-common';
 import { RecordingConfig, DEFAULT_MASK_SELECTORS, DEFAULT_BLOCK_SELECTORS } from '../types';
 import { RecordingEngine } from './index';
-import { record } from 'rrweb';
+import { EventType, IncrementalSource, MouseInteractions, record, type recordOptions } from 'rrweb';
 import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
 
 const ALL_CONSOLE_LEVELS: ConsoleLogLevel[] = ['log', 'warn', 'error', 'debug', 'info'];
 
+type RrwebPlugin = NonNullable<recordOptions<RecordingEvent>['plugins']>[number];
+
+type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
+
+/**
+ * rrweb does not include modifier keys in mouse-interaction events. Capture
+ * the native click first, then add its safe, non-text metadata to the rrweb
+ * event emitted during the same browser event dispatch.
+ */
+function clickModifiersPlugin(): RrwebPlugin {
+  let pendingClick: ClickModifiers | null = null;
+
+  return {
+    name: 'csr/click-modifiers@1',
+    options: {},
+    observer: (_callback, win) => {
+      const onClick = (event: Event) => {
+        const click = event as MouseEvent;
+        pendingClick = {
+          button: click.button,
+          altKey: click.altKey,
+          ctrlKey: click.ctrlKey,
+          metaKey: click.metaKey,
+          shiftKey: click.shiftKey,
+        };
+        queueMicrotask(() => {
+          pendingClick = null;
+        });
+      };
+
+      win.addEventListener('click', onClick, true);
+      return () => win.removeEventListener('click', onClick, true);
+    },
+    eventProcessor: event => {
+      if (
+        pendingClick &&
+        event.type === EventType.IncrementalSnapshot &&
+        event.data.source === IncrementalSource.MouseInteraction &&
+        event.data.type === MouseInteractions.Click
+      ) {
+        const click = pendingClick;
+        pendingClick = null;
+        return {
+          ...event,
+          data: { ...event.data, ...click },
+        };
+      }
+      return event;
+    },
+  };
+}
+
 /**
  * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
  */
@@ -16,7 +68,7 @@ export class RrwebEngine implements RecordingEngine {
     const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
     const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
 
-    const plugins = [];
+    const plugins: RrwebPlugin[] = [clickModifiersPlugin()];
     const { captureConsoleLogs } = config;
     if (captureConsoleLogs) {
       const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;