@neroom/nevision 0.1.7 → 0.1.9

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";
@@ -173,7 +173,6 @@ function NevisionRecorder({
         const recordConfig = {
           emit: (event) => {
             eventsBufferRef.current.push(event);
-            persistEventsToStorage();
           },
           sampling: currentSampling ? {
             mousemove: currentSampling.mousemove,
@@ -197,6 +196,36 @@ function NevisionRecorder({
         if (stopFn) {
           stopFnRef.current = stopFn;
         }
+        const emitPageLifecycleEvent = (eventName) => {
+          const customEvent = {
+            type: 5,
+            // Custom event type in rrweb
+            data: {
+              tag: "page_lifecycle",
+              payload: {
+                event: eventName
+              }
+            },
+            timestamp: Date.now()
+          };
+          eventsBufferRef.current.push(customEvent);
+        };
+        const handleVisibilityChangeForTimeline = () => {
+          if (document.visibilityState === "hidden") {
+            emitPageLifecycleEvent("page_hidden");
+          } else {
+            emitPageLifecycleEvent("page_visible");
+          }
+        };
+        const handleWindowFocusForTimeline = () => {
+          emitPageLifecycleEvent("page_focus");
+        };
+        const handleWindowBlurForTimeline = () => {
+          emitPageLifecycleEvent("page_blur");
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChangeForTimeline);
+        window.addEventListener("focus", handleWindowFocusForTimeline);
+        window.addEventListener("blur", handleWindowBlurForTimeline);
         intervalId = setInterval(() => {
           sendChunk(apiUrl, sessionId);
         }, CHUNK_INTERVAL);
@@ -211,44 +240,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 {
@@ -277,23 +292,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,
@@ -302,15 +302,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",
@@ -339,10 +350,6 @@ function NevisionRecorder({
       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 = [];

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";
@@ -139,7 +139,6 @@ function NevisionRecorder({
         const recordConfig = {
           emit: (event) => {
             eventsBufferRef.current.push(event);
-            persistEventsToStorage();
           },
           sampling: currentSampling ? {
             mousemove: currentSampling.mousemove,
@@ -163,6 +162,36 @@ function NevisionRecorder({
         if (stopFn) {
           stopFnRef.current = stopFn;
         }
+        const emitPageLifecycleEvent = (eventName) => {
+          const customEvent = {
+            type: 5,
+            // Custom event type in rrweb
+            data: {
+              tag: "page_lifecycle",
+              payload: {
+                event: eventName
+              }
+            },
+            timestamp: Date.now()
+          };
+          eventsBufferRef.current.push(customEvent);
+        };
+        const handleVisibilityChangeForTimeline = () => {
+          if (document.visibilityState === "hidden") {
+            emitPageLifecycleEvent("page_hidden");
+          } else {
+            emitPageLifecycleEvent("page_visible");
+          }
+        };
+        const handleWindowFocusForTimeline = () => {
+          emitPageLifecycleEvent("page_focus");
+        };
+        const handleWindowBlurForTimeline = () => {
+          emitPageLifecycleEvent("page_blur");
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChangeForTimeline);
+        window.addEventListener("focus", handleWindowFocusForTimeline);
+        window.addEventListener("blur", handleWindowBlurForTimeline);
         intervalId = setInterval(() => {
           sendChunk(apiUrl, sessionId);
         }, CHUNK_INTERVAL);
@@ -177,44 +206,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 {
@@ -243,23 +258,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,
@@ -268,15 +268,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",
@@ -305,10 +316,6 @@ function NevisionRecorder({
       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 = [];

package/package.json

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