@monoscopetech/browser 0.5.8 → 0.6.0

package/dist/replay.js

@@ -1,8 +1,8 @@
 import { getRecordConsolePlugin } from "@rrweb/rrweb-plugin-console-record";
 import * as rrweb from "rrweb";
 const MAX_EVENT_BATCH = 50;
-const SAVE_INTERVAL = 10000;
-const MAX_RETRY_EVENTS = 1000;
+const SAVE_INTERVAL = 2000;
+const MAX_RETRY_EVENTS = 5000;
 export class MonoscopeReplay {
     constructor(config, sessionId) {
         this.events = [];
@@ -106,13 +106,20 @@ export class MonoscopeReplay {
             return;
         }
         if (this.events.length > MAX_RETRY_EVENTS) {
-            console.warn(`Event queue exceeded ${MAX_RETRY_EVENTS}, dropping oldest events`);
-            this.events = this.events.slice(-MAX_RETRY_EVENTS);
+            console.warn(`Event queue exceeded ${MAX_RETRY_EVENTS}, dropping middle events (preserving snapshots)`);
+            // Find full snapshot events (type 2) - these are critical for replay
+            const fullSnapshots = this.events.filter((e) => e.type === 2);
+            const otherEvents = this.events.filter((e) => e.type !== 2);
+            // Keep all snapshots and the most recent other events
+            const remainingSlots = MAX_RETRY_EVENTS - fullSnapshots.length;
+            this.events = [...fullSnapshots, ...otherEvents.slice(-remainingSlots)];
+            // Re-sort by timestamp to maintain order
+            this.events.sort((a, b) => a.timestamp - b.timestamp);
         }
         this.isSaving = true;
         const { replayEventsBaseUrl, projectId } = this.config;
         // Construct base URL
-        let baseUrl = replayEventsBaseUrl || "https://app.apitoolkit.io";
+        let baseUrl = replayEventsBaseUrl || "https://app.monoscope.tech";
         baseUrl = `${baseUrl}/rrweb/${projectId}`;
         // Get events to send and clear buffer
         const eventsToSend = [...this.events];
@@ -134,27 +141,33 @@ export class MonoscopeReplay {
                 }
             }
             else {
-                // Regular fetch with keepalive
+                // Use keepalive so the request survives page navigation,
+                // but only when payload fits under the 64KB keepalive limit
+                const body = JSON.stringify(payload);
                 const response = await fetch(baseUrl, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
                     },
-                    body: JSON.stringify(payload),
+                    body,
+                    keepalive: body.length < 63000,
                 });
                 if (!response.ok) {
-                    console.log(response);
                     throw new Error(`Failed to save replay events: ${response.status} ${response.statusText}`);
                 }
                 console.log(`Successfully saved ${eventsToSend.length} replay events`);
             }
         }
         catch (error) {
-            console.log(error);
             console.error("Failed to save replay events:", error);
             this.events = [...eventsToSend, ...this.events];
             if (this.events.length > MAX_RETRY_EVENTS) {
-                this.events = this.events.slice(-MAX_RETRY_EVENTS);
+                // Preserve full snapshots when trimming
+                const fullSnapshots = this.events.filter((e) => e.type === 2);
+                const otherEvents = this.events.filter((e) => e.type !== 2);
+                const remainingSlots = MAX_RETRY_EVENTS - fullSnapshots.length;
+                this.events = [...fullSnapshots, ...otherEvents.slice(-remainingSlots)];
+                this.events.sort((a, b) => a.timestamp - b.timestamp);
             }
         }
         finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoscopetech/browser",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",