@cedarai/session-replay-sdk 0.2.0 → 0.4.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,6 +298,7 @@ var ErrorCapture = class {
 
 // src/network.ts
 var nextId = 0;
+var RESPONSE_BODY_MAX_SIZE = 100 * 1024;
 var NetworkCapture = class {
   onEvent;
   serverUrl;
@@ -330,10 +335,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",
@@ -385,6 +396,16 @@ var NetworkCapture = class {
 
 // 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 +419,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 +432,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;
   }
@@ -422,6 +444,91 @@ var RecorderCapture = class {
   }
 };
 
+// src/performance.ts
+import { onLCP, onCLS, onINP } from "web-vitals";
+var MEMORY_INTERVAL_MS = 3e4;
+var PerformanceCapture = class {
+  onEvent;
+  started = false;
+  longTaskObserver = null;
+  memoryTimer = null;
+  constructor(onEvent2) {
+    this.onEvent = onEvent2;
+  }
+  start() {
+    if (this.started) return;
+    this.started = true;
+    this.startWebVitals();
+    this.startLongTaskObserver();
+    this.startMemorySnapshots();
+  }
+  stop() {
+    if (!this.started) return;
+    this.started = false;
+    this.longTaskObserver?.disconnect();
+    this.longTaskObserver = null;
+    if (this.memoryTimer) {
+      clearInterval(this.memoryTimer);
+      this.memoryTimer = null;
+    }
+  }
+  emit(data) {
+    if (!this.started) return;
+    this.onEvent({
+      type: "performance",
+      timestamp: Date.now(),
+      data
+    });
+  }
+  startWebVitals() {
+    const handler = (metric) => {
+      this.emit({
+        metric: "web-vital",
+        name: metric.name,
+        value: metric.value,
+        rating: metric.rating
+      });
+    };
+    onLCP(handler);
+    onCLS(handler, { reportAllChanges: true });
+    onINP(handler, { reportAllChanges: true });
+  }
+  startLongTaskObserver() {
+    if (typeof globalThis.PerformanceObserver === "undefined") return;
+    try {
+      this.longTaskObserver = new globalThis.PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          const attribution = entry.attribution?.[0]?.containerSrc;
+          this.emit({
+            metric: "long-task",
+            duration: entry.duration,
+            attribution
+          });
+        }
+      });
+      this.longTaskObserver.observe({ entryTypes: ["longtask"] });
+    } catch {
+    }
+  }
+  startMemorySnapshots() {
+    const memory = performance.memory;
+    if (!memory) return;
+    this.emitMemory(memory);
+    this.memoryTimer = setInterval(() => {
+      const mem = performance.memory;
+      if (mem) this.emitMemory(mem);
+    }, MEMORY_INTERVAL_MS);
+  }
+  emitMemory(memory) {
+    this.emit({
+      metric: "memory",
+      usedJSHeapSize: memory.usedJSHeapSize,
+      totalJSHeapSize: memory.totalJSHeapSize,
+      jsHeapSizeLimit: memory.jsHeapSizeLimit
+    });
+  }
+};
+
 // src/index.ts
 var config = null;
 var transport = null;
@@ -429,6 +536,7 @@ var consoleCapture = null;
 var errorCapture = null;
 var networkCapture = null;
 var recorderCapture = null;
+var performanceCapture = null;
 var unloadHandler = null;
 function onEvent(event) {
   transport?.enqueue(event);
@@ -458,6 +566,8 @@ var CedarReplay = {
     networkCapture.start();
     recorderCapture = new RecorderCapture(onEvent, config.recorder);
     recorderCapture.start();
+    performanceCapture = new PerformanceCapture(onEvent);
+    performanceCapture.start();
     unloadHandler = () => transport?.flushOnUnload();
     window.addEventListener("beforeunload", unloadHandler);
   },
@@ -466,6 +576,8 @@ var CedarReplay = {
       window.removeEventListener("beforeunload", unloadHandler);
       unloadHandler = null;
     }
+    performanceCapture?.stop();
+    performanceCapture = null;
     recorderCapture?.stop();
     recorderCapture = null;
     networkCapture?.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarai/session-replay-sdk",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "rrweb": "^2.0.0-alpha.4"
+    "rrweb": "^2.0.0-alpha.4",
+    "web-vitals": "^4.2.4"
   },
   "devDependencies": {
     "@vitest/browser": "^4.0.18",