@spotify-confidence/csr-recorder 0.17.16 → 0.17.18

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [0.17.18](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.17...csr-recorder-v0.17.18) (2026-09-09)
+
+
+### 🐛 Bug Fixes
+
+* strip query and hash from recording URLs ([#452](https://github.com/spotify/confidence-sdk-js/issues/452)) ([1ce37f3](https://github.com/spotify/confidence-sdk-js/commit/1ce37f3f43c05bfea4a90839a6de42314096bb40))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.10
+
+## [0.17.17](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.16...csr-recorder-v0.17.17) (2026-09-07)
+
+
+### 🐛 Bug Fixes
+
+* stop passive recording frames extending sessions ([#449](https://github.com/spotify/confidence-sdk-js/issues/449)) ([df763a1](https://github.com/spotify/confidence-sdk-js/commit/df763a10d6f16ce5b871530ca3fe8b5c153c16d7))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.9
+
 ## [0.17.16](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.15...csr-recorder-v0.17.16) (2026-08-28)
 
 

package/README.md

@@ -53,7 +53,7 @@ const stop = record(event => {}, {
 });
 ```
 
-The same parameterization is also applied to the `href` in rrweb Meta events.
+The same parameterization is also applied to the `href` in rrweb Meta events. Query strings and fragments are removed from Meta event URLs and the session's document referrer before recording.
 
 ## rrweb version
 

package/dist/index.cjs

@@ -105,7 +105,7 @@ var Recorder = class Recorder {
 		if (typeof document !== "undefined") {
 			this.visibilityHandler = () => {
 				const data = {
-					plugin: "csr:tabVisibility",
+					plugin: _spotify_confidence_csr_common.RecordingPluginName.TabVisibility,
 					payload: { hidden: document.hidden }
 				};
 				this.onEvent({
@@ -127,7 +127,7 @@ var Recorder = class Recorder {
 	}
 	emitNetworkRequest(payload) {
 		const data = {
-			plugin: "csr:networkRequest",
+			plugin: _spotify_confidence_csr_common.RecordingPluginName.NetworkRequest,
 			payload
 		};
 		this.onEvent({
@@ -221,12 +221,13 @@ var Recorder = class Recorder {
 		};
 	}
 	parameterizeHref(href) {
+		const strippedHref = (0, _spotify_confidence_csr_common.stripUrlQueryAndHash)(href);
 		try {
-			const url = new URL(href);
+			const url = new URL(strippedHref);
 			url.pathname = this.parameterizeRoute(url.pathname);
 			return url.toString();
 		} catch (_e) {
-			return this.parameterizeRoute(href);
+			return this.parameterizeRoute(strippedHref);
 		}
 	}
 	emitRouteChange(from, to, trigger) {
@@ -235,7 +236,7 @@ var Recorder = class Recorder {
 		const paramTo = this.parameterizeRoute(to);
 		if (paramFrom === paramTo) return;
 		const data = {
-			plugin: "csr:routeChange",
+			plugin: _spotify_confidence_csr_common.RecordingPluginName.RouteChange,
 			payload: {
 				from: paramFrom,
 				to: paramTo,
@@ -11140,7 +11141,7 @@ function labelBlockedElement(node) {
 */
 function blockedElementLabelsPlugin() {
 	return {
-		name: "csr/blocked-element-labels@1",
+		name: _spotify_confidence_csr_common.RecordingPluginName.BlockedElementLabels,
 		options: {},
 		observer: () => () => {},
 		eventProcessor: (event) => {
@@ -11158,7 +11159,7 @@ function blockedElementLabelsPlugin() {
 function clipboardActionsPlugin() {
 	let getId;
 	return {
-		name: "csr/clipboard@1",
+		name: _spotify_confidence_csr_common.RecordingPluginName.Clipboard,
 		options: {},
 		getMirror: ({ nodeMirror }) => {
 			getId = (node) => nodeMirror.getId(node);
@@ -11190,7 +11191,7 @@ function clipboardActionsPlugin() {
 function clickModifiersPlugin() {
 	let pendingClick = null;
 	return {
-		name: "csr/click-modifiers@1",
+		name: _spotify_confidence_csr_common.RecordingPluginName.ClickModifiers,
 		options: {},
 		observer: (_callback, win) => {
 			const onClick = (event) => {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { RecordingEventType } from "@spotify-confidence/csr-common";
+import { RecordingEventType, RecordingPluginName, stripUrlQueryAndHash } from "@spotify-confidence/csr-common";
 //#region src/types.ts
 const DEFAULT_MASK_SELECTORS = ["[data-csr-mask]"];
 const DEFAULT_BLOCK_SELECTORS = ["[data-csr-block]", "video"];
@@ -104,7 +104,7 @@ var Recorder = class Recorder {
 		if (typeof document !== "undefined") {
 			this.visibilityHandler = () => {
 				const data = {
-					plugin: "csr:tabVisibility",
+					plugin: RecordingPluginName.TabVisibility,
 					payload: { hidden: document.hidden }
 				};
 				this.onEvent({
@@ -126,7 +126,7 @@ var Recorder = class Recorder {
 	}
 	emitNetworkRequest(payload) {
 		const data = {
-			plugin: "csr:networkRequest",
+			plugin: RecordingPluginName.NetworkRequest,
 			payload
 		};
 		this.onEvent({
@@ -220,12 +220,13 @@ var Recorder = class Recorder {
 		};
 	}
 	parameterizeHref(href) {
+		const strippedHref = stripUrlQueryAndHash(href);
 		try {
-			const url = new URL(href);
+			const url = new URL(strippedHref);
 			url.pathname = this.parameterizeRoute(url.pathname);
 			return url.toString();
 		} catch (_e) {
-			return this.parameterizeRoute(href);
+			return this.parameterizeRoute(strippedHref);
 		}
 	}
 	emitRouteChange(from, to, trigger) {
@@ -234,7 +235,7 @@ var Recorder = class Recorder {
 		const paramTo = this.parameterizeRoute(to);
 		if (paramFrom === paramTo) return;
 		const data = {
-			plugin: "csr:routeChange",
+			plugin: RecordingPluginName.RouteChange,
 			payload: {
 				from: paramFrom,
 				to: paramTo,
@@ -11139,7 +11140,7 @@ function labelBlockedElement(node) {
 */
 function blockedElementLabelsPlugin() {
 	return {
-		name: "csr/blocked-element-labels@1",
+		name: RecordingPluginName.BlockedElementLabels,
 		options: {},
 		observer: () => () => {},
 		eventProcessor: (event) => {
@@ -11157,7 +11158,7 @@ function blockedElementLabelsPlugin() {
 function clipboardActionsPlugin() {
 	let getId;
 	return {
-		name: "csr/clipboard@1",
+		name: RecordingPluginName.Clipboard,
 		options: {},
 		getMirror: ({ nodeMirror }) => {
 			getId = (node) => nodeMirror.getId(node);
@@ -11189,7 +11190,7 @@ function clipboardActionsPlugin() {
 function clickModifiersPlugin() {
 	let pendingClick = null;
 	return {
-		name: "csr/click-modifiers@1",
+		name: RecordingPluginName.ClickModifiers,
 		options: {},
 		observer: (_callback, win) => {
 			const onClick = (event) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotify-confidence/csr-recorder",
   "license": "Apache-2.0",
-  "version": "0.17.16",
+  "version": "0.17.18",
   "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.8",
+    "@spotify-confidence/csr-common": "0.18.10",
     "rrweb": "^2.0.1"
   },
   "module": "./dist/index.js",

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

@@ -1,6 +1,7 @@
 // @vitest-environment happy-dom
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { RecordingPluginName } from '@spotify-confidence/csr-common';
 import { RrwebEngine } from './rrweb-engine';
 
 const recordSpy = vi.fn().mockReturnValue(() => {});
@@ -61,7 +62,7 @@ describe('RrwebEngine', () => {
   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',
+      ({ name }: { name: string }) => name === RecordingPluginName.BlockedElementLabels,
     );
     const event = {
       type: 2,
@@ -120,7 +121,9 @@ describe('RrwebEngine', () => {
 
   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 plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === RecordingPluginName.Clipboard,
+    );
     const getId = vi.fn().mockReturnValue(42);
     plugin.getMirror({ nodeMirror: { getId } });
     const callback = vi.fn();
@@ -154,7 +157,7 @@ describe('RrwebEngine', () => {
   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',
+      ({ name }: { name: string }) => name === RecordingPluginName.ClickModifiers,
     );
     const removeObserver = plugin.observer(() => {}, window);
 
@@ -200,7 +203,7 @@ describe('RrwebEngine', () => {
   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',
+      ({ name }: { name: string }) => name === RecordingPluginName.ClickModifiers,
     );
     const removeObserver = plugin.observer(() => {}, window);
     document.dispatchEvent(new MouseEvent('click', { metaKey: true }));

package/src/engine/rrweb-engine.ts

@@ -1,4 +1,4 @@
-import { type ConsoleLogLevel, type RecordingEvent } from '@spotify-confidence/csr-common';
+import { RecordingPluginName, 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, takeFullSnapshot, type recordOptions } from 'rrweb';
@@ -42,7 +42,7 @@ function labelBlockedElement(node: SerializedNode): void {
  */
 function blockedElementLabelsPlugin(): RrwebPlugin {
   return {
-    name: 'csr/blocked-element-labels@1',
+    name: RecordingPluginName.BlockedElementLabels,
     options: {},
     observer: () => () => {},
     eventProcessor: event => {
@@ -68,7 +68,7 @@ function clipboardActionsPlugin(): RrwebPlugin {
   let getId: ((node: Node) => number) | undefined;
 
   return {
-    name: 'csr/clipboard@1',
+    name: RecordingPluginName.Clipboard,
     options: {},
     getMirror: ({ nodeMirror }) => {
       getId = node => nodeMirror.getId(node);
@@ -99,7 +99,7 @@ function clickModifiersPlugin(): RrwebPlugin {
   let pendingClick: ClickModifiers | null = null;
 
   return {
-    name: 'csr/click-modifiers@1',
+    name: RecordingPluginName.ClickModifiers,
     options: {},
     observer: (_callback, win) => {
       const onClick = (event: Event) => {

package/src/recorder-routing.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { RecordingEvent, RecordingEventType, type RouteChangePluginData } from '@spotify-confidence/csr-common';
+import { RecordingEvent, RecordingEventType, RecordingPluginName } from '@spotify-confidence/csr-common';
 import { Recorder } from './recorder';
 import { RecordingEngine } from './engine';
 
@@ -32,10 +32,11 @@ class MockEngine implements RecordingEngine {
 }
 
 function routeChangeEvents(onEvent: ReturnType<typeof vi.fn>) {
-  return (onEvent.mock.calls as [RecordingEvent][])
-    .map(([e]) => e)
-    .filter(e => e.type === RecordingEventType.Plugin && (e.data as RouteChangePluginData).plugin === 'csr:routeChange')
-    .map(e => (e.data as RouteChangePluginData).payload);
+  return onEvent.mock.calls.flatMap(([event]: [RecordingEvent]) =>
+    event.type === RecordingEventType.Plugin && event.data.plugin === RecordingPluginName.RouteChange
+      ? [event.data.payload]
+      : [],
+  );
 }
 
 describe('Recorder route change capture', () => {
@@ -233,21 +234,59 @@ describe('Recorder route change capture', () => {
     recorder.stop();
   });
 
+  it.each([
+    ['https://example.com/users/123?email=alice@example.com#token', 'https://example.com/users/:id'],
+    ['https://example.com/users/123#token?email=alice@example.com', 'https://example.com/users/:id'],
+    ['https://example.com/users/123?email=alice@example.com', 'https://example.com/users/:id'],
+    ['https://example.com/users/123#token', 'https://example.com/users/:id'],
+    ['/users/123?email=alice@example.com#token', '/users/:id'],
+    ['invalid-url?email=alice@example.com#token', 'invalid-url'],
+    ['', ''],
+  ])('strips query/hash from Meta href %s even with route capture disabled', (href, expected) => {
+    const engine = new MockEngine();
+    const event: RecordingEvent = {
+      type: RecordingEventType.Meta,
+      timestamp: 1,
+      data: { href, width: 1920, height: 1080 },
+    };
+    engine.eventsOnStart = [event];
+    const onEvent = vi.fn();
+    const recorder = new Recorder({ engine, onEvent });
+    recorder.start({ captureRouteChanges: false });
+    // Later snapshots must be sanitized too.
+    engine.emit(event);
+
+    expect(onEvent).toHaveBeenCalledTimes(2);
+    for (const [recorded] of onEvent.mock.calls) {
+      expect(recorded).toEqual({ ...event, data: { ...event.data, href: expected } });
+    }
+    expect(event.data).toEqual({ href, width: 1920, height: 1080 });
+
+    recorder.stop();
+  });
+
   it('parameterizes meta href using custom parameterizeRoute', () => {
     const engine = new MockEngine();
     engine.eventsOnStart = [
       {
         type: RecordingEventType.Meta,
         timestamp: 1,
-        data: { href: 'https://example.com/teams/acme-corp/dashboard', width: 1920, height: 1080 },
+        data: {
+          href: 'https://example.com/teams/acme-corp/dashboard?email=alice@example.com#token',
+          width: 1920,
+          height: 1080,
+        },
       },
     ];
     const onEvent = vi.fn();
     const recorder = new Recorder({ engine, onEvent });
+    const parameterizeRoute = vi.fn((route: string) => route.replace(/\/teams\/[^/]+/, '/teams/:slug'));
     recorder.start({
-      parameterizeRoute: route => route.replace(/\/teams\/[^/]+/, '/teams/:slug'),
+      parameterizeRoute,
     });
 
+    expect(parameterizeRoute).toHaveBeenCalledWith('/teams/acme-corp/dashboard');
+
     const metaEvents = (onEvent.mock.calls as [RecordingEvent][])
       .map(([e]) => e)
       .filter(e => e.type === RecordingEventType.Meta);

package/src/recorder.test.ts

@@ -1,9 +1,16 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { RecordingEvent, RecordingEventType, type NetworkRequestPluginData } from '@spotify-confidence/csr-common';
+import { RecordingEvent, RecordingEventType, RecordingPluginName } from '@spotify-confidence/csr-common';
 import { Recorder } from './recorder';
 import { RecordingEngine } from './engine';
 import { RecorderState } from './types';
 
+const networkRequestEvents = (onEvent: ReturnType<typeof vi.fn>) =>
+  onEvent.mock.calls.flatMap(([event]: [RecordingEvent]) =>
+    event.type === RecordingEventType.Plugin && event.data.plugin === RecordingPluginName.NetworkRequest
+      ? [event.data]
+      : [],
+  );
+
 function makeEvent(timestamp: number): RecordingEvent {
   return { type: RecordingEventType.Meta, timestamp, data: {} };
 }
@@ -130,12 +137,10 @@ describe('Recorder network request capture', () => {
 
     await globalThis.fetch('https://api.example.com/data');
 
-    const pluginEvents = onEvent.mock.calls
-      .map(([e]: [RecordingEvent]) => e)
-      .filter(e => e.type === RecordingEventType.Plugin);
-    expect(pluginEvents).toHaveLength(1);
-    const data = pluginEvents[0].data as NetworkRequestPluginData;
-    expect(data.plugin).toBe('csr:networkRequest');
+    const events = networkRequestEvents(onEvent);
+    expect(events).toHaveLength(1);
+    const data = events[0];
+    expect(data.plugin).toBe(RecordingPluginName.NetworkRequest);
     expect(data.payload.initiator).toBe('fetch');
     expect(data.payload.method).toBe('GET');
     expect(data.payload.url).toBe('https://api.example.com/data');
@@ -156,11 +161,9 @@ describe('Recorder network request capture', () => {
 
     await globalThis.fetch('https://api.example.com/data').catch(() => {});
 
-    const pluginEvents = onEvent.mock.calls
-      .map(([e]: [RecordingEvent]) => e)
-      .filter(e => e.type === RecordingEventType.Plugin);
-    expect(pluginEvents).toHaveLength(1);
-    const data = pluginEvents[0].data as NetworkRequestPluginData;
+    const events = networkRequestEvents(onEvent);
+    expect(events).toHaveLength(1);
+    const data = events[0];
     expect(data.payload.status).toBe(0);
 
     recorder.stop();
@@ -177,10 +180,7 @@ describe('Recorder network request capture', () => {
 
     await globalThis.fetch('https://api.example.com/data', { method: 'post' });
 
-    const pluginEvents = onEvent.mock.calls
-      .map(([e]: [RecordingEvent]) => e)
-      .filter(e => e.type === RecordingEventType.Plugin);
-    const data = pluginEvents[0].data as NetworkRequestPluginData;
+    const data = networkRequestEvents(onEvent)[0];
     expect(data.payload.method).toBe('POST');
 
     recorder.stop();
@@ -197,10 +197,7 @@ describe('Recorder network request capture', () => {
 
     await globalThis.fetch(new Request('https://api.example.com/data', { method: 'DELETE' }));
 
-    const pluginEvents = onEvent.mock.calls
-      .map(([e]: [RecordingEvent]) => e)
-      .filter(e => e.type === RecordingEventType.Plugin);
-    const data = pluginEvents[0].data as NetworkRequestPluginData;
+    const data = networkRequestEvents(onEvent)[0];
     expect(data.payload.method).toBe('DELETE');
     expect(data.payload.url).toBe('https://api.example.com/data');
 
@@ -228,7 +225,7 @@ describe('Recorder network request capture', () => {
       }),
     });
 
-    const data = onEvent.mock.calls[0][0].data as NetworkRequestPluginData;
+    const data = networkRequestEvents(onEvent)[0];
     expect(data.payload.graphql).toEqual({ operationName: 'GetUser' });
     expect(JSON.stringify(data.payload)).not.toContain('private-user-id');
 

package/src/recorder.ts

@@ -1,6 +1,8 @@
 import {
   RecordingEvent,
   RecordingEventType,
+  RecordingPluginName,
+  stripUrlQueryAndHash,
   type TabVisibilityPluginData,
   type NetworkRequestPluginData,
   type RouteChangePluginData,
@@ -54,7 +56,7 @@ export class Recorder {
     if (typeof document !== 'undefined') {
       this.visibilityHandler = () => {
         const data: TabVisibilityPluginData = {
-          plugin: 'csr:tabVisibility',
+          plugin: RecordingPluginName.TabVisibility,
           payload: { hidden: document.hidden },
         };
         this.onEvent({
@@ -86,7 +88,7 @@ export class Recorder {
 
   private emitNetworkRequest(payload: NetworkRequestPluginData['payload']): void {
     const data: NetworkRequestPluginData = {
-      plugin: 'csr:networkRequest',
+      plugin: RecordingPluginName.NetworkRequest,
       payload,
     };
     this.onEvent({
@@ -201,12 +203,13 @@ export class Recorder {
   }
 
   private parameterizeHref(href: string): string {
+    const strippedHref = stripUrlQueryAndHash(href);
     try {
-      const url = new URL(href);
+      const url = new URL(strippedHref);
       url.pathname = this.parameterizeRoute(url.pathname);
       return url.toString();
     } catch (_e) {
-      return this.parameterizeRoute(href);
+      return this.parameterizeRoute(strippedHref);
     }
   }
 
@@ -216,7 +219,7 @@ export class Recorder {
     const paramTo = this.parameterizeRoute(to);
     if (paramFrom === paramTo) return;
     const data: RouteChangePluginData = {
-      plugin: 'csr:routeChange',
+      plugin: RecordingPluginName.RouteChange,
       payload: { from: paramFrom, to: paramTo, trigger },
     };
     this.onEvent({