@neroom/nevision 0.1.6 → 0.1.8

package/dist/index.js

@@ -37,7 +37,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var DEFAULT_API_URL = "https://api.ne-room.io";
-var CHUNK_INTERVAL = 1e4;
+var CHUNK_INTERVAL = 2e3;
 var MAX_EVENTS_PER_CHUNK = 100;
 var DB_NAME = "nevision_recordings";
 var STORE_NAME = "pending_events";
@@ -124,7 +124,6 @@ function NevisionRecorder({
   const stopFnRef = (0, import_react.useRef)(null);
   const chunkIndexRef = (0, import_react.useRef)(0);
   const eventStoreRef = (0, import_react.useRef)(null);
-  const initializedRef = (0, import_react.useRef)(false);
   const onStartRef = (0, import_react.useRef)(onStart);
   const onErrorRef = (0, import_react.useRef)(onError);
   const samplingRef = (0, import_react.useRef)(sampling);
@@ -134,16 +133,16 @@ function NevisionRecorder({
   samplingRef.current = sampling;
   privacyRef.current = privacy;
   (0, import_react.useEffect)(() => {
-    if (initializedRef.current) {
-      return;
-    }
-    initializedRef.current = true;
+    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: {
@@ -164,15 +163,16 @@ function NevisionRecorder({
         if (!startResponse.ok) {
           throw new Error(`Failed to start recording: ${startResponse.status}`);
         }
+        if (!isActive) return;
         const { sessionId } = await startResponse.json();
         sessionIdRef.current = 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: currentSampling ? {
             mousemove: currentSampling.mousemove,
@@ -210,44 +210,30 @@ function NevisionRecorder({
             endSession(apiUrl, sessionIdRef.current);
           }
         };
-        document.addEventListener("visibilitychange", () => {
+        const handleVisibilityChange = () => {
           if (document.visibilityState === "hidden") {
             handleFinalSync(false);
           }
-        });
-        window.addEventListener("beforeunload", () => {
+        };
+        const handleBeforeUnload = () => {
           handleFinalSync(true);
-        });
-        window.addEventListener("pagehide", (e) => {
+        };
+        const handlePageHide = (e) => {
           handleFinalSync(!e.persisted);
-        });
+        };
+        const handleWindowBlur = () => {
+          if (eventsBufferRef.current.length > 0 && sessionIdRef.current) {
+            sendChunk(apiUrl, sessionIdRef.current, true);
+          }
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        window.addEventListener("pagehide", handlePageHide);
+        window.addEventListener("blur", handleWindowBlur);
       } catch (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 {
@@ -276,23 +262,8 @@ function NevisionRecorder({
     };
     const sendChunk = async (url, sessionId, isBeacon = false) => {
       if (eventsBufferRef.current.length === 0) return;
-      const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
+      const events = isBeacon ? eventsBufferRef.current.splice(0) : 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,
@@ -301,15 +272,26 @@ function NevisionRecorder({
         chunkIndex
       });
       if (isBeacon && navigator.sendBeacon) {
-        const sent = navigator.sendBeacon(
+        navigator.sendBeacon(
           `${url}/public/recordings/chunk`,
           new Blob([payload], { type: "application/json" })
         );
-        if (sent && eventStoreRef.current) {
-          eventStoreRef.current.deleteChunk(chunkId).catch(() => {
-          });
-        }
       } else {
+        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 {
+          }
+        }
         try {
           const response = await fetch(`${url}/public/recordings/chunk`, {
             method: "POST",
@@ -324,22 +306,23 @@ function NevisionRecorder({
       }
     };
     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]);
   return null;

package/dist/index.mjs

@@ -3,7 +3,7 @@
 // src/index.tsx
 import { useEffect, useRef } from "react";
 var DEFAULT_API_URL = "https://api.ne-room.io";
-var CHUNK_INTERVAL = 1e4;
+var CHUNK_INTERVAL = 2e3;
 var MAX_EVENTS_PER_CHUNK = 100;
 var DB_NAME = "nevision_recordings";
 var STORE_NAME = "pending_events";
@@ -90,7 +90,6 @@ function NevisionRecorder({
   const stopFnRef = useRef(null);
   const chunkIndexRef = useRef(0);
   const eventStoreRef = useRef(null);
-  const initializedRef = useRef(false);
   const onStartRef = useRef(onStart);
   const onErrorRef = useRef(onError);
   const samplingRef = useRef(sampling);
@@ -100,16 +99,16 @@ function NevisionRecorder({
   samplingRef.current = sampling;
   privacyRef.current = privacy;
   useEffect(() => {
-    if (initializedRef.current) {
-      return;
-    }
-    initializedRef.current = true;
+    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: {
@@ -130,15 +129,16 @@ function NevisionRecorder({
         if (!startResponse.ok) {
           throw new Error(`Failed to start recording: ${startResponse.status}`);
         }
+        if (!isActive) return;
         const { sessionId } = await startResponse.json();
         sessionIdRef.current = 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: currentSampling ? {
             mousemove: currentSampling.mousemove,
@@ -176,44 +176,30 @@ function NevisionRecorder({
             endSession(apiUrl, sessionIdRef.current);
           }
         };
-        document.addEventListener("visibilitychange", () => {
+        const handleVisibilityChange = () => {
           if (document.visibilityState === "hidden") {
             handleFinalSync(false);
           }
-        });
-        window.addEventListener("beforeunload", () => {
+        };
+        const handleBeforeUnload = () => {
           handleFinalSync(true);
-        });
-        window.addEventListener("pagehide", (e) => {
+        };
+        const handlePageHide = (e) => {
           handleFinalSync(!e.persisted);
-        });
+        };
+        const handleWindowBlur = () => {
+          if (eventsBufferRef.current.length > 0 && sessionIdRef.current) {
+            sendChunk(apiUrl, sessionIdRef.current, true);
+          }
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        window.addEventListener("pagehide", handlePageHide);
+        window.addEventListener("blur", handleWindowBlur);
       } catch (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 {
@@ -242,23 +228,8 @@ function NevisionRecorder({
     };
     const sendChunk = async (url, sessionId, isBeacon = false) => {
       if (eventsBufferRef.current.length === 0) return;
-      const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
+      const events = isBeacon ? eventsBufferRef.current.splice(0) : 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,
@@ -267,15 +238,26 @@ function NevisionRecorder({
         chunkIndex
       });
       if (isBeacon && navigator.sendBeacon) {
-        const sent = navigator.sendBeacon(
+        navigator.sendBeacon(
           `${url}/public/recordings/chunk`,
           new Blob([payload], { type: "application/json" })
         );
-        if (sent && eventStoreRef.current) {
-          eventStoreRef.current.deleteChunk(chunkId).catch(() => {
-          });
-        }
       } else {
+        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 {
+          }
+        }
         try {
           const response = await fetch(`${url}/public/recordings/chunk`, {
             method: "POST",
@@ -290,22 +272,23 @@ function NevisionRecorder({
       }
     };
     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]);
   return null;

package/package.json

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