@spotify-confidence/csr-recorder 0.17.14 → 0.17.16

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.17.16](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.15...csr-recorder-v0.17.16) (2026-08-28)
+
+
+### 🐛 Bug Fixes
+
+* replace blocked videos with labelled placeholders ([#444](https://github.com/spotify/confidence-sdk-js/issues/444)) ([d1385b4](https://github.com/spotify/confidence-sdk-js/commit/d1385b4b19e267ba12e1a51890f085bf4746fb16))
+
+
+### ✨ New Features
+
+* record clipboard actions ([#445](https://github.com/spotify/confidence-sdk-js/issues/445)) ([7a4aed4](https://github.com/spotify/confidence-sdk-js/commit/7a4aed4bada3b38de513f50aad4224e54488bbbb))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.8
+
+## [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)
 
 

package/dist/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _spotify_confidence_csr_common = require("@spotify-confidence/csr-common");
 //#region src/types.ts
 const DEFAULT_MASK_SELECTORS = ["[data-csr-mask]"];
-const DEFAULT_BLOCK_SELECTORS = ["[data-csr-block]"];
+const DEFAULT_BLOCK_SELECTORS = ["[data-csr-block]", "video"];
 let RecorderState = /* @__PURE__ */ function(RecorderState) {
 	RecorderState["Idle"] = "idle";
 	RecorderState["Recording"] = "recording";
@@ -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();
@@ -11114,6 +11125,63 @@ const ALL_CONSOLE_LEVELS = [
 	"debug",
 	"info"
 ];
+const BLOCKED_ELEMENT_ATTRIBUTE = "data-csr-blocked-element";
+function labelBlockedElement(node) {
+	if (node.type === 2 && node.tagName !== void 0 && node.attributes !== void 0 && typeof node.attributes.rr_width === "string" && typeof node.attributes.rr_height === "string") {
+		node.attributes[BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
+		node.tagName = "div";
+	}
+	node.childNodes?.forEach(labelBlockedElement);
+}
+/**
+* rrweb strips blocked elements down to their dimensions, but retains their
+* original tag name. Rebuild them as inert divs and keep the tag name as safe
+* metadata so players can render a useful placeholder label.
+*/
+function blockedElementLabelsPlugin() {
+	return {
+		name: "csr/blocked-element-labels@1",
+		options: {},
+		observer: () => () => {},
+		eventProcessor: (event) => {
+			if (event.type === EventType.FullSnapshot) labelBlockedElement(event.data.node);
+			else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) event.data.adds.forEach((add) => labelBlockedElement(add.node));
+			return event;
+		}
+	};
+}
+/**
+* Record clipboard actions and their DOM target without reading clipboard
+* contents. The resulting rrweb Plugin events can explain otherwise
+* surprising input changes during analysis.
+*/
+function clipboardActionsPlugin() {
+	let getId;
+	return {
+		name: "csr/clipboard@1",
+		options: {},
+		getMirror: ({ nodeMirror }) => {
+			getId = (node) => nodeMirror.getId(node);
+		},
+		observer: (callback, win) => {
+			const handlers = [
+				"copy",
+				"cut",
+				"paste"
+			].map((action) => {
+				const handler = (event) => {
+					callback({
+						action,
+						targetId: event.target instanceof win.Node ? getId?.(event.target) ?? -1 : -1
+					});
+				};
+				win.document.addEventListener(action, handler, true);
+				return () => win.document.removeEventListener(action, handler, true);
+			});
+			return () => handlers.forEach((remove) => remove());
+		}
+	};
+}
 /**
 * 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
@@ -11166,7 +11234,11 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [clickModifiersPlugin()];
+		const plugins = [
+			clickModifiersPlugin(),
+			clipboardActionsPlugin(),
+			blockedElementLabelsPlugin()
+		];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;
@@ -11188,6 +11260,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

@@ -1,7 +1,7 @@
 import { RecordingEventType } from "@spotify-confidence/csr-common";
 //#region src/types.ts
 const DEFAULT_MASK_SELECTORS = ["[data-csr-mask]"];
-const DEFAULT_BLOCK_SELECTORS = ["[data-csr-block]"];
+const DEFAULT_BLOCK_SELECTORS = ["[data-csr-block]", "video"];
 let RecorderState = /* @__PURE__ */ function(RecorderState) {
 	RecorderState["Idle"] = "idle";
 	RecorderState["Recording"] = "recording";
@@ -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();
@@ -11113,6 +11124,63 @@ const ALL_CONSOLE_LEVELS = [
 	"debug",
 	"info"
 ];
+const BLOCKED_ELEMENT_ATTRIBUTE = "data-csr-blocked-element";
+function labelBlockedElement(node) {
+	if (node.type === 2 && node.tagName !== void 0 && node.attributes !== void 0 && typeof node.attributes.rr_width === "string" && typeof node.attributes.rr_height === "string") {
+		node.attributes[BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
+		node.tagName = "div";
+	}
+	node.childNodes?.forEach(labelBlockedElement);
+}
+/**
+* rrweb strips blocked elements down to their dimensions, but retains their
+* original tag name. Rebuild them as inert divs and keep the tag name as safe
+* metadata so players can render a useful placeholder label.
+*/
+function blockedElementLabelsPlugin() {
+	return {
+		name: "csr/blocked-element-labels@1",
+		options: {},
+		observer: () => () => {},
+		eventProcessor: (event) => {
+			if (event.type === EventType.FullSnapshot) labelBlockedElement(event.data.node);
+			else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) event.data.adds.forEach((add) => labelBlockedElement(add.node));
+			return event;
+		}
+	};
+}
+/**
+* Record clipboard actions and their DOM target without reading clipboard
+* contents. The resulting rrweb Plugin events can explain otherwise
+* surprising input changes during analysis.
+*/
+function clipboardActionsPlugin() {
+	let getId;
+	return {
+		name: "csr/clipboard@1",
+		options: {},
+		getMirror: ({ nodeMirror }) => {
+			getId = (node) => nodeMirror.getId(node);
+		},
+		observer: (callback, win) => {
+			const handlers = [
+				"copy",
+				"cut",
+				"paste"
+			].map((action) => {
+				const handler = (event) => {
+					callback({
+						action,
+						targetId: event.target instanceof win.Node ? getId?.(event.target) ?? -1 : -1
+					});
+				};
+				win.document.addEventListener(action, handler, true);
+				return () => win.document.removeEventListener(action, handler, true);
+			});
+			return () => handlers.forEach((remove) => remove());
+		}
+	};
+}
 /**
 * 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
@@ -11165,7 +11233,11 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [clickModifiersPlugin()];
+		const plugins = [
+			clickModifiersPlugin(),
+			clipboardActionsPlugin(),
+			blockedElementLabelsPlugin()
+		];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;
@@ -11187,6 +11259,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.14",
+  "version": "0.17.16",
   "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.7",
+    "@spotify-confidence/csr-common": "0.18.8",
     "rrweb": "^2.0.1"
   },
   "module": "./dist/index.js",

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({}, () => {});
@@ -50,7 +55,56 @@ describe('RrwebEngine', () => {
 
   it('applies default blockSelector when blockSelectors is absent', () => {
     new RrwebEngine().start({}, () => {});
-    expect(recordSpy.mock.calls[0][0].blockSelector).toBe('[data-csr-block]');
+    expect(recordSpy.mock.calls[0][0].blockSelector).toBe('[data-csr-block],video');
+  });
+
+  it('rebuilds blocked elements as labelled inert placeholders', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/blocked-element-labels@1',
+    );
+    const event = {
+      type: 2,
+      timestamp: 1,
+      data: {
+        node: {
+          type: 0,
+          id: 1,
+          childNodes: [
+            {
+              type: 2,
+              id: 2,
+              tagName: 'video',
+              attributes: { rr_width: '640px', rr_height: '360px' },
+              childNodes: [],
+            },
+          ],
+        },
+      },
+    };
+
+    expect(plugin.eventProcessor(event)).toEqual({
+      ...event,
+      data: {
+        node: {
+          type: 0,
+          id: 1,
+          childNodes: [
+            {
+              type: 2,
+              id: 2,
+              tagName: 'div',
+              attributes: {
+                rr_width: '640px',
+                rr_height: '360px',
+                'data-csr-blocked-element': 'video',
+              },
+              childNodes: [],
+            },
+          ],
+        },
+      },
+    });
   });
 
   it('throttles mousemove to 100ms and records only last input value', () => {
@@ -64,6 +118,39 @@ describe('RrwebEngine', () => {
     expect(recordSpy.mock.calls[0][0].slimDOMOptions).toBe('all');
   });
 
+  it('records copy, cut, and paste actions without reading clipboard contents', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(({ name }: { name: string }) => name === 'csr/clipboard@1');
+    const getId = vi.fn().mockReturnValue(42);
+    plugin.getMirror({ nodeMirror: { getId } });
+    const callback = vi.fn();
+    const removeObserver = plugin.observer(callback, window);
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    for (const action of ['copy', 'cut', 'paste']) {
+      const event = new Event(action, { bubbles: true });
+      Object.defineProperty(event, 'clipboardData', {
+        get: () => {
+          throw new Error('clipboard contents must not be read');
+        },
+      });
+      expect(() => input.dispatchEvent(event)).not.toThrow();
+    }
+
+    expect(callback.mock.calls.map(([payload]) => payload)).toEqual([
+      { action: 'copy', targetId: 42 },
+      { action: 'cut', targetId: 42 },
+      { action: 'paste', targetId: 42 },
+    ]);
+    expect(getId).toHaveBeenCalledTimes(3);
+
+    removeObserver();
+    input.dispatchEvent(new Event('paste', { bubbles: true }));
+    expect(callback).toHaveBeenCalledTimes(3);
+    input.remove();
+  });
+
   it('keeps native click modifiers through a browser microtask checkpoint', async () => {
     new RrwebEngine().start({}, () => {});
     const plugin = recordSpy.mock.calls[0][0].plugins.find(
@@ -128,4 +215,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'];
@@ -10,6 +10,86 @@ type RrwebPlugin = NonNullable<recordOptions<RecordingEvent>['plugins']>[number]
 
 type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
 
+const BLOCKED_ELEMENT_ATTRIBUTE = 'data-csr-blocked-element';
+
+type SerializedNode = {
+  type: number;
+  tagName?: string;
+  attributes?: Record<string, unknown>;
+  childNodes?: SerializedNode[];
+};
+
+function labelBlockedElement(node: SerializedNode): void {
+  const isBlockedElement =
+    node.type === 2 &&
+    node.tagName !== undefined &&
+    node.attributes !== undefined &&
+    typeof node.attributes.rr_width === 'string' &&
+    typeof node.attributes.rr_height === 'string';
+
+  if (isBlockedElement) {
+    node.attributes![BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
+    node.tagName = 'div';
+  }
+
+  node.childNodes?.forEach(labelBlockedElement);
+}
+
+/**
+ * rrweb strips blocked elements down to their dimensions, but retains their
+ * original tag name. Rebuild them as inert divs and keep the tag name as safe
+ * metadata so players can render a useful placeholder label.
+ */
+function blockedElementLabelsPlugin(): RrwebPlugin {
+  return {
+    name: 'csr/blocked-element-labels@1',
+    options: {},
+    observer: () => () => {},
+    eventProcessor: event => {
+      if (event.type === EventType.FullSnapshot) {
+        labelBlockedElement(event.data.node as SerializedNode);
+      } else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) {
+        event.data.adds.forEach(add => labelBlockedElement(add.node as SerializedNode));
+      }
+
+      return event;
+    },
+  };
+}
+
+type ClipboardAction = 'copy' | 'cut' | 'paste';
+
+/**
+ * Record clipboard actions and their DOM target without reading clipboard
+ * contents. The resulting rrweb Plugin events can explain otherwise
+ * surprising input changes during analysis.
+ */
+function clipboardActionsPlugin(): RrwebPlugin {
+  let getId: ((node: Node) => number) | undefined;
+
+  return {
+    name: 'csr/clipboard@1',
+    options: {},
+    getMirror: ({ nodeMirror }) => {
+      getId = node => nodeMirror.getId(node);
+    },
+    observer: (callback, win) => {
+      const actions: ClipboardAction[] = ['copy', 'cut', 'paste'];
+      const handlers = actions.map(action => {
+        const handler = (event: Event) => {
+          const targetId = event.target instanceof win.Node ? getId?.(event.target) ?? -1 : -1;
+          callback({ action, targetId });
+        };
+
+        win.document.addEventListener(action, handler, true);
+        return () => win.document.removeEventListener(action, handler, true);
+      });
+
+      return () => handlers.forEach(remove => remove());
+    },
+  };
+}
+
 /**
  * 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
@@ -69,7 +149,7 @@ export class RrwebEngine implements RecordingEngine {
     const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
     const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
 
-    const plugins: RrwebPlugin[] = [clickModifiersPlugin()];
+    const plugins: RrwebPlugin[] = [clickModifiersPlugin(), clipboardActionsPlugin(), blockedElementLabelsPlugin()];
     const { captureConsoleLogs } = config;
     if (captureConsoleLogs) {
       const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;
@@ -96,6 +176,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();

package/src/types.ts

@@ -6,7 +6,7 @@ export interface RecorderOptions {
 }
 
 export const DEFAULT_MASK_SELECTORS: string[] = ['[data-csr-mask]'];
-export const DEFAULT_BLOCK_SELECTORS: string[] = ['[data-csr-block]'];
+export const DEFAULT_BLOCK_SELECTORS: string[] = ['[data-csr-block]', 'video'];
 
 export interface RecordingConfig {
   /**