core-outline 1.1.14 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/CoreOutline/CoreOutline.js

@@ -5,6 +5,7 @@ import socket from "./socket";
 
 import { EventType, eventWithTime, IncrementalSource, MouseInteractions } from "rrweb";
 
+
 const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
   const [events, setEvents] = useState([]);
   const [replayEvents, setReplayEvents] = useState([]);
@@ -38,7 +39,56 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
       });
     return response;
   }
+
+  const offLoadFunctionality = () => {
+    const data = JSON.stringify({
+      data_source_id: data_source_id,
+      sessionId: sessionId,
+      formatted_events: JSON.stringify(events),
+      raw_events: JSON.stringify(replayEvents),
+    });
+
+    socket.send({
+      topic: "session-data",
+      data_source_id: data_source_id,
+      session_id: localStorage.getItem("coreOutlineSessionId"),
+      start_date: new Date().toLocaleString(),
+      latitude: location.latitude,
+      longitude: location.longitude,
+      browser: browser,
+      event_id: "SESSION_END",
+    });
+
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(
+        `http://localhost:5000/upload-events`, data
+      );
+    }
+    else {
+      fetch(`http://localhost:5000/upload-events`, {
+        method: 'POST',
+        body: data,
+        keepalive: true,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }).catch(err => console.error('Upload failed:', err));
+    }
+  };
+
+
   useEffect(async () => {
+    const handleBeforeUnload = () => {
+      offLoadFunctionality();
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        offLoadFunctionality();
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
     await authorizeApp(data_source_id, data_source_secret);
     localStorage.setItem("coreOutlineSessionId", sessionId);
     localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
@@ -55,6 +105,9 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     });
 
     return () => {
+      offLoadFunctionality();
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
       socket.send({
         topic: "session-data",
         data_source_id: data_source_id,
@@ -104,7 +157,6 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
         page_name: window.location.href,
         event_id: "PAGE_NAVIGATION",
       });
-      saveEvents(events);
     };
 
     window.addEventListener("popstate", handleNavigation);
@@ -142,7 +194,6 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     return () => {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
 
         recorderActive.current = false;
       }
@@ -182,7 +233,6 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     return () => {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
 
         recorderActive.current = false;
       }
@@ -239,21 +289,6 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
     };
   }, []);
 
-  function saveEvents(events) {
-    const requestOptions = {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(events),
-    };
-    fetch(`http://localhost:5000/generate-s3-url/${data_source_id}/${sessionId}`)
-      .then((response) => response.json())
-      .then((data) => {
-        const uploadURL = data.signed_url;
-        return fetch(uploadURL, requestOptions);
-      });
-  }
 
   function saveEventsLocally(type = "formatted" || "raw") {
     let blob = "";