@arthurreira/analytics 0.21.0 → 0.23.0

package/dist/af-analytics.umd.js

@@ -133,6 +133,16 @@ var AfAnalytics = (() => {
     }).catch(() => {
     });
   }
+  function sendHeartbeat(apiUrl, apiKey, sessionId) {
+    if (isOptedOut()) return;
+    fetch(`${apiUrl}/sessions/${sessionId}/heartbeat`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ api_key: apiKey }),
+      keepalive: true
+    }).catch(() => {
+    });
+  }
   function baseFields(sessionId, eventType) {
     return {
       session_id: sessionId,
@@ -293,7 +303,10 @@ var AfAnalytics = (() => {
     function startSession(id) {
       sessionId = id;
       closeResponder = openSessionResponder(id);
-      idleTimer = setInterval(touchSession, IDLE_TOUCH_INTERVAL_MS);
+      idleTimer = setInterval(() => {
+        touchSession();
+        sendHeartbeat(apiUrl, apiKey, id);
+      }, IDLE_TOUCH_INTERVAL_MS);
       pending.splice(0).forEach((fn) => fn(id));
     }
     function endSession() {
@@ -304,7 +317,7 @@ var AfAnalytics = (() => {
         idleTimer = null;
       }
       closeResponder();
-      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`);
+      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId}/end`, JSON.stringify({ api_key: apiKey }));
       clearSession();
     }
     function restartSession() {

package/dist/client.js

@@ -41,6 +41,12 @@ function getConnectionType() {
   const nav = navigator;
   return nav.connection?.effectiveType ?? null;
 }
+function resolveInteractiveTarget(el) {
+  const interactive = el.closest(
+    'a, button, [role="button"], input, select, textarea, label, summary'
+  );
+  return interactive ?? el;
+}
 function resolveElementHref(element) {
   if (element.tagName.toLowerCase() === "a") {
     return element.href || null;
@@ -48,6 +54,15 @@ function resolveElementHref(element) {
   const anchor = element.closest("a");
   return anchor ? anchor.href || null : null;
 }
+function safeClassName(el) {
+  const cn = el.className;
+  return typeof cn === "string" ? cn || null : null;
+}
+function cleanLabel(raw, maxLen) {
+  if (!raw) return null;
+  const cleaned = raw.replace(/\s+/g, " ").trim().slice(0, maxLen);
+  return cleaned || null;
+}
 function isExternalHref(href) {
   if (!href) return null;
   if (typeof window === "undefined") return null;
@@ -111,6 +126,17 @@ async function createSession(apiUrl, apiKey, visitorId) {
     return null;
   }
 }
+async function sendHeartbeat(apiUrl, apiKey, sessionId) {
+  if (isOptedOut()) return;
+  try {
+    await fetch(`${apiUrl}/sessions/${sessionId}/heartbeat`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ api_key: apiKey })
+    });
+  } catch {
+  }
+}
 async function sendEvent(apiUrl, apiKey, payload) {
   if (isOptedOut()) return;
   await fetch(`${apiUrl}/events`, {
@@ -135,23 +161,24 @@ async function trackPageview(apiUrl, apiKey, sessionId, path, routeName) {
   });
 }
 async function trackClick(apiUrl, apiKey, sessionId, path, e, element) {
-  const href = resolveElementHref(element);
-  const ariaLabel = element.getAttribute("aria-label");
-  const text = element.innerText?.slice(0, 60);
-  const eventName = ariaLabel || text || element.tagName.toLowerCase();
+  const target = resolveInteractiveTarget(element);
+  const href = resolveElementHref(target);
+  const ariaLabel = target.getAttribute("aria-label");
+  const rawText = target.innerText ?? target.textContent ?? void 0;
+  const eventName = cleanLabel(ariaLabel, 60) ?? cleanLabel(rawText, 60) ?? target.tagName.toLowerCase();
   await sendEvent(apiUrl, apiKey, {
     ...BASE_FIELDS(sessionId, "click", path, eventName, "interaction"),
     x_position: e.clientX,
     y_position: e.clientY,
-    element_id: element.id || null,
-    element_class: element.className || null,
-    element_text: element.innerText?.slice(0, 100) || null,
-    tag_name: element.tagName.toLowerCase(),
+    element_id: target.id || null,
+    element_class: safeClassName(target),
+    element_text: cleanLabel(rawText, 100),
+    tag_name: target.tagName.toLowerCase(),
     element_href: href,
-    element_role: element.getAttribute("role") || null,
-    element_aria_label: element.getAttribute("aria-label") || null,
-    element_type: element.type || null,
-    element_name: element.name || null,
+    element_role: target.getAttribute("role") || null,
+    element_aria_label: ariaLabel || null,
+    element_type: target.type || null,
+    element_name: target.name || null,
     is_external_link: isExternalHref(href),
     modifier_keys: {
       alt: e.altKey,
@@ -400,6 +427,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl, routeName) {
       idleTimerRef.current = setInterval(() => {
         if (!hasSentEnd.current) {
           localStorage.setItem("af_session_last_activity", String(Date.now()));
+          sendHeartbeat(apiUrl, apiKey, id);
         }
       }, IDLE_TOUCH_INTERVAL_MS);
       if (wsUrl) {
@@ -424,7 +452,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl, routeName) {
       closeResponderRef.current();
       presenceRef.current?.disconnect();
       presenceRef.current = null;
-      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId.current}/end`);
+      navigator.sendBeacon(`${apiUrl}/sessions/${sessionId.current}/end`, JSON.stringify({ api_key: apiKey }));
       localStorage.removeItem("af_session_id");
       localStorage.removeItem("af_session_last_activity");
     };
@@ -448,6 +476,7 @@ function useAnalytics(apiUrl, apiKey, currentPath, wsUrl, routeName) {
         idleTimerRef.current = setInterval(() => {
           if (!hasSentEnd.current) {
             localStorage.setItem("af_session_last_activity", String(Date.now()));
+            sendHeartbeat(apiUrl, apiKey, id);
           }
         }, IDLE_TOUCH_INTERVAL_MS);
         if (wsUrl) {
@@ -542,6 +571,10 @@ function Analytics({ apiKey, apiUrl, wsUrl, routeName }) {
   const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackException: trackException2, trackWebVital: trackWebVital2 } = useAnalytics(apiUrl, apiKey, pathname, wsUrl, routeName);
   const lastTracked = useRef2(null);
   const lastScrollDepth = useRef2(0);
+  const trackWebVitalRef = useRef2(trackWebVital2);
+  useEffect2(() => {
+    trackWebVitalRef.current = trackWebVital2;
+  });
   useEffect2(() => {
     if (lastTracked.current === pathname) return;
     lastTracked.current = pathname;
@@ -551,14 +584,14 @@ function Analytics({ apiKey, apiUrl, wsUrl, routeName }) {
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const report = (name, value, rating) => {
-      trackWebVital2({ name, value, rating });
+      trackWebVitalRef.current({ name, value, rating });
     };
     onLCP((m) => report("lcp_ms", Math.round(m.value), m.rating));
     onCLS((m) => report("cls_score", m.value, m.rating));
     onINP((m) => report("inp_ms", Math.round(m.value), m.rating));
     onTTFB((m) => report("ttfb_ms", Math.round(m.value), m.rating));
     onFCP((m) => report("fcp_ms", Math.round(m.value), m.rating));
-  }, [trackWebVital2]);
+  }, []);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     const handler = (e) => trackClick2(e, e.target);

package/dist/index.js

@@ -42,6 +42,12 @@ function getConnectionType() {
   const nav = navigator;
   return nav.connection?.effectiveType ?? null;
 }
+function resolveInteractiveTarget(el) {
+  const interactive = el.closest(
+    'a, button, [role="button"], input, select, textarea, label, summary'
+  );
+  return interactive ?? el;
+}
 function resolveElementHref(element) {
   if (element.tagName.toLowerCase() === "a") {
     return element.href || null;
@@ -49,6 +55,15 @@ function resolveElementHref(element) {
   const anchor = element.closest("a");
   return anchor ? anchor.href || null : null;
 }
+function safeClassName(el) {
+  const cn = el.className;
+  return typeof cn === "string" ? cn || null : null;
+}
+function cleanLabel(raw, maxLen) {
+  if (!raw) return null;
+  const cleaned = raw.replace(/\s+/g, " ").trim().slice(0, maxLen);
+  return cleaned || null;
+}
 function isExternalHref(href) {
   if (!href) return null;
   if (typeof window === "undefined") return null;
@@ -136,23 +151,24 @@ async function trackPageview(apiUrl, apiKey, sessionId, path, routeName) {
   });
 }
 async function trackClick(apiUrl, apiKey, sessionId, path, e, element) {
-  const href = resolveElementHref(element);
-  const ariaLabel = element.getAttribute("aria-label");
-  const text = element.innerText?.slice(0, 60);
-  const eventName = ariaLabel || text || element.tagName.toLowerCase();
+  const target = resolveInteractiveTarget(element);
+  const href = resolveElementHref(target);
+  const ariaLabel = target.getAttribute("aria-label");
+  const rawText = target.innerText ?? target.textContent ?? void 0;
+  const eventName = cleanLabel(ariaLabel, 60) ?? cleanLabel(rawText, 60) ?? target.tagName.toLowerCase();
   await sendEvent(apiUrl, apiKey, {
     ...BASE_FIELDS(sessionId, "click", path, eventName, "interaction"),
     x_position: e.clientX,
     y_position: e.clientY,
-    element_id: element.id || null,
-    element_class: element.className || null,
-    element_text: element.innerText?.slice(0, 100) || null,
-    tag_name: element.tagName.toLowerCase(),
+    element_id: target.id || null,
+    element_class: safeClassName(target),
+    element_text: cleanLabel(rawText, 100),
+    tag_name: target.tagName.toLowerCase(),
     element_href: href,
-    element_role: element.getAttribute("role") || null,
-    element_aria_label: element.getAttribute("aria-label") || null,
-    element_type: element.type || null,
-    element_name: element.name || null,
+    element_role: target.getAttribute("role") || null,
+    element_aria_label: ariaLabel || null,
+    element_type: target.type || null,
+    element_name: target.name || null,
     is_external_link: isExternalHref(href),
     modifier_keys: {
       alt: e.altKey,

package/package.json

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