@neroom/nevision 0.1.4 → 0.1.7

package/dist/index.js

@@ -39,6 +39,77 @@ var import_react = require("react");
 var DEFAULT_API_URL = "https://api.ne-room.io";
 var CHUNK_INTERVAL = 1e4;
 var MAX_EVENTS_PER_CHUNK = 100;
+var DB_NAME = "nevision_recordings";
+var STORE_NAME = "pending_events";
+var EventStore = class {
+  constructor() {
+    this.db = null;
+    this.dbReady = this.openDB();
+  }
+  openDB() {
+    return new Promise((resolve, reject) => {
+      if (typeof indexedDB === "undefined") {
+        reject(new Error("IndexedDB not supported"));
+        return;
+      }
+      const request = indexedDB.open(DB_NAME, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(request.result);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+          store.createIndex("sessionId", "sessionId", { unique: false });
+          store.createIndex("timestamp", "timestamp", { unique: false });
+        }
+      };
+    });
+  }
+  async saveChunk(chunk) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.put(chunk);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+  async deleteChunk(id) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.delete(id);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+  async getPendingChunks() {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.getAll();
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result || []);
+    });
+  }
+  async getChunksBySession(sessionId) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const index = store.index("sessionId");
+      const request = index.getAll(sessionId);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result || []);
+    });
+  }
+};
 function NevisionRecorder({
   siteId,
   apiKey,
@@ -52,11 +123,26 @@ function NevisionRecorder({
   const eventsBufferRef = (0, import_react.useRef)([]);
   const stopFnRef = (0, import_react.useRef)(null);
   const chunkIndexRef = (0, import_react.useRef)(0);
+  const eventStoreRef = (0, import_react.useRef)(null);
+  const onStartRef = (0, import_react.useRef)(onStart);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  const samplingRef = (0, import_react.useRef)(sampling);
+  const privacyRef = (0, import_react.useRef)(privacy);
+  onStartRef.current = onStart;
+  onErrorRef.current = onError;
+  samplingRef.current = sampling;
+  privacyRef.current = privacy;
   (0, import_react.useEffect)(() => {
+    let isActive = true;
     let intervalId;
+    let sessionStartTime = 0;
     const init = async () => {
       try {
+        eventStoreRef.current = new EventStore();
+        await retrySendPendingChunks(apiUrl);
+        if (!isActive) return;
         const { record } = await import("rrweb");
+        if (!isActive) return;
         const startResponse = await fetch(`${apiUrl}/public/recordings/start`, {
           method: "POST",
           headers: {
@@ -65,41 +151,47 @@ function NevisionRecorder({
           body: JSON.stringify({
             siteId,
             apiKey,
-            url: window.location.href,
+            initialUrl: window.location.href,
             userAgent: navigator.userAgent,
             screenWidth: window.screen.width,
             screenHeight: window.screen.height,
             viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight
+            viewportHeight: window.innerHeight,
+            referrer: document.referrer || ""
           })
         });
         if (!startResponse.ok) {
           throw new Error(`Failed to start recording: ${startResponse.status}`);
         }
+        if (!isActive) return;
         const { sessionId } = await startResponse.json();
         sessionIdRef.current = sessionId;
-        onStart?.(sessionId);
+        sessionStartTime = Date.now();
+        onStartRef.current?.(sessionId);
+        const currentSampling = samplingRef.current;
+        const currentPrivacy = privacyRef.current;
         const recordConfig = {
           emit: (event) => {
             eventsBufferRef.current.push(event);
+            persistEventsToStorage();
           },
-          sampling: sampling ? {
-            mousemove: sampling.mousemove,
-            mouseInteraction: sampling.mouseInteraction,
-            scroll: sampling.scroll,
-            media: sampling.media,
-            input: sampling.input
+          sampling: currentSampling ? {
+            mousemove: currentSampling.mousemove,
+            mouseInteraction: currentSampling.mouseInteraction,
+            scroll: currentSampling.scroll,
+            media: currentSampling.media,
+            input: currentSampling.input
           } : {
             mousemove: 50,
             scroll: 150
           },
-          maskAllInputs: privacy?.maskAllInputs ?? true,
-          maskInputOptions: privacy?.maskInputOptions ?? {
+          maskAllInputs: currentPrivacy?.maskAllInputs ?? true,
+          maskInputOptions: currentPrivacy?.maskInputOptions ?? {
             password: true,
             email: true
           },
-          maskTextSelector: privacy?.maskTextSelector,
-          blockSelector: privacy?.blockSelector
+          maskTextSelector: currentPrivacy?.maskTextSelector,
+          blockSelector: currentPrivacy?.blockSelector
         };
         const stopFn = record(recordConfig);
         if (stopFn) {
@@ -108,26 +200,100 @@ function NevisionRecorder({
         intervalId = setInterval(() => {
           sendChunk(apiUrl, sessionId);
         }, CHUNK_INTERVAL);
-        const handleUnload = () => {
-          if (sessionIdRef.current && eventsBufferRef.current.length > 0) {
+        let finalSyncDone = false;
+        const handleFinalSync = (isPageHiding = false) => {
+          if (finalSyncDone || !sessionIdRef.current) return;
+          if (eventsBufferRef.current.length > 0) {
             sendChunk(apiUrl, sessionIdRef.current, true);
+          }
+          if (isPageHiding) {
+            finalSyncDone = true;
             endSession(apiUrl, sessionIdRef.current);
           }
         };
-        window.addEventListener("beforeunload", handleUnload);
         document.addEventListener("visibilitychange", () => {
           if (document.visibilityState === "hidden") {
-            handleUnload();
+            handleFinalSync(false);
           }
         });
+        window.addEventListener("beforeunload", () => {
+          handleFinalSync(true);
+        });
+        window.addEventListener("pagehide", (e) => {
+          handleFinalSync(!e.persisted);
+        });
       } catch (error) {
-        onError?.(error instanceof Error ? error : new Error(String(error)));
+        onErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    };
+    let persistTimeout = null;
+    const persistEventsToStorage = () => {
+      if (persistTimeout) return;
+      persistTimeout = setTimeout(async () => {
+        persistTimeout = null;
+        if (!sessionIdRef.current || !eventStoreRef.current) return;
+        if (eventsBufferRef.current.length === 0) return;
+        const events = [...eventsBufferRef.current];
+        const chunkId = `${sessionIdRef.current}_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+        try {
+          await eventStoreRef.current.saveChunk({
+            id: chunkId,
+            sessionId: sessionIdRef.current,
+            siteId,
+            apiKey,
+            events,
+            chunkIndex: chunkIndexRef.current,
+            timestamp: Date.now()
+          });
+        } catch {
+        }
+      }, 1e3);
+    };
+    const retrySendPendingChunks = async (url) => {
+      if (!eventStoreRef.current) return;
+      try {
+        const pendingChunks = await eventStoreRef.current.getPendingChunks();
+        for (const chunk of pendingChunks) {
+          try {
+            const response = await fetch(`${url}/public/recordings/chunk`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                sessionId: chunk.sessionId,
+                siteId: chunk.siteId,
+                apiKey: chunk.apiKey,
+                events: chunk.events,
+                chunkIndex: chunk.chunkIndex
+              })
+            });
+            if (response.ok) {
+              await eventStoreRef.current?.deleteChunk(chunk.id);
+            }
+          } catch {
+          }
+        }
+      } catch {
       }
     };
     const sendChunk = async (url, sessionId, isBeacon = false) => {
       if (eventsBufferRef.current.length === 0) return;
       const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
       const chunkIndex = chunkIndexRef.current++;
+      const chunkId = `${sessionId}_${chunkIndex}_${Date.now()}`;
+      if (eventStoreRef.current) {
+        try {
+          await eventStoreRef.current.saveChunk({
+            id: chunkId,
+            sessionId,
+            siteId,
+            apiKey,
+            events,
+            chunkIndex,
+            timestamp: Date.now()
+          });
+        } catch {
+        }
+      }
       const payload = JSON.stringify({
         sessionId,
         siteId,
@@ -136,41 +302,52 @@ function NevisionRecorder({
         chunkIndex
       });
       if (isBeacon && navigator.sendBeacon) {
-        navigator.sendBeacon(
+        const sent = navigator.sendBeacon(
           `${url}/public/recordings/chunk`,
           new Blob([payload], { type: "application/json" })
         );
+        if (sent && eventStoreRef.current) {
+          eventStoreRef.current.deleteChunk(chunkId).catch(() => {
+          });
+        }
       } else {
         try {
-          await fetch(`${url}/public/recordings/chunk`, {
+          const response = await fetch(`${url}/public/recordings/chunk`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: payload
           });
+          if (response.ok && eventStoreRef.current) {
+            await eventStoreRef.current.deleteChunk(chunkId);
+          }
         } catch {
-          eventsBufferRef.current.unshift(...events);
         }
       }
     };
     const endSession = (url, sessionId) => {
+      const durationMs = sessionStartTime > 0 ? Date.now() - sessionStartTime : 0;
       navigator.sendBeacon?.(
         `${url}/public/recordings/end`,
         new Blob(
-          [JSON.stringify({ sessionId, siteId, apiKey })],
+          [JSON.stringify({ sessionId, durationMs })],
           { type: "application/json" }
         )
       );
     };
     init();
     return () => {
+      isActive = false;
       clearInterval(intervalId);
       stopFnRef.current?.();
       if (sessionIdRef.current) {
         sendChunk(apiUrl, sessionIdRef.current, true);
         endSession(apiUrl, sessionIdRef.current);
       }
+      sessionIdRef.current = null;
+      chunkIndexRef.current = 0;
+      eventsBufferRef.current = [];
     };
-  }, [siteId, apiKey, apiUrl, sampling, privacy, onStart, onError]);
+  }, [siteId, apiKey, apiUrl]);
   return null;
 }
 var index_default = NevisionRecorder;

package/dist/index.mjs

@@ -5,6 +5,77 @@ import { useEffect, useRef } from "react";
 var DEFAULT_API_URL = "https://api.ne-room.io";
 var CHUNK_INTERVAL = 1e4;
 var MAX_EVENTS_PER_CHUNK = 100;
+var DB_NAME = "nevision_recordings";
+var STORE_NAME = "pending_events";
+var EventStore = class {
+  constructor() {
+    this.db = null;
+    this.dbReady = this.openDB();
+  }
+  openDB() {
+    return new Promise((resolve, reject) => {
+      if (typeof indexedDB === "undefined") {
+        reject(new Error("IndexedDB not supported"));
+        return;
+      }
+      const request = indexedDB.open(DB_NAME, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(request.result);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+          store.createIndex("sessionId", "sessionId", { unique: false });
+          store.createIndex("timestamp", "timestamp", { unique: false });
+        }
+      };
+    });
+  }
+  async saveChunk(chunk) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.put(chunk);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+  async deleteChunk(id) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.delete(id);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+  async getPendingChunks() {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.getAll();
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result || []);
+    });
+  }
+  async getChunksBySession(sessionId) {
+    const db = await this.dbReady;
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const index = store.index("sessionId");
+      const request = index.getAll(sessionId);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result || []);
+    });
+  }
+};
 function NevisionRecorder({
   siteId,
   apiKey,
@@ -18,11 +89,26 @@ function NevisionRecorder({
   const eventsBufferRef = useRef([]);
   const stopFnRef = useRef(null);
   const chunkIndexRef = useRef(0);
+  const eventStoreRef = useRef(null);
+  const onStartRef = useRef(onStart);
+  const onErrorRef = useRef(onError);
+  const samplingRef = useRef(sampling);
+  const privacyRef = useRef(privacy);
+  onStartRef.current = onStart;
+  onErrorRef.current = onError;
+  samplingRef.current = sampling;
+  privacyRef.current = privacy;
   useEffect(() => {
+    let isActive = true;
     let intervalId;
+    let sessionStartTime = 0;
     const init = async () => {
       try {
+        eventStoreRef.current = new EventStore();
+        await retrySendPendingChunks(apiUrl);
+        if (!isActive) return;
         const { record } = await import("rrweb");
+        if (!isActive) return;
         const startResponse = await fetch(`${apiUrl}/public/recordings/start`, {
           method: "POST",
           headers: {
@@ -31,41 +117,47 @@ function NevisionRecorder({
           body: JSON.stringify({
             siteId,
             apiKey,
-            url: window.location.href,
+            initialUrl: window.location.href,
             userAgent: navigator.userAgent,
             screenWidth: window.screen.width,
             screenHeight: window.screen.height,
             viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight
+            viewportHeight: window.innerHeight,
+            referrer: document.referrer || ""
           })
         });
         if (!startResponse.ok) {
           throw new Error(`Failed to start recording: ${startResponse.status}`);
         }
+        if (!isActive) return;
         const { sessionId } = await startResponse.json();
         sessionIdRef.current = sessionId;
-        onStart?.(sessionId);
+        sessionStartTime = Date.now();
+        onStartRef.current?.(sessionId);
+        const currentSampling = samplingRef.current;
+        const currentPrivacy = privacyRef.current;
         const recordConfig = {
           emit: (event) => {
             eventsBufferRef.current.push(event);
+            persistEventsToStorage();
           },
-          sampling: sampling ? {
-            mousemove: sampling.mousemove,
-            mouseInteraction: sampling.mouseInteraction,
-            scroll: sampling.scroll,
-            media: sampling.media,
-            input: sampling.input
+          sampling: currentSampling ? {
+            mousemove: currentSampling.mousemove,
+            mouseInteraction: currentSampling.mouseInteraction,
+            scroll: currentSampling.scroll,
+            media: currentSampling.media,
+            input: currentSampling.input
           } : {
             mousemove: 50,
             scroll: 150
           },
-          maskAllInputs: privacy?.maskAllInputs ?? true,
-          maskInputOptions: privacy?.maskInputOptions ?? {
+          maskAllInputs: currentPrivacy?.maskAllInputs ?? true,
+          maskInputOptions: currentPrivacy?.maskInputOptions ?? {
             password: true,
             email: true
           },
-          maskTextSelector: privacy?.maskTextSelector,
-          blockSelector: privacy?.blockSelector
+          maskTextSelector: currentPrivacy?.maskTextSelector,
+          blockSelector: currentPrivacy?.blockSelector
         };
         const stopFn = record(recordConfig);
         if (stopFn) {
@@ -74,26 +166,100 @@ function NevisionRecorder({
         intervalId = setInterval(() => {
           sendChunk(apiUrl, sessionId);
         }, CHUNK_INTERVAL);
-        const handleUnload = () => {
-          if (sessionIdRef.current && eventsBufferRef.current.length > 0) {
+        let finalSyncDone = false;
+        const handleFinalSync = (isPageHiding = false) => {
+          if (finalSyncDone || !sessionIdRef.current) return;
+          if (eventsBufferRef.current.length > 0) {
             sendChunk(apiUrl, sessionIdRef.current, true);
+          }
+          if (isPageHiding) {
+            finalSyncDone = true;
             endSession(apiUrl, sessionIdRef.current);
           }
         };
-        window.addEventListener("beforeunload", handleUnload);
         document.addEventListener("visibilitychange", () => {
           if (document.visibilityState === "hidden") {
-            handleUnload();
+            handleFinalSync(false);
           }
         });
+        window.addEventListener("beforeunload", () => {
+          handleFinalSync(true);
+        });
+        window.addEventListener("pagehide", (e) => {
+          handleFinalSync(!e.persisted);
+        });
       } catch (error) {
-        onError?.(error instanceof Error ? error : new Error(String(error)));
+        onErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    };
+    let persistTimeout = null;
+    const persistEventsToStorage = () => {
+      if (persistTimeout) return;
+      persistTimeout = setTimeout(async () => {
+        persistTimeout = null;
+        if (!sessionIdRef.current || !eventStoreRef.current) return;
+        if (eventsBufferRef.current.length === 0) return;
+        const events = [...eventsBufferRef.current];
+        const chunkId = `${sessionIdRef.current}_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+        try {
+          await eventStoreRef.current.saveChunk({
+            id: chunkId,
+            sessionId: sessionIdRef.current,
+            siteId,
+            apiKey,
+            events,
+            chunkIndex: chunkIndexRef.current,
+            timestamp: Date.now()
+          });
+        } catch {
+        }
+      }, 1e3);
+    };
+    const retrySendPendingChunks = async (url) => {
+      if (!eventStoreRef.current) return;
+      try {
+        const pendingChunks = await eventStoreRef.current.getPendingChunks();
+        for (const chunk of pendingChunks) {
+          try {
+            const response = await fetch(`${url}/public/recordings/chunk`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                sessionId: chunk.sessionId,
+                siteId: chunk.siteId,
+                apiKey: chunk.apiKey,
+                events: chunk.events,
+                chunkIndex: chunk.chunkIndex
+              })
+            });
+            if (response.ok) {
+              await eventStoreRef.current?.deleteChunk(chunk.id);
+            }
+          } catch {
+          }
+        }
+      } catch {
       }
     };
     const sendChunk = async (url, sessionId, isBeacon = false) => {
       if (eventsBufferRef.current.length === 0) return;
       const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
       const chunkIndex = chunkIndexRef.current++;
+      const chunkId = `${sessionId}_${chunkIndex}_${Date.now()}`;
+      if (eventStoreRef.current) {
+        try {
+          await eventStoreRef.current.saveChunk({
+            id: chunkId,
+            sessionId,
+            siteId,
+            apiKey,
+            events,
+            chunkIndex,
+            timestamp: Date.now()
+          });
+        } catch {
+        }
+      }
       const payload = JSON.stringify({
         sessionId,
         siteId,
@@ -102,41 +268,52 @@ function NevisionRecorder({
         chunkIndex
       });
       if (isBeacon && navigator.sendBeacon) {
-        navigator.sendBeacon(
+        const sent = navigator.sendBeacon(
           `${url}/public/recordings/chunk`,
           new Blob([payload], { type: "application/json" })
         );
+        if (sent && eventStoreRef.current) {
+          eventStoreRef.current.deleteChunk(chunkId).catch(() => {
+          });
+        }
       } else {
         try {
-          await fetch(`${url}/public/recordings/chunk`, {
+          const response = await fetch(`${url}/public/recordings/chunk`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: payload
           });
+          if (response.ok && eventStoreRef.current) {
+            await eventStoreRef.current.deleteChunk(chunkId);
+          }
         } catch {
-          eventsBufferRef.current.unshift(...events);
         }
       }
     };
     const endSession = (url, sessionId) => {
+      const durationMs = sessionStartTime > 0 ? Date.now() - sessionStartTime : 0;
       navigator.sendBeacon?.(
         `${url}/public/recordings/end`,
         new Blob(
-          [JSON.stringify({ sessionId, siteId, apiKey })],
+          [JSON.stringify({ sessionId, durationMs })],
           { type: "application/json" }
         )
       );
     };
     init();
     return () => {
+      isActive = false;
       clearInterval(intervalId);
       stopFnRef.current?.();
       if (sessionIdRef.current) {
         sendChunk(apiUrl, sessionIdRef.current, true);
         endSession(apiUrl, sessionIdRef.current);
       }
+      sessionIdRef.current = null;
+      chunkIndexRef.current = 0;
+      eventsBufferRef.current = [];
     };
-  }, [siteId, apiKey, apiUrl, sampling, privacy, onStart, onError]);
+  }, [siteId, apiKey, apiUrl]);
   return null;
 }
 var index_default = NevisionRecorder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neroom/nevision",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "React SDK for NEROOM/NEVISION session recording",
   "main": "dist/index.js",
   "module": "dist/index.mjs",