@spotify-confidence/csr-recorder 0.17.11 → 0.17.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.17.12](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.11...csr-recorder-v0.17.12) (2026-08-18)
+
+
+### ✨ New Features
+
+* **csr-recorder:** capture GraphQL operation names ([#434](https://github.com/spotify/confidence-sdk-js/issues/434)) ([c4610ef](https://github.com/spotify/confidence-sdk-js/commit/c4610ef2945cecf632a3027b58ec373bc8b562e7))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.6
+
 ## [0.17.11](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.10...csr-recorder-v0.17.11) (2026-08-12)
 
 

package/dist/index.cjs

@@ -37,6 +37,33 @@ function defaultParameterizeRoute(route) {
 	}).join("/");
 }
 //#endregion
+//#region src/graphql-request.ts
+function operationNameFromDocument(document) {
+	return document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/)?.[1];
+}
+function operationNameFromBody(body) {
+	if (typeof body !== "string") return void 0;
+	try {
+		const request = JSON.parse(body);
+		if (typeof request.operationName === "string" && request.operationName) return request.operationName;
+		return typeof request.query === "string" ? operationNameFromDocument(request.query) : void 0;
+	} catch (_error) {
+		return operationNameFromDocument(body);
+	}
+}
+function isGraphQLRequestUrl(url) {
+	try {
+		return new URL(url, globalThis.location?.href).pathname.endsWith("/graphql");
+	} catch (_error) {
+		return url.split(/[?#]/, 1)[0].endsWith("/graphql");
+	}
+}
+function extractGraphQLRequestMetadata(url, body) {
+	if (!isGraphQLRequestUrl(url)) return void 0;
+	const operationName = operationNameFromBody(body);
+	return operationName ? { operationName } : void 0;
+}
+//#endregion
 //#region src/recorder.ts
 var Recorder = class Recorder {
 	engine;
@@ -118,6 +145,7 @@ var Recorder = class Recorder {
 			else if (input instanceof URL) url = input.href;
 			else url = String(input);
 			const requestSize = init?.body ? new Blob([init.body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, init?.body);
 			const start = Date.now();
 			return originalFetch.call(globalThis, input, init).then((response) => {
 				const contentLength = response.headers.get("content-length");
@@ -128,7 +156,8 @@ var Recorder = class Recorder {
 					status: response.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 				return response;
 			}, (error) => {
@@ -138,7 +167,8 @@ var Recorder = class Recorder {
 					url,
 					status: 0,
 					durationMs: Date.now() - start,
-					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {}
+					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
+					...graphql ? { graphql } : {}
 				});
 				throw error;
 			});
@@ -165,6 +195,7 @@ var Recorder = class Recorder {
 			const method = meta.__csr_method ?? "GET";
 			const url = meta.__csr_url ?? "";
 			const requestSize = body !== null && body !== void 0 ? new Blob([body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, body);
 			const start = Date.now();
 			this.addEventListener("loadend", function csrLoadend() {
 				const contentLength = this.getResponseHeader("content-length");
@@ -175,7 +206,8 @@ var Recorder = class Recorder {
 					status: this.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 			});
 			return originalSend.call(this, body);

package/dist/index.js

@@ -36,6 +36,33 @@ function defaultParameterizeRoute(route) {
 	}).join("/");
 }
 //#endregion
+//#region src/graphql-request.ts
+function operationNameFromDocument(document) {
+	return document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/)?.[1];
+}
+function operationNameFromBody(body) {
+	if (typeof body !== "string") return void 0;
+	try {
+		const request = JSON.parse(body);
+		if (typeof request.operationName === "string" && request.operationName) return request.operationName;
+		return typeof request.query === "string" ? operationNameFromDocument(request.query) : void 0;
+	} catch (_error) {
+		return operationNameFromDocument(body);
+	}
+}
+function isGraphQLRequestUrl(url) {
+	try {
+		return new URL(url, globalThis.location?.href).pathname.endsWith("/graphql");
+	} catch (_error) {
+		return url.split(/[?#]/, 1)[0].endsWith("/graphql");
+	}
+}
+function extractGraphQLRequestMetadata(url, body) {
+	if (!isGraphQLRequestUrl(url)) return void 0;
+	const operationName = operationNameFromBody(body);
+	return operationName ? { operationName } : void 0;
+}
+//#endregion
 //#region src/recorder.ts
 var Recorder = class Recorder {
 	engine;
@@ -117,6 +144,7 @@ var Recorder = class Recorder {
 			else if (input instanceof URL) url = input.href;
 			else url = String(input);
 			const requestSize = init?.body ? new Blob([init.body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, init?.body);
 			const start = Date.now();
 			return originalFetch.call(globalThis, input, init).then((response) => {
 				const contentLength = response.headers.get("content-length");
@@ -127,7 +155,8 @@ var Recorder = class Recorder {
 					status: response.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 				return response;
 			}, (error) => {
@@ -137,7 +166,8 @@ var Recorder = class Recorder {
 					url,
 					status: 0,
 					durationMs: Date.now() - start,
-					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {}
+					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
+					...graphql ? { graphql } : {}
 				});
 				throw error;
 			});
@@ -164,6 +194,7 @@ var Recorder = class Recorder {
 			const method = meta.__csr_method ?? "GET";
 			const url = meta.__csr_url ?? "";
 			const requestSize = body !== null && body !== void 0 ? new Blob([body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, body);
 			const start = Date.now();
 			this.addEventListener("loadend", function csrLoadend() {
 				const contentLength = this.getResponseHeader("content-length");
@@ -174,7 +205,8 @@ var Recorder = class Recorder {
 					status: this.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 			});
 			return originalSend.call(this, body);

package/package.json

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

package/src/graphql-request.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { extractGraphQLRequestMetadata } from './graphql-request';
+
+describe('extractGraphQLRequestMetadata', () => {
+  it('uses the explicit operation name', () => {
+    const body = JSON.stringify({
+      operationName: 'UpdateProfile',
+      query: 'mutation UpdateProfile($input: ProfileInput!) { updateProfile(input: $input) { id } }',
+      variables: { input: { displayName: 'Private value' } },
+    });
+
+    expect(extractGraphQLRequestMetadata('/graphql', body)).toEqual({ operationName: 'UpdateProfile' });
+  });
+
+  it('gets the operation name from the document when it is not explicit', () => {
+    const body = JSON.stringify({ query: 'query Viewer { viewer { id email } }' });
+
+    expect(extractGraphQLRequestMetadata('/graphql', body)).toEqual({ operationName: 'Viewer' });
+  });
+
+  it('does not record anonymous query fields', () => {
+    expect(extractGraphQLRequestMetadata('/graphql', '{ viewer { id email } }')).toBeUndefined();
+  });
+
+  it('ignores requests to other paths', () => {
+    expect(extractGraphQLRequestMetadata('/api/query', 'query Viewer { viewer { id } }')).toBeUndefined();
+  });
+});

package/src/graphql-request.ts

@@ -0,0 +1,32 @@
+import type { GraphQLRequestMetadata } from '@spotify-confidence/csr-common';
+
+function operationNameFromDocument(document: string): string | undefined {
+  const match = document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/);
+  return match?.[1];
+}
+
+function operationNameFromBody(body: unknown): string | undefined {
+  if (typeof body !== 'string') return undefined;
+  try {
+    const request = JSON.parse(body) as { operationName?: unknown; query?: unknown };
+    if (typeof request.operationName === 'string' && request.operationName) return request.operationName;
+    return typeof request.query === 'string' ? operationNameFromDocument(request.query) : undefined;
+  } catch (_error) {
+    return operationNameFromDocument(body);
+  }
+}
+
+function isGraphQLRequestUrl(url: string): boolean {
+  try {
+    return new URL(url, globalThis.location?.href).pathname.endsWith('/graphql');
+  } catch (_error) {
+    return url.split(/[?#]/, 1)[0].endsWith('/graphql');
+  }
+}
+
+export function extractGraphQLRequestMetadata(url: string, body: unknown): GraphQLRequestMetadata | undefined {
+  if (!isGraphQLRequestUrl(url)) return undefined;
+
+  const operationName = operationNameFromBody(body);
+  return operationName ? { operationName } : undefined;
+}

package/src/recorder.test.ts

@@ -204,4 +204,32 @@ describe('Recorder network request capture', () => {
 
     recorder.stop();
   });
+
+  it('captures only the GraphQL operation name', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue(new Response('{}', { status: 500 }));
+
+    const engine = new MockEngine();
+    const onEvent = vi.fn();
+    const recorder = new Recorder({ engine, onEvent });
+    recorder.start({ captureNetworkRequests: true });
+
+    await globalThis.fetch('https://api.example.com/graphql', {
+      method: 'POST',
+      body: JSON.stringify({
+        operationName: 'GetUser',
+        query: `query GetUser($id: ID!) {
+          viewer { id }
+          selectedUser: user(id: $id) { ...UserDetails }
+        }
+        fragment UserDetails on User { name email }`,
+        variables: { id: 'private-user-id' },
+      }),
+    });
+
+    const data = onEvent.mock.calls[0][0].data as NetworkRequestPluginData;
+    expect(data.payload.graphql).toEqual({ operationName: 'GetUser' });
+    expect(JSON.stringify(data.payload)).not.toContain('private-user-id');
+
+    recorder.stop();
+  });
 });

package/src/recorder.ts

@@ -9,6 +9,7 @@ import {
 import { RecorderOptions, RecorderState, RecordingConfig } from './types';
 import { RecordingEngine } from './engine';
 import { defaultParameterizeRoute } from './route-parameterizer';
+import { extractGraphQLRequestMetadata } from './graphql-request';
 
 export class Recorder {
   private readonly engine: RecordingEngine;
@@ -107,6 +108,7 @@ export class Recorder {
         url = String(input);
       }
       const requestSize = init?.body ? new Blob([init.body as BlobPart]).size : undefined;
+      const graphql = extractGraphQLRequestMetadata(url, init?.body);
       const start = Date.now();
 
       return originalFetch.call(globalThis, input, init).then(
@@ -120,6 +122,7 @@ export class Recorder {
             durationMs: Date.now() - start,
             ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
             ...(contentLength ? { responseSize: Number(contentLength) } : {}),
+            ...(graphql ? { graphql } : {}),
           });
           return response;
         },
@@ -131,6 +134,7 @@ export class Recorder {
             status: 0,
             durationMs: Date.now() - start,
             ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
+            ...(graphql ? { graphql } : {}),
           });
           throw error;
         },
@@ -165,6 +169,7 @@ export class Recorder {
       const method = (meta.__csr_method as string) ?? 'GET';
       const url = (meta.__csr_url as string) ?? '';
       const requestSize = body !== null && body !== undefined ? new Blob([body as BlobPart]).size : undefined;
+      const graphql = extractGraphQLRequestMetadata(url, body);
       const start = Date.now();
 
       this.addEventListener('loadend', function csrLoadend(this: XMLHttpRequest) {
@@ -177,6 +182,7 @@ export class Recorder {
           durationMs: Date.now() - start,
           ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
           ...(contentLength ? { responseSize: Number(contentLength) } : {}),
+          ...(graphql ? { graphql } : {}),
         });
       });