@spotify-confidence/csr-recorder 0.17.13 → 0.17.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.17.15](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.14...csr-recorder-v0.17.15) (2026-08-20)
+
+
+### 🐛 Bug Fixes
+
+* **csr:** resnapshot pages restored from BFCache ([#439](https://github.com/spotify/confidence-sdk-js/issues/439)) ([5594d02](https://github.com/spotify/confidence-sdk-js/commit/5594d02b3b3141010f068e41ff0fff328115af4b))
+
+## [0.17.14](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.13...csr-recorder-v0.17.14) (2026-08-20)
+
+
+### 🐛 Bug Fixes
+
+* **csr-recorder:** preserve native click modifiers ([#440](https://github.com/spotify/confidence-sdk-js/issues/440)) ([9575f1a](https://github.com/spotify/confidence-sdk-js/commit/9575f1a915a1a71ae16b1bd59053085d2456b0da))
+
 ## [0.17.13](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.12...csr-recorder-v0.17.13) (2026-08-18)
 
 

package/dist/index.cjs

@@ -70,6 +70,7 @@ var Recorder = class Recorder {
 	onEvent;
 	state = "idle";
 	visibilityHandler = null;
+	pageShowHandler = null;
 	originalFetch = null;
 	originalXhrOpen = null;
 	originalXhrSend = null;
@@ -115,6 +116,12 @@ var Recorder = class Recorder {
 			};
 			document.addEventListener("visibilitychange", this.visibilityHandler);
 		}
+		if (typeof window !== "undefined") {
+			this.pageShowHandler = (event) => {
+				if (event.persisted) this.engine.takeFullSnapshot();
+			};
+			window.addEventListener("pageshow", this.pageShowHandler);
+		}
 		if (config?.captureNetworkRequests) this.patchNetwork();
 		if (config?.captureRouteChanges !== false) this.patchRouting();
 	}
@@ -301,6 +308,10 @@ var Recorder = class Recorder {
 			document.removeEventListener("visibilitychange", this.visibilityHandler);
 			this.visibilityHandler = null;
 		}
+		if (this.pageShowHandler) {
+			window.removeEventListener("pageshow", this.pageShowHandler);
+			this.pageShowHandler = null;
+		}
 		this.restoreNetwork();
 		this.restoreRouting();
 		this.engine.stop();
@@ -11127,16 +11138,17 @@ function clickModifiersPlugin() {
 		observer: (_callback, win) => {
 			const onClick = (event) => {
 				const click = event;
-				pendingClick = {
+				const modifiers = {
 					button: click.button,
 					altKey: click.altKey,
 					ctrlKey: click.ctrlKey,
 					metaKey: click.metaKey,
 					shiftKey: click.shiftKey
 				};
-				queueMicrotask(() => {
-					pendingClick = null;
-				});
+				pendingClick = modifiers;
+				win.setTimeout(() => {
+					if (pendingClick === modifiers) pendingClick = null;
+				}, 0);
 			};
 			win.addEventListener("click", onClick, true);
 			return () => win.removeEventListener("click", onClick, true);
@@ -11187,6 +11199,9 @@ var RrwebEngine = class {
 			slimDOMOptions: "all"
 		}) ?? null;
 	}
+	takeFullSnapshot() {
+		takeFullSnapshot(true);
+	}
 	stop() {
 		this.stopFn?.();
 		this.stopFn = null;

package/dist/index.d.cts

@@ -7,6 +7,7 @@ import { RecordingEvent } from "@spotify-confidence/csr-common";
 */
 interface RecordingEngine {
   start(config: RecordingConfig, onEvent: (event: RecordingEvent) => void): void;
+  takeFullSnapshot(): void;
   stop(): void;
 }
 //#endregion
@@ -102,6 +103,7 @@ declare class Recorder {
   private readonly onEvent;
   private state;
   private visibilityHandler;
+  private pageShowHandler;
   private originalFetch;
   private originalXhrOpen;
   private originalXhrSend;
@@ -132,6 +134,7 @@ declare class Recorder {
 declare class RrwebEngine implements RecordingEngine {
   private stopFn;
   start(config: RecordingConfig, onEvent: (event: RecordingEvent) => void): void;
+  takeFullSnapshot(): void;
   stop(): void;
 }
 //#endregion

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { RecordingEvent } from "@spotify-confidence/csr-common";
 */
 interface RecordingEngine {
   start(config: RecordingConfig, onEvent: (event: RecordingEvent) => void): void;
+  takeFullSnapshot(): void;
   stop(): void;
 }
 //#endregion
@@ -102,6 +103,7 @@ declare class Recorder {
   private readonly onEvent;
   private state;
   private visibilityHandler;
+  private pageShowHandler;
   private originalFetch;
   private originalXhrOpen;
   private originalXhrSend;
@@ -132,6 +134,7 @@ declare class Recorder {
 declare class RrwebEngine implements RecordingEngine {
   private stopFn;
   start(config: RecordingConfig, onEvent: (event: RecordingEvent) => void): void;
+  takeFullSnapshot(): void;
   stop(): void;
 }
 //#endregion

package/dist/index.js

@@ -69,6 +69,7 @@ var Recorder = class Recorder {
 	onEvent;
 	state = "idle";
 	visibilityHandler = null;
+	pageShowHandler = null;
 	originalFetch = null;
 	originalXhrOpen = null;
 	originalXhrSend = null;
@@ -114,6 +115,12 @@ var Recorder = class Recorder {
 			};
 			document.addEventListener("visibilitychange", this.visibilityHandler);
 		}
+		if (typeof window !== "undefined") {
+			this.pageShowHandler = (event) => {
+				if (event.persisted) this.engine.takeFullSnapshot();
+			};
+			window.addEventListener("pageshow", this.pageShowHandler);
+		}
 		if (config?.captureNetworkRequests) this.patchNetwork();
 		if (config?.captureRouteChanges !== false) this.patchRouting();
 	}
@@ -300,6 +307,10 @@ var Recorder = class Recorder {
 			document.removeEventListener("visibilitychange", this.visibilityHandler);
 			this.visibilityHandler = null;
 		}
+		if (this.pageShowHandler) {
+			window.removeEventListener("pageshow", this.pageShowHandler);
+			this.pageShowHandler = null;
+		}
 		this.restoreNetwork();
 		this.restoreRouting();
 		this.engine.stop();
@@ -11126,16 +11137,17 @@ function clickModifiersPlugin() {
 		observer: (_callback, win) => {
 			const onClick = (event) => {
 				const click = event;
-				pendingClick = {
+				const modifiers = {
 					button: click.button,
 					altKey: click.altKey,
 					ctrlKey: click.ctrlKey,
 					metaKey: click.metaKey,
 					shiftKey: click.shiftKey
 				};
-				queueMicrotask(() => {
-					pendingClick = null;
-				});
+				pendingClick = modifiers;
+				win.setTimeout(() => {
+					if (pendingClick === modifiers) pendingClick = null;
+				}, 0);
 			};
 			win.addEventListener("click", onClick, true);
 			return () => win.removeEventListener("click", onClick, true);
@@ -11186,6 +11198,9 @@ var RrwebEngine = class {
 			slimDOMOptions: "all"
 		}) ?? null;
 	}
+	takeFullSnapshot() {
+		takeFullSnapshot(true);
+	}
 	stop() {
 		this.stopFn?.();
 		this.stopFn = null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotify-confidence/csr-recorder",
   "license": "Apache-2.0",
-  "version": "0.17.13",
+  "version": "0.17.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/spotify/confidence-sdk-js.git",

package/src/engine/index.ts

@@ -7,5 +7,6 @@ import { RecordingConfig } from '../types';
  */
 export interface RecordingEngine {
   start(config: RecordingConfig, onEvent: (event: RecordingEvent) => void): void;
+  takeFullSnapshot(): void;
   stop(): void;
 }

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

@@ -4,14 +4,19 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { RrwebEngine } from './rrweb-engine';
 
 const recordSpy = vi.fn().mockReturnValue(() => {});
+const takeFullSnapshotSpy = vi.fn();
 
 vi.mock('rrweb', async importOriginal => ({
   ...(await importOriginal<typeof import('rrweb')>()),
   record: (opts: unknown) => recordSpy(opts),
+  takeFullSnapshot: (isCheckout: boolean) => takeFullSnapshotSpy(isCheckout),
 }));
 
 describe('RrwebEngine', () => {
-  beforeEach(() => recordSpy.mockClear());
+  beforeEach(() => {
+    recordSpy.mockClear();
+    takeFullSnapshotSpy.mockClear();
+  });
 
   it('defaults maskAllInputs=true when maskInputs is omitted', () => {
     new RrwebEngine().start({}, () => {});
@@ -64,7 +69,7 @@ describe('RrwebEngine', () => {
     expect(recordSpy.mock.calls[0][0].slimDOMOptions).toBe('all');
   });
 
-  it('adds native click modifier keys to the rrweb click event', () => {
+  it('keeps native click modifiers through a browser microtask checkpoint', async () => {
     new RrwebEngine().start({}, () => {});
     const plugin = recordSpy.mock.calls[0][0].plugins.find(
       ({ name }: { name: string }) => name === 'csr/click-modifiers@1',
@@ -80,6 +85,9 @@ describe('RrwebEngine', () => {
         shiftKey: true,
       }),
     );
+    // Browsers can run a microtask checkpoint between the window capture
+    // listener above and rrweb's document listener for a trusted click.
+    await Promise.resolve();
 
     expect(
       plugin.eventProcessor({
@@ -114,7 +122,7 @@ describe('RrwebEngine', () => {
     );
     const removeObserver = plugin.observer(() => {}, window);
     document.dispatchEvent(new MouseEvent('click', { metaKey: true }));
-    await Promise.resolve();
+    await new Promise(resolve => window.setTimeout(resolve, 0));
 
     const event = {
       type: 3,
@@ -125,4 +133,12 @@ describe('RrwebEngine', () => {
 
     removeObserver();
   });
+
+  it('takes a checkout snapshot when requested', () => {
+    const engine = new RrwebEngine();
+
+    engine.takeFullSnapshot();
+
+    expect(takeFullSnapshotSpy).toHaveBeenCalledWith(true);
+  });
 });

package/src/engine/rrweb-engine.ts

@@ -1,7 +1,7 @@
 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 { EventType, IncrementalSource, MouseInteractions, record, type recordOptions } from 'rrweb';
+import { EventType, IncrementalSource, MouseInteractions, record, takeFullSnapshot, type recordOptions } from 'rrweb';
 import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
 
 const ALL_CONSOLE_LEVELS: ConsoleLogLevel[] = ['log', 'warn', 'error', 'debug', 'info'];
@@ -24,16 +24,17 @@ function clickModifiersPlugin(): RrwebPlugin {
     observer: (_callback, win) => {
       const onClick = (event: Event) => {
         const click = event as MouseEvent;
-        pendingClick = {
+        const modifiers = {
           button: click.button,
           altKey: click.altKey,
           ctrlKey: click.ctrlKey,
           metaKey: click.metaKey,
           shiftKey: click.shiftKey,
         };
-        queueMicrotask(() => {
-          pendingClick = null;
-        });
+        pendingClick = modifiers;
+        win.setTimeout(() => {
+          if (pendingClick === modifiers) pendingClick = null;
+        }, 0);
       };
 
       win.addEventListener('click', onClick, true);
@@ -95,6 +96,10 @@ export class RrwebEngine implements RecordingEngine {
       }) ?? null;
   }
 
+  takeFullSnapshot(): void {
+    takeFullSnapshot(true);
+  }
+
   stop(): void {
     this.stopFn?.();
     this.stopFn = null;

package/src/recorder-bfcache.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest';
+import type { RecordingEvent } from '@spotify-confidence/csr-common';
+import type { RecordingEngine } from './engine';
+import { Recorder } from './recorder';
+
+class MockEngine implements RecordingEngine {
+  takeFullSnapshot = vi.fn();
+
+  start(_config: unknown, _onEvent: (event: RecordingEvent) => void): void {}
+
+  stop(): void {}
+}
+
+function dispatchPageShow(persisted: boolean): void {
+  const event = new Event('pageshow');
+  Object.defineProperty(event, 'persisted', { value: persisted });
+  window.dispatchEvent(event);
+}
+
+describe('Recorder BFCache restoration', () => {
+  it('takes a full snapshot when the page is restored from BFCache', () => {
+    const engine = new MockEngine();
+    const recorder = new Recorder({ engine, onEvent: vi.fn() });
+    recorder.start();
+
+    dispatchPageShow(true);
+
+    expect(engine.takeFullSnapshot).toHaveBeenCalledOnce();
+    recorder.stop();
+  });
+
+  it('does not take another snapshot for a normal pageshow event', () => {
+    const engine = new MockEngine();
+    const recorder = new Recorder({ engine, onEvent: vi.fn() });
+    recorder.start();
+
+    dispatchPageShow(false);
+
+    expect(engine.takeFullSnapshot).not.toHaveBeenCalled();
+    recorder.stop();
+  });
+
+  it('stops responding to pageshow events after recording stops', () => {
+    const engine = new MockEngine();
+    const recorder = new Recorder({ engine, onEvent: vi.fn() });
+    recorder.start();
+    recorder.stop();
+
+    dispatchPageShow(true);
+
+    expect(engine.takeFullSnapshot).not.toHaveBeenCalled();
+  });
+});

package/src/recorder-routing.test.ts

@@ -24,6 +24,8 @@ class MockEngine implements RecordingEngine {
     this.onEvent = null;
   }
 
+  takeFullSnapshot(): void {}
+
   emit(event: RecordingEvent): void {
     this.onEvent?.(event);
   }

package/src/recorder.test.ts

@@ -23,6 +23,8 @@ class MockEngine implements RecordingEngine {
     this.onEvent = null;
   }
 
+  takeFullSnapshot(): void {}
+
   emit(event: RecordingEvent): void {
     this.onEvent?.(event);
   }

package/src/recorder.ts

@@ -16,6 +16,7 @@ export class Recorder {
   private readonly onEvent: (event: RecordingEvent) => void;
   private state: RecorderState = RecorderState.Idle;
   private visibilityHandler: (() => void) | null = null;
+  private pageShowHandler: ((event: PageTransitionEvent) => void) | null = null;
   private originalFetch: typeof globalThis.fetch | null = null;
   private originalXhrOpen: typeof XMLHttpRequest.prototype.open | null = null;
   private originalXhrSend: typeof XMLHttpRequest.prototype.send | null = null;
@@ -65,6 +66,15 @@ export class Recorder {
       document.addEventListener('visibilitychange', this.visibilityHandler);
     }
 
+    if (typeof window !== 'undefined') {
+      this.pageShowHandler = event => {
+        if (event.persisted) {
+          this.engine.takeFullSnapshot();
+        }
+      };
+      window.addEventListener('pageshow', this.pageShowHandler);
+    }
+
     if (config?.captureNetworkRequests) {
       this.patchNetwork();
     }
@@ -287,6 +297,10 @@ export class Recorder {
       document.removeEventListener('visibilitychange', this.visibilityHandler);
       this.visibilityHandler = null;
     }
+    if (this.pageShowHandler) {
+      window.removeEventListener('pageshow', this.pageShowHandler);
+      this.pageShowHandler = null;
+    }
     this.restoreNetwork();
     this.restoreRouting();
     this.engine.stop();