@arthurreira/analytics 0.17.0 → 0.18.0

package/dist/af-analytics.umd.js

@@ -42,6 +42,9 @@ var AfAnalytics = (() => {
   });
   var _currentScript = document.currentScript;
   var SESSION_EXPIRY_MS = 30 * 60 * 1e3;
+  var IDLE_TOUCH_INTERVAL_MS = 5 * 60 * 1e3;
+  var BC_CHANNEL = "af_analytics_session";
+  var BC_ADOPT_TIMEOUT_MS = 50;
   function readConfig() {
     var _a, _b, _c, _d;
     const script = _currentScript != null ? _currentScript : document.querySelector("script[data-api-key]");
@@ -110,6 +113,49 @@ var AfAnalytics = (() => {
       page_url: `${window.location.origin}${window.location.pathname}`
     };
   }
+  function requestSessionFromPeer() {
+    if (typeof BroadcastChannel === "undefined") return Promise.resolve(null);
+    return new Promise((resolve) => {
+      let channel;
+      try {
+        channel = new BroadcastChannel(BC_CHANNEL);
+      } catch (e) {
+        resolve(null);
+        return;
+      }
+      const timer = setTimeout(() => {
+        channel.close();
+        resolve(null);
+      }, BC_ADOPT_TIMEOUT_MS);
+      channel.onmessage = (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "session_adopt" && typeof e.data.session_id === "string") {
+          clearTimeout(timer);
+          channel.close();
+          resolve(e.data.session_id);
+        }
+      };
+      channel.postMessage({ type: "session_claim" });
+    });
+  }
+  function openSessionResponder(sessionId) {
+    if (typeof BroadcastChannel === "undefined") return () => {
+    };
+    let channel;
+    try {
+      channel = new BroadcastChannel(BC_CHANNEL);
+    } catch (e) {
+      return () => {
+      };
+    }
+    channel.onmessage = (e) => {
+      var _a;
+      if (((_a = e.data) == null ? void 0 : _a.type) === "session_claim") {
+        channel.postMessage({ type: "session_adopt", session_id: sessionId });
+      }
+    };
+    return () => channel.close();
+  }
   async function createRemoteSession(apiUrl, apiKey, visitorId) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
     const nav = navigator;
@@ -151,9 +197,17 @@ var AfAnalytics = (() => {
       touchSession();
       return stored;
     }
+    const adopted = await requestSessionFromPeer();
+    if (adopted) {
+      localStorage.setItem("af_session_id", adopted);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+      return adopted;
+    }
     const id = await createRemoteSession(apiUrl, apiKey, getVisitorId());
-    localStorage.setItem("af_session_id", id);
-    localStorage.setItem("af_session_last_activity", String(Date.now()));
+    if (id) {
+      localStorage.setItem("af_session_id", id);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+    }
     return id;
   }
   function trackPageview(apiUrl, apiKey, sessionId) {
@@ -188,6 +242,9 @@ var AfAnalytics = (() => {
     const pending = [];
     let sessionEnded = false;
     let lastScrollDepth = 0;
+    let closeResponder = () => {
+    };
+    let idleTimer = null;
     function enqueue(fn) {
       if (sessionId) {
         touchSession();
@@ -196,9 +253,43 @@ var AfAnalytics = (() => {
         pending.push(fn);
       }
     }
-    getOrCreateSession(apiUrl, apiKey).then((id) => {
+    function startSession(id) {
       sessionId = id;
+      closeResponder = openSessionResponder(id);
+      idleTimer = setInterval(touchSession, IDLE_TOUCH_INTERVAL_MS);
       pending.splice(0).forEach((fn) => fn(id));
+    }
+    function endSession() {
+      if (!sessionId || sessionEnded) return;
+      sessionEnded = true;
+      if (idleTimer !== null) {
+        clearInterval(idleTimer);
+        idleTimer = null;
+      }
+      closeResponder();
+      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
+      clearSession();
+    }
+    function restartSession() {
+      sessionEnded = false;
+      sessionId = null;
+      if (idleTimer !== null) {
+        clearInterval(idleTimer);
+        idleTimer = null;
+      }
+      closeResponder();
+      closeResponder = () => {
+      };
+      clearSession();
+      getOrCreateSession(apiUrl, apiKey).then((id) => {
+        if (!id) return;
+        startSession(id);
+        trackPageview(apiUrl, apiKey, id);
+      }).catch(() => {
+      });
+    }
+    getOrCreateSession(apiUrl, apiKey).then((id) => {
+      if (id) startSession(id);
     }).catch(() => {
     });
     enqueue((id) => trackPageview(apiUrl, apiKey, id));
@@ -263,12 +354,11 @@ var AfAnalytics = (() => {
         });
       });
     });
-    const endSession = () => {
-      if (!sessionId || sessionEnded) return;
-      sessionEnded = true;
-      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
-      clearSession();
-    };
+    window.addEventListener("storage", (e) => {
+      if (e.key === "af_session_id" && e.newValue === null && e.oldValue !== null) {
+        restartSession();
+      }
+    });
     let visHideTimer = null;
     document.addEventListener("visibilitychange", () => {
       if (document.visibilityState === "hidden") {
@@ -280,7 +370,17 @@ var AfAnalytics = (() => {
         }
       }
     });
-    window.addEventListener("pagehide", endSession);
+    window.addEventListener("pagehide", (e) => {
+      if (!e.persisted) endSession();
+    });
+    window.addEventListener("pageshow", (e) => {
+      if (!e.persisted) return;
+      if (sessionEnded || !sessionId) {
+        restartSession();
+      } else {
+        trackPageview(apiUrl, apiKey, sessionId);
+      }
+    });
     window.addEventListener("beforeunload", endSession);
   }
   if (document.readyState === "loading") {

package/dist/client.js

@@ -216,7 +216,51 @@ function connectPresence(apiKey, sessionId, wsUrl = DEFAULT_WS_URL) {
 
 // src/hooks/useAnalytics.ts
 var SESSION_EXPIRY_MINUTES = 30;
+var IDLE_TOUCH_INTERVAL_MS = 5 * 60 * 1e3;
+var BC_CHANNEL = "af_analytics_session";
+var BC_ADOPT_TIMEOUT_MS = 50;
 var _sessionFlight = null;
+function requestSessionFromPeer() {
+  if (typeof BroadcastChannel === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let channel;
+    try {
+      channel = new BroadcastChannel(BC_CHANNEL);
+    } catch {
+      resolve(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      channel.close();
+      resolve(null);
+    }, BC_ADOPT_TIMEOUT_MS);
+    channel.onmessage = (e) => {
+      if (e.data?.type === "session_adopt" && typeof e.data.session_id === "string") {
+        clearTimeout(timer);
+        channel.close();
+        resolve(e.data.session_id);
+      }
+    };
+    channel.postMessage({ type: "session_claim" });
+  });
+}
+function openSessionResponder(sessionId) {
+  if (typeof BroadcastChannel === "undefined") return () => {
+  };
+  let channel;
+  try {
+    channel = new BroadcastChannel(BC_CHANNEL);
+  } catch {
+    return () => {
+    };
+  }
+  channel.onmessage = (e) => {
+    if (e.data?.type === "session_claim") {
+      channel.postMessage({ type: "session_adopt", session_id: sessionId });
+    }
+  };
+  return () => channel.close();
+}
 async function getOrCreateSession(apiUrl, apiKey, visitorId) {
   const storedSessionId = localStorage.getItem("af_session_id");
   const lastActivity = localStorage.getItem("af_session_last_activity");
@@ -231,11 +275,20 @@ async function getOrCreateSession(apiUrl, apiKey, visitorId) {
     localStorage.removeItem("af_session_last_activity");
   }
   if (_sessionFlight) return _sessionFlight;
-  _sessionFlight = createSession(apiUrl, apiKey, visitorId).then((id) => {
+  _sessionFlight = (async () => {
+    const adopted = await requestSessionFromPeer();
+    if (adopted) {
+      localStorage.setItem("af_session_id", adopted);
+      localStorage.setItem("af_session_last_activity", String(Date.now()));
+      return adopted;
+    }
+    const id = await createSession(apiUrl, apiKey, visitorId);
     if (id) {
       localStorage.setItem("af_session_id", id);
       localStorage.setItem("af_session_last_activity", String(Date.now()));
     }
+    return id;
+  })().then((id) => {
     _sessionFlight = null;
     return id;
   }).catch((err) => {
@@ -249,6 +302,13 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
   const pendingEvents = useRef([]);
   const hasSentEnd = useRef(false);
   const presenceRef = useRef(null);
+  const closeResponderRef = useRef(() => {
+  });
+  const idleTimerRef = useRef(null);
+  const currentPathRef = useRef(currentPath);
+  useEffect(() => {
+    currentPathRef.current = currentPath;
+  }, [currentPath]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const visitor_id = localStorage.getItem("af_analytics_visitor_id") || crypto.randomUUID();
@@ -257,6 +317,12 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
     getOrCreateSession(apiUrl, apiKey, visitor_id).then((id) => {
       if (cancelled || !id) return;
       sessionId.current = id;
+      closeResponderRef.current = openSessionResponder(id);
+      idleTimerRef.current = setInterval(() => {
+        if (!hasSentEnd.current) {
+          localStorage.setItem("af_session_last_activity", String(Date.now()));
+        }
+      }, IDLE_TOUCH_INTERVAL_MS);
       if (wsUrl) {
         presenceRef.current = connectPresence(apiKey, id, wsUrl);
       }
@@ -272,11 +338,61 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
     const sendEnd = () => {
       if (!sessionId.current || hasSentEnd.current) return;
       hasSentEnd.current = true;
+      if (idleTimerRef.current !== null) {
+        clearInterval(idleTimerRef.current);
+        idleTimerRef.current = null;
+      }
+      closeResponderRef.current();
       presenceRef.current?.disconnect();
+      presenceRef.current = null;
       navigator.sendBeacon(`${apiUrl}/sessions/${sessionId.current}/end`);
       localStorage.removeItem("af_session_id");
       localStorage.removeItem("af_session_last_activity");
     };
+    const restartSession = () => {
+      sessionId.current = null;
+      hasSentEnd.current = false;
+      if (idleTimerRef.current !== null) {
+        clearInterval(idleTimerRef.current);
+        idleTimerRef.current = null;
+      }
+      closeResponderRef.current();
+      closeResponderRef.current = () => {
+      };
+      presenceRef.current?.disconnect();
+      presenceRef.current = null;
+      const visitor_id = localStorage.getItem("af_analytics_visitor_id") || crypto.randomUUID();
+      getOrCreateSession(apiUrl, apiKey, visitor_id).then((id) => {
+        if (!id) return;
+        sessionId.current = id;
+        closeResponderRef.current = openSessionResponder(id);
+        idleTimerRef.current = setInterval(() => {
+          if (!hasSentEnd.current) {
+            localStorage.setItem("af_session_last_activity", String(Date.now()));
+          }
+        }, IDLE_TOUCH_INTERVAL_MS);
+        if (wsUrl) {
+          presenceRef.current = connectPresence(apiKey, id, wsUrl);
+        }
+        trackPageview(apiUrl, apiKey, id, currentPathRef.current);
+      });
+    };
+    const handleStorage = (e) => {
+      if (e.key === "af_session_id" && e.newValue === null && e.oldValue !== null) {
+        restartSession();
+      }
+    };
+    const handlePageHide = (e) => {
+      if (!e.persisted) sendEnd();
+    };
+    const handlePageShow = (e) => {
+      if (!e.persisted) return;
+      if (hasSentEnd.current || !sessionId.current) {
+        restartSession();
+      } else {
+        trackPageview(apiUrl, apiKey, sessionId.current, currentPathRef.current);
+      }
+    };
     let visHideTimer = null;
     const handleVisibility = () => {
       if (document.visibilityState === "hidden") {
@@ -288,13 +404,17 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl) {
         }
       }
     };
+    window.addEventListener("storage", handleStorage);
     document.addEventListener("visibilitychange", handleVisibility);
-    window.addEventListener("pagehide", sendEnd);
+    window.addEventListener("pagehide", handlePageHide);
+    window.addEventListener("pageshow", handlePageShow);
     window.addEventListener("beforeunload", sendEnd);
     return () => {
       if (visHideTimer !== null) clearTimeout(visHideTimer);
+      window.removeEventListener("storage", handleStorage);
       document.removeEventListener("visibilitychange", handleVisibility);
-      window.removeEventListener("pagehide", sendEnd);
+      window.removeEventListener("pagehide", handlePageHide);
+      window.removeEventListener("pageshow", handlePageShow);
       window.removeEventListener("beforeunload", sendEnd);
     };
   }, [apiUrl]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arthurreira/analytics",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "scripts": {
     "build": "tsup",