@cedarai/session-replay-sdk 0.3.0 → 0.5.0

package/dist/index.js

@@ -24,6 +24,7 @@ function isCompressionSupported() {
 
 // src/transport.ts
 var BEACON_MAX_SIZE = 64 * 1024;
+var MAX_QUEUE_LENGTH = 1e3;
 var Transport = class {
   config;
   queue = [];
@@ -65,6 +66,9 @@ var Transport = class {
   enqueue(event) {
     if (!this.started) return;
     this.queue.push(event);
+    if (this.queue.length > MAX_QUEUE_LENGTH) {
+      this.queue.splice(0, this.queue.length - MAX_QUEUE_LENGTH);
+    }
     const maxSize = this.config.batchMaxSize ?? 1024 * 512;
     const estimatedSize = this.estimateQueueSize();
     if (estimatedSize >= maxSize) {
@@ -294,10 +298,37 @@ var ErrorCapture = class {
 
 // src/network.ts
 var nextId = 0;
+var RESPONSE_BODY_MAX_SIZE = 100 * 1024;
+function extractHeaders(headers) {
+  if (!headers) return void 0;
+  const result = {};
+  if (headers instanceof Headers) {
+    headers.forEach((v, k) => {
+      result[k] = v;
+    });
+  } else if (Array.isArray(headers)) {
+    for (const [k, v] of headers) {
+      result[k] = v;
+    }
+  } else {
+    Object.assign(result, headers);
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
+function headersToRecord(headers) {
+  const result = {};
+  headers.forEach((v, k) => {
+    result[k] = v;
+  });
+  return Object.keys(result).length > 0 ? result : void 0;
+}
 var NetworkCapture = class {
   onEvent;
   serverUrl;
   originalFetch = null;
+  originalXHROpen = null;
+  originalXHRSend = null;
+  originalXHRSetHeader = null;
   started = false;
   constructor(onEvent2, serverUrl) {
     this.onEvent = onEvent2;
@@ -306,6 +337,31 @@ var NetworkCapture = class {
   start() {
     if (this.started) return;
     this.started = true;
+    this.interceptFetch();
+    this.interceptXHR();
+  }
+  stop() {
+    if (!this.started) return;
+    this.started = false;
+    if (this.originalFetch) {
+      globalThis.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+    if (this.originalXHROpen) {
+      XMLHttpRequest.prototype.open = this.originalXHROpen;
+      this.originalXHROpen = null;
+    }
+    if (this.originalXHRSend) {
+      XMLHttpRequest.prototype.send = this.originalXHRSend;
+      this.originalXHRSend = null;
+    }
+    if (this.originalXHRSetHeader) {
+      XMLHttpRequest.prototype.setRequestHeader = this.originalXHRSetHeader;
+      this.originalXHRSetHeader = null;
+    }
+  }
+  // ── Fetch interception ────────────────────────────────────────
+  interceptFetch() {
     this.originalFetch = globalThis.fetch;
     globalThis.fetch = async (input, init) => {
       const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
@@ -314,6 +370,7 @@ var NetworkCapture = class {
       }
       const method = init?.method?.toUpperCase() ?? "GET";
       const requestBody = init?.body ? String(init.body) : void 0;
+      const requestHeaders = extractHeaders(init?.headers);
       const startTime = performance.now();
       const id = String(++nextId);
       let graphqlOperationName;
@@ -330,10 +387,16 @@ var NetworkCapture = class {
         const response = await this.originalFetch(input, init);
         const endTime = performance.now();
         let responseBody;
-        try {
-          const cloned = response.clone();
-          responseBody = await cloned.text();
-        } catch {
+        const contentLength = parseInt(response.headers.get("content-length") ?? "0", 10);
+        if (contentLength === 0 || contentLength <= RESPONSE_BODY_MAX_SIZE) {
+          try {
+            const cloned = response.clone();
+            const text = await cloned.text();
+            if (text.length <= RESPONSE_BODY_MAX_SIZE) {
+              responseBody = text;
+            }
+          } catch {
+          }
         }
         this.onEvent({
           type: "network",
@@ -343,8 +406,10 @@ var NetworkCapture = class {
             method,
             url,
             graphqlOperationName,
+            requestHeaders,
             requestBody,
             status: response.status,
+            responseHeaders: headersToRecord(response.headers),
             responseBody,
             startTime,
             endTime,
@@ -362,6 +427,7 @@ var NetworkCapture = class {
             method,
             url,
             graphqlOperationName,
+            requestHeaders,
             requestBody,
             startTime,
             endTime,
@@ -373,18 +439,87 @@ var NetworkCapture = class {
       }
     };
   }
-  stop() {
-    if (!this.started) return;
-    this.started = false;
-    if (this.originalFetch) {
-      globalThis.fetch = this.originalFetch;
-      this.originalFetch = null;
-    }
+  // ── XMLHttpRequest interception ───────────────────────────────
+  interceptXHR() {
+    const self = this;
+    const xhrData = /* @__PURE__ */ new WeakMap();
+    this.originalXHROpen = XMLHttpRequest.prototype.open;
+    this.originalXHRSend = XMLHttpRequest.prototype.send;
+    this.originalXHRSetHeader = XMLHttpRequest.prototype.setRequestHeader;
+    XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+      const urlStr = typeof url === "string" ? url : url.href;
+      xhrData.set(this, { method: method.toUpperCase(), url: urlStr, headers: {}, startTime: 0 });
+      return self.originalXHROpen.apply(this, [method, url, ...rest]);
+    };
+    XMLHttpRequest.prototype.setRequestHeader = function(name, value) {
+      const data = xhrData.get(this);
+      if (data) data.headers[name] = value;
+      return self.originalXHRSetHeader.apply(this, [name, value]);
+    };
+    XMLHttpRequest.prototype.send = function(body) {
+      const data = xhrData.get(this);
+      if (data && data.url.startsWith(self.serverUrl)) {
+        return self.originalXHRSend.apply(this, [body]);
+      }
+      if (data) {
+        data.startTime = performance.now();
+      }
+      const requestBody = body != null ? String(body) : void 0;
+      this.addEventListener("loadend", function() {
+        if (!data) return;
+        const endTime = performance.now();
+        const rawHeaders = this.getAllResponseHeaders();
+        const responseHeaders = {};
+        if (rawHeaders) {
+          rawHeaders.trim().split(/[\r\n]+/).forEach((line) => {
+            const idx = line.indexOf(": ");
+            if (idx > 0) responseHeaders[line.substring(0, idx)] = line.substring(idx + 2);
+          });
+        }
+        let responseBody;
+        if (this.responseType === "" || this.responseType === "text") {
+          try {
+            const text = this.responseText;
+            if (text.length <= RESPONSE_BODY_MAX_SIZE) responseBody = text;
+          } catch {
+          }
+        }
+        self.onEvent({
+          type: "network",
+          timestamp: Date.now(),
+          data: {
+            id: String(++nextId),
+            method: data.method,
+            url: data.url,
+            requestHeaders: Object.keys(data.headers).length > 0 ? data.headers : void 0,
+            requestBody,
+            status: this.status,
+            responseHeaders: Object.keys(responseHeaders).length > 0 ? responseHeaders : void 0,
+            responseBody,
+            startTime: data.startTime,
+            endTime,
+            duration: endTime - data.startTime,
+            error: this.status === 0 ? "Network error" : void 0
+          }
+        });
+      });
+      return self.originalXHRSend.apply(this, [body]);
+    };
   }
 };
 
 // src/recorder.ts
 import { record } from "rrweb";
+var DEFAULT_SAMPLING = {
+  mousemove: 50,
+  // throttle mousemove to one event per 50ms (default is every frame)
+  mouseInteraction: true,
+  // keep mouse clicks/interactions
+  scroll: 150,
+  // throttle scroll to one event per 150ms
+  input: "last"
+  // only capture the final input value, not every keystroke
+};
 var RecorderCapture = class {
   onEvent;
   config;
@@ -398,6 +533,7 @@ var RecorderCapture = class {
     if (this.started) return;
     this.started = true;
     const { checkoutEveryNms, blockSelector, maskAllInputs, inlineStylesheet, sampling } = this.config;
+    const mergedSampling = { ...DEFAULT_SAMPLING, ...sampling };
     const result = record({
       emit: (event) => {
         if (!this.started) return;
@@ -410,7 +546,7 @@ var RecorderCapture = class {
       ...blockSelector !== void 0 && { blockSelector },
       ...maskAllInputs !== void 0 && { maskAllInputs },
       ...inlineStylesheet !== void 0 && { inlineStylesheet },
-      ...sampling !== void 0 && { sampling }
+      sampling: mergedSampling
     });
     this.stopFn = result ?? null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarai/session-replay-sdk",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",