core-outline 1.1.15 → 1.1.17

package/dist/index.es.js

@@ -6422,13 +6422,56 @@ var CoreOutline = function CoreOutline(_ref) {
     }));
     return _authorizeApp.apply(this, arguments);
   }
+  var offLoadFunctionality = function offLoadFunctionality() {
+    var 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"](function (err) {
+        return console.error('Upload failed:', err);
+      });
+    }
+  };
   useEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var handleBeforeUnload, handleVisibilityChange;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
+          handleBeforeUnload = function handleBeforeUnload() {
+            offLoadFunctionality();
+          };
+          handleVisibilityChange = function handleVisibilityChange() {
+            if (document.visibilityState === 'hidden') {
+              offLoadFunctionality();
+            }
+          };
+          window.addEventListener('beforeunload', handleBeforeUnload);
+          document.addEventListener('visibilitychange', handleVisibilityChange);
+          _context.next = 6;
           return authorizeApp(data_source_id, data_source_secret);
-        case 2:
+        case 6:
           localStorage.setItem("coreOutlineSessionId", sessionId);
           localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
           console.log("Session", sessionId);
@@ -6443,6 +6486,9 @@ var CoreOutline = function CoreOutline(_ref) {
             event_id: "SESSION_START"
           });
           return _context.abrupt("return", function () {
+            offLoadFunctionality();
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
             socket.send({
               topic: "session-data",
               data_source_id: data_source_id,
@@ -6454,7 +6500,7 @@ var CoreOutline = function CoreOutline(_ref) {
               event_id: "SESSION_END"
             });
           });
-        case 7:
+        case 11:
         case "end":
           return _context.stop();
       }
@@ -6501,7 +6547,6 @@ var CoreOutline = function CoreOutline(_ref) {
         page_name: window.location.href,
         event_id: "PAGE_NAVIGATION"
       });
-      saveEvents(events);
     };
     window.addEventListener("popstate", handleNavigation);
     var originalPushState = window.history.pushState;
@@ -6538,7 +6583,6 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
@@ -6576,7 +6620,6 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
@@ -6628,21 +6671,6 @@ var CoreOutline = function CoreOutline(_ref) {
       document.removeEventListener("click", handleClick);
     };
   }, []);
-  function saveEvents(events) {
-    var requestOptions = {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(events)
-    };
-    fetch("http://localhost:5000/generate-s3-url/".concat(data_source_id, "/").concat(sessionId)).then(function (response) {
-      return response.json();
-    }).then(function (data) {
-      var uploadURL = data.signed_url;
-      return fetch(uploadURL, requestOptions);
-    });
-  }
   function saveEventsLocally() {
     var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "formatted" ;
     var blob = "";

package/dist/index.js

@@ -6430,13 +6430,56 @@ var CoreOutline = function CoreOutline(_ref) {
     }));
     return _authorizeApp.apply(this, arguments);
   }
+  var offLoadFunctionality = function offLoadFunctionality() {
+    var 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"](function (err) {
+        return console.error('Upload failed:', err);
+      });
+    }
+  };
   React.useEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var handleBeforeUnload, handleVisibilityChange;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
+          handleBeforeUnload = function handleBeforeUnload() {
+            offLoadFunctionality();
+          };
+          handleVisibilityChange = function handleVisibilityChange() {
+            if (document.visibilityState === 'hidden') {
+              offLoadFunctionality();
+            }
+          };
+          window.addEventListener('beforeunload', handleBeforeUnload);
+          document.addEventListener('visibilitychange', handleVisibilityChange);
+          _context.next = 6;
           return authorizeApp(data_source_id, data_source_secret);
-        case 2:
+        case 6:
           localStorage.setItem("coreOutlineSessionId", sessionId);
           localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
           console.log("Session", sessionId);
@@ -6451,6 +6494,9 @@ var CoreOutline = function CoreOutline(_ref) {
             event_id: "SESSION_START"
           });
           return _context.abrupt("return", function () {
+            offLoadFunctionality();
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
             socket.send({
               topic: "session-data",
               data_source_id: data_source_id,
@@ -6462,7 +6508,7 @@ var CoreOutline = function CoreOutline(_ref) {
               event_id: "SESSION_END"
             });
           });
-        case 7:
+        case 11:
         case "end":
           return _context.stop();
       }
@@ -6509,7 +6555,6 @@ var CoreOutline = function CoreOutline(_ref) {
         page_name: window.location.href,
         event_id: "PAGE_NAVIGATION"
       });
-      saveEvents(events);
     };
     window.addEventListener("popstate", handleNavigation);
     var originalPushState = window.history.pushState;
@@ -6546,7 +6591,6 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
@@ -6584,7 +6628,6 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
@@ -6636,21 +6679,6 @@ var CoreOutline = function CoreOutline(_ref) {
       document.removeEventListener("click", handleClick);
     };
   }, []);
-  function saveEvents(events) {
-    var requestOptions = {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(events)
-    };
-    fetch("http://localhost:5000/generate-s3-url/".concat(data_source_id, "/").concat(sessionId)).then(function (response) {
-      return response.json();
-    }).then(function (data) {
-      var uploadURL = data.signed_url;
-      return fetch(uploadURL, requestOptions);
-    });
-  }
   function saveEventsLocally() {
     var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "formatted" ;
     var blob = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "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,22 +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),
-    };
-    const res = 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);
-      });
-    console.log("Events saved successfully:", res);
-  }
 
   function saveEventsLocally(type = "formatted" || "raw") {
     let blob = "";