fix: tracker post interval on vitals

loglib · Sep 28, 2023 · 3281f6c · 3281f6c
1 parent 37acf6e
commit 3281f6c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 26 deletions.
diff --git a/.changeset/modern-olives-care.md b/.changeset/modern-olives-care.md
@@ -0,0 +1,5 @@
+---
+"@loglib/tracker": minor
+---
+
+- Send vital request in batch with a given post interval.
diff --git a/packages/tracker/src/record.ts b/packages/tracker/src/record.ts
@@ -32,7 +32,7 @@ export function record(config?: Partial<Config>) {
         consent: "denied",
         webVitals: true,
         pageAnalytics: true,
-        customEvents: true
+        customEvents: true,
     };
     if (config?.host) {
         if (Array.isArray(config.host)) {
@@ -58,7 +58,7 @@ export function record(config?: Partial<Config>) {
         intervals: [],
         sdkVersion: packageJson.version,
     };
-    const logger = Logger(window.llc.debug)
+    const logger = Logger(window.llc.debug);
     logger.log("start recording...", window.llc);
 
     //Set environment
@@ -73,20 +73,23 @@ export function record(config?: Partial<Config>) {
         //TODO: Add more auto trackers for d/t events
     }
 
-
     //vitals
     if (window.llc.webVitals) {
-        recordWebVitals()
-        sessionEndHandler(flushVitalQueue)
+        recordWebVitals();
+        const eventsInterval = setInterval(() => {
+            flushVitalQueue();
+        }, window.llc.postInterval * 1000);
+        addInterval(eventsInterval);
+        sessionEndHandler(flushVitalQueue);
     }
 
     //Custom events
     if (window.llc.customEvents) {
         const eventsInterval = setInterval(() => {
-            sendEvents()
+            sendEvents();
         }, window.llc.postInterval * 1000);
         addInterval(eventsInterval);
-        sessionEndHandler(sendEvents)
+        sessionEndHandler(sendEvents);
     }
 
     //page views
@@ -117,7 +120,7 @@ export const navigationHandler = (_: string, __: string, url: string) => {
 const sessionEndHandler = async (fn: () => void) => {
     document.onvisibilitychange = () => {
         if (document.visibilityState === "hidden") {
-            fn()
+            fn();
             sendEvents();
             clearIntervals();
         } else {
@@ -127,4 +130,4 @@ const sessionEndHandler = async (fn: () => void) => {
             }
         }
     };
-}
+};
diff --git a/packages/tracker/src/vitals.ts b/packages/tracker/src/vitals.ts
@@ -1,10 +1,31 @@
-import { send } from "./server"
-import { CLSMetricWithAttribution, FIDMetricWithAttribution, TTFBMetricWithAttribution, LCPMetricWithAttribution, FCPMetricWithAttribution, INPMetricWithAttribution, onCLS, onFCP, onFID, onINP, onTTFB, onLCP } from 'web-vitals/attribution';
+import {
+    CLSMetricWithAttribution,
+    FCPMetricWithAttribution,
+    FIDMetricWithAttribution,
+    INPMetricWithAttribution,
+    LCPMetricWithAttribution,
+    TTFBMetricWithAttribution,
+    onCLS,
+    onFCP,
+    onFID,
+    onINP,
+    onLCP,
+    onTTFB,
+} from "web-vitals/attribution";
+import { send } from "./server";
 import { getUrlParams, getVisitorId } from "./utils/util";
 
 export function recordWebVitals() {
-    const queue = window.lli.vitalQueue
-    function addToQueue(metric: CLSMetricWithAttribution | FIDMetricWithAttribution | LCPMetricWithAttribution | FCPMetricWithAttribution | INPMetricWithAttribution | TTFBMetricWithAttribution) {
+    const queue = window.lli.vitalQueue;
+    function addToQueue(
+        metric:
+            | CLSMetricWithAttribution
+            | FIDMetricWithAttribution
+            | LCPMetricWithAttribution
+            | FCPMetricWithAttribution
+            | INPMetricWithAttribution
+            | TTFBMetricWithAttribution,
+    ) {
         const data = {
             visitorId: getVisitorId(),
             sessionId: window.lli.sessionId,
@@ -19,22 +40,22 @@ export function recordWebVitals() {
             name: metric.name,
             rating: metric.rating,
             navigationType: metric.navigationType,
-            websiteId: window.llc.id
-        }
-        queue.add(data)
+            websiteId: window.llc.id,
+        };
+        queue.add(data);
     }
-    onCLS(addToQueue)
-    onFCP(addToQueue)
-    onFID(addToQueue)
-    onINP(addToQueue)
-    onTTFB(addToQueue)
-    onLCP(addToQueue)
+    onCLS(addToQueue);
+    onFCP(addToQueue);
+    onFID(addToQueue);
+    onINP(addToQueue);
+    onTTFB(addToQueue);
+    onLCP(addToQueue);
 }
 
 export function flushVitalQueue() {
-    const queue = window.lli.vitalQueue
+    const queue = window.lli.vitalQueue;
     if (queue.size > 0) {
-        send([...queue], undefined, undefined, "/vitals")
-        queue.clear()
+        send([...queue], undefined, undefined, "/vitals");
+        queue.clear();
     }
-}
+}