@kryptonhq/analytics 0.1.1 → 0.1.3

package/dist/index.js

@@ -39,25 +39,31 @@ function generateId() {
 }
 function getSessionId() {
   const key = "_krypton_sid";
-  if (typeof sessionStorage !== "undefined") {
-    let sid = sessionStorage.getItem(key);
-    if (!sid) {
-      sid = generateId();
-      sessionStorage.setItem(key, sid);
+  try {
+    if (typeof sessionStorage !== "undefined") {
+      let sid = sessionStorage.getItem(key);
+      if (!sid) {
+        sid = generateId();
+        sessionStorage.setItem(key, sid);
+      }
+      return sid;
     }
-    return sid;
+  } catch {
   }
   return generateId();
 }
 function getDistinctId() {
   const key = "_krypton_did";
-  if (typeof localStorage !== "undefined") {
-    let did = localStorage.getItem(key);
-    if (!did) {
-      did = generateId();
-      localStorage.setItem(key, did);
+  try {
+    if (typeof localStorage !== "undefined") {
+      let did = localStorage.getItem(key);
+      if (!did) {
+        did = generateId();
+        localStorage.setItem(key, did);
+      }
+      return did;
     }
-    return did;
+  } catch {
   }
   return generateId();
 }
@@ -111,6 +117,7 @@ var Krypton = class {
     this.geoContext = null;
     this.serverConfig = null;
     this.configFetched = false;
+    this.logPrefix = "[Krypton SDK]";
     this.config = {
       autoPageview: true,
       heatmap: false,
@@ -137,6 +144,8 @@ var Krypton = class {
       if (this.config.consentRequired && this.config.showConsentBanner && !this.hasStoredConsent()) {
         this.showConsentBanner();
       }
+    }).catch((err) => {
+      this.warn("Initialization failed", err);
     });
   }
   resolveInitialConsent() {
@@ -156,14 +165,18 @@ var Krypton = class {
     return `_krypton_consent_${this.config.apiKey}`;
   }
   hasStoredConsent() {
-    if (typeof localStorage === "undefined") return false;
-    return !!localStorage.getItem(this.consentStorageKey());
+    try {
+      if (typeof localStorage === "undefined") return false;
+      return !!localStorage.getItem(this.consentStorageKey());
+    } catch {
+      return false;
+    }
   }
   loadStoredConsent() {
-    if (typeof localStorage === "undefined") return null;
-    const raw = localStorage.getItem(this.consentStorageKey());
-    if (!raw) return null;
     try {
+      if (typeof localStorage === "undefined") return null;
+      const raw = localStorage.getItem(this.consentStorageKey());
+      if (!raw) return null;
       const parsed = JSON.parse(raw);
       return {
         analytics: !!parsed.analytics,
@@ -175,8 +188,11 @@ var Krypton = class {
     }
   }
   persistConsent() {
-    if (typeof localStorage === "undefined") return;
-    localStorage.setItem(this.consentStorageKey(), JSON.stringify(this.consent));
+    try {
+      if (typeof localStorage === "undefined") return;
+      localStorage.setItem(this.consentStorageKey(), JSON.stringify(this.consent));
+    } catch {
+    }
   }
   promotePersistentIds() {
     this.distinctId = getDistinctId();
@@ -193,7 +209,12 @@ var Krypton = class {
   async fetchConfig() {
     if (typeof window === "undefined") return;
     const cacheKey = `_krypton_config_${this.config.apiKey}`;
-    const cached = sessionStorage.getItem(cacheKey);
+    let cached = null;
+    try {
+      cached = sessionStorage.getItem(cacheKey);
+    } catch {
+      cached = null;
+    }
     if (cached) {
       try {
         const parsed = JSON.parse(cached);
@@ -213,44 +234,63 @@ var Krypton = class {
         const data = await res.json();
         this.serverConfig = data;
         this.configFetched = true;
-        sessionStorage.setItem(cacheKey, JSON.stringify({ ...data, _ts: Date.now() }));
+        try {
+          sessionStorage.setItem(cacheKey, JSON.stringify({ ...data, _ts: Date.now() }));
+        } catch {
+        }
       }
     } catch {
     }
   }
   setupTracking() {
-    this.flushTimer = setInterval(() => this.flush(), this.config.flushInterval);
+    this.flushTimer = setInterval(() => {
+      void this.flush();
+    }, this.config.flushInterval);
     if (typeof window === "undefined") return;
-    window.addEventListener("beforeunload", () => this.flush());
+    window.addEventListener("beforeunload", () => {
+      void this.flush();
+    });
     if (this.config.autoPageview && this.canTrackAnalytics()) {
       this.trackPageview();
     }
     const originalPushState = history.pushState;
     history.pushState = (...args) => {
-      originalPushState.apply(history, args);
-      if (this.config.autoPageview && this.canTrackAnalytics()) {
-        setTimeout(() => this.trackPageview(), 0);
-      }
-      if (this.isHeatmapFeatureEnabled()) {
-        setTimeout(() => this.captureSnapshot(), 0);
+      try {
+        originalPushState.apply(history, args);
+        if (this.config.autoPageview && this.canTrackAnalytics()) {
+          setTimeout(() => this.trackPageview(), 0);
+        }
+        if (this.isHeatmapFeatureEnabled()) {
+          setTimeout(() => this.captureSnapshot(), 0);
+        }
+      } catch (err) {
+        this.warn("pushState hook failed", err);
       }
     };
     const originalReplaceState = history.replaceState;
     history.replaceState = (...args) => {
-      originalReplaceState.apply(history, args);
-      if (this.config.autoPageview && this.canTrackAnalytics()) {
-        setTimeout(() => this.trackPageview(), 0);
-      }
-      if (this.isHeatmapFeatureEnabled()) {
-        setTimeout(() => this.captureSnapshot(), 0);
+      try {
+        originalReplaceState.apply(history, args);
+        if (this.config.autoPageview && this.canTrackAnalytics()) {
+          setTimeout(() => this.trackPageview(), 0);
+        }
+        if (this.isHeatmapFeatureEnabled()) {
+          setTimeout(() => this.captureSnapshot(), 0);
+        }
+      } catch (err) {
+        this.warn("replaceState hook failed", err);
       }
     };
     window.addEventListener("popstate", () => {
-      if (this.config.autoPageview && this.canTrackAnalytics()) {
-        setTimeout(() => this.trackPageview(), 0);
-      }
-      if (this.isHeatmapFeatureEnabled()) {
-        setTimeout(() => this.captureSnapshot(), 0);
+      try {
+        if (this.config.autoPageview && this.canTrackAnalytics()) {
+          setTimeout(() => this.trackPageview(), 0);
+        }
+        if (this.isHeatmapFeatureEnabled()) {
+          setTimeout(() => this.captureSnapshot(), 0);
+        }
+      } catch (err) {
+        this.warn("popstate hook failed", err);
       }
     });
     if (this.isHeatmapFeatureEnabled()) {
@@ -307,58 +347,68 @@ var Krypton = class {
     `;
     const remove = () => {
       banner.remove();
+      try {
+        if (document.body) document.body.style.cursor = "";
+        if (document.documentElement) document.documentElement.style.cursor = "";
+      } catch {
+      }
     };
     const readValue = (id) => {
       const el = document.getElementById(id);
       return !!el?.checked;
     };
     banner.querySelector("#krypton-consent-save")?.addEventListener("click", () => {
-      this.setConsent({
+      const next = {
         analytics: readValue("krypton-consent-analytics"),
         heatmaps: readValue("krypton-consent-heatmaps"),
         geo: readValue("krypton-consent-geo")
-      });
+      };
       remove();
+      setTimeout(() => this.setConsent(next), 0);
     });
     banner.querySelector("#krypton-consent-all")?.addEventListener("click", () => {
-      this.setConsent({ analytics: true, heatmaps: true, geo: true });
       remove();
+      setTimeout(() => this.setConsent({ analytics: true, heatmaps: true, geo: true }), 0);
     });
     banner.querySelector("#krypton-consent-none")?.addEventListener("click", () => {
-      this.setConsent({ analytics: false, heatmaps: false, geo: false });
       remove();
+      setTimeout(() => this.setConsent({ analytics: false, heatmaps: false, geo: false }), 0);
     });
     document.body.appendChild(banner);
   }
   /** Set one or more consent categories and apply changes immediately. */
   setConsent(next, persist = true) {
-    const prev = { ...this.consent };
-    this.consent = {
-      analytics: next.analytics ?? prev.analytics,
-      heatmaps: next.heatmaps ?? prev.heatmaps,
-      geo: next.geo ?? prev.geo
-    };
-    if (persist) {
-      this.persistConsent();
-    }
-    if (!prev.analytics && this.consent.analytics) {
-      this.promotePersistentIds();
-      if (this.config.autoPageview) {
-        this.trackPageview();
+    try {
+      const prev = { ...this.consent };
+      this.consent = {
+        analytics: next.analytics ?? prev.analytics,
+        heatmaps: next.heatmaps ?? prev.heatmaps,
+        geo: next.geo ?? prev.geo
+      };
+      if (persist) {
+        this.persistConsent();
       }
-    }
-    if (prev.analytics && !this.consent.analytics) {
-      this.eventQueue = [];
-    }
-    if (!prev.heatmaps && this.isHeatmapFeatureEnabled()) {
-      this.setupHeatmap();
-      this.captureSnapshot();
-    }
-    if (prev.heatmaps && !this.consent.heatmaps) {
-      this.heatmapQueue = [];
-    }
-    if (!prev.geo && this.consent.geo) {
-      this.captureGeoOnce();
+      if (!prev.analytics && this.consent.analytics) {
+        this.promotePersistentIds();
+        if (this.config.autoPageview) {
+          this.trackPageview();
+        }
+      }
+      if (prev.analytics && !this.consent.analytics) {
+        this.eventQueue = [];
+      }
+      if (!prev.heatmaps && this.isHeatmapFeatureEnabled()) {
+        this.setupHeatmap();
+        this.captureSnapshot();
+      }
+      if (prev.heatmaps && !this.consent.heatmaps) {
+        this.heatmapQueue = [];
+      }
+      if (!prev.geo && this.consent.geo) {
+        this.captureGeoOnce();
+      }
+    } catch (err) {
+      this.warn("setConsent failed", err);
     }
   }
   getConsent() {
@@ -376,60 +426,81 @@ var Krypton = class {
   }
   /** Identify a user with a custom distinct ID */
   identify(distinctId) {
-    this.distinctId = distinctId;
-    if (typeof localStorage !== "undefined" && this.canTrackAnalytics()) {
-      localStorage.setItem("_krypton_did", distinctId);
+    try {
+      this.distinctId = distinctId;
+      if (this.canTrackAnalytics()) {
+        try {
+          if (typeof localStorage !== "undefined") {
+            localStorage.setItem("_krypton_did", distinctId);
+          }
+        } catch {
+        }
+      }
+    } catch (err) {
+      this.warn("identify failed", err);
     }
   }
   /** Track a pageview */
   trackPageview(properties) {
-    if (!this.canTrackAnalytics()) return;
-    this.track("$pageview", {
-      ...properties
-    });
+    try {
+      if (!this.canTrackAnalytics()) return;
+      this.track("$pageview", {
+        ...properties
+      });
+    } catch (err) {
+      this.warn("trackPageview failed", err);
+    }
   }
   /** Track a custom event */
   track(eventName, properties) {
-    if (!this.canTrackAnalytics()) return;
-    const utm = getUTMParams();
-    const mergedProperties = { ...properties || {} };
-    if (this.consent.geo && this.geoContext) {
-      mergedProperties.geo = this.geoContext;
-    }
-    const event = {
-      project_id: this.config.apiKey,
-      distinct_id: this.distinctId,
-      event_name: eventName,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      properties: mergedProperties,
-      page_url: typeof window !== "undefined" ? window.location.href : "",
-      page_title: typeof document !== "undefined" ? document.title : "",
-      referrer: typeof document !== "undefined" ? document.referrer : "",
-      utm_source: utm.utm_source || "",
-      utm_medium: utm.utm_medium || "",
-      utm_campaign: utm.utm_campaign || "",
-      utm_term: utm.utm_term || "",
-      utm_content: utm.utm_content || "",
-      device_type: getDeviceType(),
-      browser: this.getBrowser(),
-      screen_width: typeof window !== "undefined" ? window.screen.width : 0,
-      screen_height: typeof window !== "undefined" ? window.screen.height : 0,
-      session_id: this.sessionId
-    };
-    this.eventQueue.push(event);
-    if (this.eventQueue.length >= this.config.batchSize) {
-      this.flush();
+    try {
+      if (!this.canTrackAnalytics()) return;
+      const utm = getUTMParams();
+      const mergedProperties = { ...properties || {} };
+      if (this.consent.geo && this.geoContext) {
+        mergedProperties.geo = this.geoContext;
+      }
+      const event = {
+        project_id: this.config.apiKey,
+        distinct_id: this.distinctId,
+        event_name: eventName,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        properties: mergedProperties,
+        page_url: typeof window !== "undefined" ? window.location.href : "",
+        page_title: typeof document !== "undefined" ? document.title : "",
+        referrer: typeof document !== "undefined" ? document.referrer : "",
+        utm_source: utm.utm_source || "",
+        utm_medium: utm.utm_medium || "",
+        utm_campaign: utm.utm_campaign || "",
+        utm_term: utm.utm_term || "",
+        utm_content: utm.utm_content || "",
+        device_type: getDeviceType(),
+        browser: this.getBrowser(),
+        screen_width: typeof window !== "undefined" ? window.screen.width : 0,
+        screen_height: typeof window !== "undefined" ? window.screen.height : 0,
+        session_id: this.sessionId
+      };
+      this.eventQueue.push(event);
+      if (this.eventQueue.length >= this.config.batchSize) {
+        void this.flush();
+      }
+    } catch (err) {
+      this.warn("track failed", err);
     }
   }
   async flush() {
-    await Promise.all([this.flushEvents(), this.flushHeatmapEvents()]);
+    try {
+      await Promise.all([this.flushEvents(), this.flushHeatmapEvents()]);
+    } catch (err) {
+      this.warn("flush failed", err);
+    }
   }
   shutdown() {
     if (this.flushTimer) {
       clearInterval(this.flushTimer);
       this.flushTimer = null;
     }
-    this.flush();
+    void this.flush();
   }
   captureGeoOnce() {
     if (this.geoRequested) return;
@@ -462,14 +533,8 @@ var Krypton = class {
       api_key: this.config.apiKey,
       events
     };
-    try {
-      await fetch(`${this.config.endpoint}/api/v1/ingest/batch`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
-        keepalive: true
-      });
-    } catch {
+    const ok = await this.safePost(`${this.config.endpoint}/api/v1/ingest/batch`, payload);
+    if (!ok) {
       if (this.eventQueue.length < this.config.batchSize * 5) {
         this.eventQueue.unshift(...events);
       }
@@ -482,14 +547,8 @@ var Krypton = class {
       api_key: this.config.apiKey,
       events
     };
-    try {
-      await fetch(`${this.config.endpoint}/api/v1/heatmap`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
-        keepalive: true
-      });
-    } catch {
+    const ok = await this.safePost(`${this.config.endpoint}/api/v1/heatmap`, payload);
+    if (!ok) {
       if (this.heatmapQueue.length < this.config.batchSize * 5) {
         this.heatmapQueue.unshift(...events);
       }
@@ -520,13 +579,7 @@ var Krypton = class {
           page_height: document.documentElement.scrollHeight,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
-        fetch(`${this.config.endpoint}/api/v1/snapshot`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-          keepalive: true
-        }).catch(() => {
-        });
+        void this.safePost(`${this.config.endpoint}/api/v1/snapshot`, payload);
       } catch {
       }
     }, 1e3);
@@ -538,51 +591,83 @@ var Krypton = class {
     this.captureSnapshot();
     document.addEventListener("click", (e) => {
       if (!this.isHeatmapFeatureEnabled()) return;
-      const target = e.target;
-      this.heatmapQueue.push({
-        project_id: this.config.apiKey,
-        distinct_id: this.distinctId,
-        session_id: this.sessionId,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        page_url: window.location.href,
-        interaction_type: "click",
-        x: e.clientX + window.scrollX,
-        y: e.clientY + window.scrollY,
-        viewport_width: window.innerWidth,
-        viewport_height: window.innerHeight,
-        page_width: document.documentElement.scrollWidth,
-        page_height: document.documentElement.scrollHeight,
-        selector: getSelector(target)
-      });
-    });
-    let maxScrollDepth = 0;
-    let scrollTimeout = null;
-    window.addEventListener("scroll", () => {
-      if (!this.isHeatmapFeatureEnabled()) return;
-      const scrollTop = window.scrollY || document.documentElement.scrollTop;
-      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-      const depth = docHeight > 0 ? scrollTop / docHeight * 100 : 0;
-      if (depth > maxScrollDepth) {
-        maxScrollDepth = depth;
-      }
-      if (scrollTimeout) clearTimeout(scrollTimeout);
-      scrollTimeout = setTimeout(() => {
+      try {
+        const target = e.target;
         this.heatmapQueue.push({
           project_id: this.config.apiKey,
           distinct_id: this.distinctId,
           session_id: this.sessionId,
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           page_url: window.location.href,
-          interaction_type: "scroll",
-          scroll_depth: maxScrollDepth,
+          interaction_type: "click",
+          x: e.clientX + window.scrollX,
+          y: e.clientY + window.scrollY,
           viewport_width: window.innerWidth,
           viewport_height: window.innerHeight,
           page_width: document.documentElement.scrollWidth,
-          page_height: document.documentElement.scrollHeight
+          page_height: document.documentElement.scrollHeight,
+          selector: getSelector(target)
         });
-      }, 500);
+      } catch (err) {
+        this.warn("heatmap click capture failed", err);
+      }
+    });
+    let maxScrollDepth = 0;
+    let scrollTimeout = null;
+    window.addEventListener("scroll", () => {
+      if (!this.isHeatmapFeatureEnabled()) return;
+      try {
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const depth = docHeight > 0 ? scrollTop / docHeight * 100 : 0;
+        if (depth > maxScrollDepth) {
+          maxScrollDepth = depth;
+        }
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          this.heatmapQueue.push({
+            project_id: this.config.apiKey,
+            distinct_id: this.distinctId,
+            session_id: this.sessionId,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            page_url: window.location.href,
+            interaction_type: "scroll",
+            scroll_depth: maxScrollDepth,
+            viewport_width: window.innerWidth,
+            viewport_height: window.innerHeight,
+            page_width: document.documentElement.scrollWidth,
+            page_height: document.documentElement.scrollHeight
+          });
+        }, 500);
+      } catch (err) {
+        this.warn("heatmap scroll capture failed", err);
+      }
     });
   }
+  async safePost(url, payload) {
+    try {
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+        keepalive: true
+      });
+      if (!res.ok) {
+        this.warn(`API request failed (${res.status})`, { url });
+        return false;
+      }
+      return true;
+    } catch (err) {
+      this.warn("API request failed", { url, err });
+      return false;
+    }
+  }
+  warn(message, details) {
+    try {
+      console.warn(`${this.logPrefix} ${message}`, details ?? "");
+    } catch {
+    }
+  }
   getBrowser() {
     if (typeof navigator === "undefined") return "unknown";
     const ua = navigator.userAgent;