@formo/analytics 1.11.13 → 1.11.14-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formo/analytics",
-  "version": "1.11.13",
+  "version": "1.11.14-alpha.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/getformo/sdk.git"
@@ -63,7 +63,7 @@
     "sinon-chai": "^3.7.0",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.8.2",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   },

package/src/FormoAnalytics.ts

@@ -2,7 +2,6 @@ import axios from "axios";
 import {
   COUNTRY_LIST,
   EVENTS_API_URL,
-  SESSION_STORAGE_ID_KEY,
   Event,
 } from "./constants";
 import { H } from "highlight.run";
@@ -12,7 +11,7 @@ interface IFormoAnalytics {
   /**
    * Initializes the FormoAnalytics instance with the provided API key and project ID.
    */
-  init(apiKey: string, options: Options): Promise<FormoAnalytics>;
+  init(apiKey: string, options?: Options): Promise<FormoAnalytics>;
 
   /**
    * Tracks page visit events.
@@ -51,7 +50,6 @@ export class FormoAnalytics implements IFormoAnalytics {
 
   private walletAddressSessionKey = "walletAddress";
   private config: Config;
-  private sessionIdKey: string = SESSION_STORAGE_ID_KEY;
   private timezoneToCountry: Record<string, string> = COUNTRY_LIST;
 
   currentChainId?: string | null;
@@ -72,7 +70,10 @@ export class FormoAnalytics implements IFormoAnalytics {
     }
   }
 
-  static async init(apiKey: string, options: Options): Promise<FormoAnalytics> {
+  static async init(
+    apiKey: string,
+    options?: Options
+  ): Promise<FormoAnalytics> {
     const config = {
       token: apiKey,
     };
@@ -86,64 +87,20 @@ export class FormoAnalytics implements IFormoAnalytics {
     return this._provider;
   }
 
-  private getSessionId() {
-    const existingSessionId = this.getCookieValue(this.sessionIdKey);
-
-    if (existingSessionId) {
-      return existingSessionId;
-    }
-
-    const newSessionId = this.generateSessionId();
-    return newSessionId;
-  }
-
-  private getOrigin(): string {
-    return window.location.origin || "ORIGIN_NOT_FOUND";
-  }
-
-  // Function to set the session cookie
-  private setSessionCookie(): void {
-    const sessionId = this.getSessionId();
-    let cookieValue = `${
-      this.sessionIdKey
-    }=${sessionId}; Max-Age=1800; path=/; secure; domain=${this.getOrigin()}`;
-    document.cookie = cookieValue;
-  }
-
-  // Function to generate a new session ID
-  private generateSessionId(): string {
-    return crypto.randomUUID();
-  }
-
-  // Function to get a cookie value by name
-  private getCookieValue(name: string): string | undefined {
-    const cookies = document.cookie.split(";").reduce((acc, cookie) => {
-      const [key, value] = cookie.split("=");
-      acc[key.trim()] = value;
-      return acc;
-    }, {} as Record<string, string>);
-    return cookies[name];
-  }
 
   // Function to send tracking data
   private async trackEvent(action: string, payload: any) {
     const maxRetries = 3;
     let attempt = 0;
 
-    this.setSessionCookie();
     const address = await this.getCurrentWallet();
 
     const requestData = {
       address: address,
-      session_id: this.getSessionId(),
       timestamp: new Date().toISOString(),
       action,
       version: "1",
-      payload: {
-        // common fields
-        ...this.getCommonTrackingFields(),
-        ...payload,
-      },
+      payload: await this.buildEventPayload(payload),
     };
 
     const sendRequest = async (): Promise<void> => {
@@ -190,24 +147,71 @@ export class FormoAnalytics implements IFormoAnalytics {
     await sendRequest();
   }
 
-  private getCommonTrackingFields() {
-    let location: string | undefined;
-    let language: string = "en";
+  // Function to track page hits
+  private trackPageHit() {
+    if (this.isAutomationEnvironment()) return;
+
+    const pathname = window.location.pathname;
+    const href = window.location.href;
+
+    setTimeout(async () => {
+      this.trackEvent(Event.PAGE, {
+        pathname,
+        href,
+      });
+    }, 300);
+  }
+
+  private isAutomationEnvironment(): boolean {
+    return (
+      window.__nightmare ||
+      window.navigator.webdriver ||
+      window.Cypress ||
+      false
+    );
+  }
+
+  private getUserLocation(): string | undefined {
     try {
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      location = this.timezoneToCountry[timezone];
-      language =
-        navigator.languages && navigator.languages.length
+      return this.timezoneToCountry[timezone];
+    } catch (error) {
+      console.error("Error resolving timezone:", error);
+      return undefined;
+    }
+  }
+
+  private getUserLanguage(): string {
+    try {
+      return (
+        (navigator.languages && navigator.languages.length
           ? navigator.languages[0]
-          : navigator.language || "en";
+          : navigator.language) || "en"
+      );
     } catch (error) {
-      console.error("Error resolving timezone or language:", error);
+      console.error("Error resolving language:", error);
+      return "en";
     }
+  }
 
+  async buildEventPayload(
+    eventSpecificPayload: Record<string, unknown> = {}
+  ): Promise<Record<string, unknown>> {
     const url = new URL(window.location.href);
     const params = new URLSearchParams(url.search);
+
+    const location = this.getUserLocation();
+    const language = this.getUserLanguage();
+
+    const address = await this.getAndStoreConnectedAddress();
+    if (address === null) {
+      console.warn("Wallet address could not be retrieved.");
+    }
+
+    // common fields
     return {
       "user-agent": window.navigator.userAgent,
+      address,
       locale: language,
       location,
       referrer: document.referrer,
@@ -215,24 +219,13 @@ export class FormoAnalytics implements IFormoAnalytics {
       utm_medium: params.get("utm_medium"),
       utm_campaign: params.get("utm_campaign"),
       ref: params.get("ref"),
+      ...eventSpecificPayload,
     };
   }
 
-  // Function to track page hits
-  private trackPageHit() {
-    if (window.__nightmare || window.navigator.webdriver || window.Cypress)
-      return;
-
-    setTimeout(() => {
-      this.trackEvent(Event.PAGE, {
-        pathname: window.location.pathname,
-        href: window.location.href,
-      });
-    }, 300);
-  }
-
   private trackProvider(provider: EIP1193Provider) {
     if (provider === this._provider) {
+      console.log("Provider already tracked.");
       return;
     }
 
@@ -250,6 +243,7 @@ export class FormoAnalytics implements IFormoAnalytics {
       }
     }
 
+    console.log("Tracking new provider:", provider);
     this._provider = provider;
 
     this.getCurrentWallet();
@@ -257,14 +251,33 @@ export class FormoAnalytics implements IFormoAnalytics {
     this.registerChainChangedListener();
   }
 
+  private async getAndStoreConnectedAddress(): Promise<string | null> {
+    console.log(
+      "Session data missing. Attempting to fetch address from provider."
+    );
+    try {
+      const accounts = await this.fetchAccounts();
+      if (accounts && accounts.length > 0) {
+        const address = accounts[0];
+        this.storeWalletAddress(address);
+        return address;
+      }
+    } catch (err) {
+      console.log("Failed to fetch accounts from provider:", err);
+    }
+    return null;
+  }
+
   private async getCurrentWallet() {
     if (!this.provider) {
       console.warn("FormoAnalytics::getCurrentWallet: the provider is not set");
       return;
     }
+
     const sessionData = sessionStorage.getItem(this.walletAddressSessionKey);
+
     if (!sessionData) {
-      return null;
+      return await this.getAndStoreConnectedAddress();
     }
 
     const parsedData = JSON.parse(sessionData);
@@ -272,7 +285,7 @@ export class FormoAnalytics implements IFormoAnalytics {
     const currentTime = Date.now();
 
     if (currentTime - parsedData.timestamp > sessionExpiry) {
-      console.warn("Session expired. Ignoring wallet address.");
+      console.log("Session expired. Ignoring wallet address.");
       sessionStorage.removeItem(this.walletAddressSessionKey); // Clear expired session data
       return "";
     }
@@ -281,16 +294,61 @@ export class FormoAnalytics implements IFormoAnalytics {
     return parsedData.address || "";
   }
 
+  // Utility to fetch accounts
+  private async fetchAccounts(): Promise<string[] | null> {
+    try {
+      const res: string[] | null | undefined = await this.provider?.request({
+        method: "eth_accounts",
+      });
+      if (!res || res.length === 0) {
+        console.log(
+          "FormoAnalytics::fetchAccounts: unable to get account. eth_accounts returned empty"
+        );
+        return null;
+      }
+      return res;
+    } catch (err) {
+      if ((err as any).code !== 4001) {
+        console.log(
+          "FormoAnalytics::fetchAccounts: eth_accounts threw an error",
+          err
+        );
+      }
+      return null;
+    }
+  }
+
+  // Utility to fetch chain ID
+  private async fetchChainId(): Promise<string | null> {
+    try {
+      const chainIdHex = await this.provider?.request<string>({
+        method: "eth_chainId",
+      });
+      if (!chainIdHex) {
+        console.log(
+          "FormoAnalytics::fetchChainId: chainIdHex is null or undefined"
+        );
+        return null;
+      }
+      return chainIdHex;
+    } catch (err) {
+      console.log(
+        "FormoAnalytics::fetchChainId: eth_chainId threw an error",
+        err
+      );
+      return null;
+    }
+  }
+
   private async getCurrentChainId(): Promise<string> {
     if (!this.provider) {
-      console.error("FormoAnalytics::getCurrentChainId: provider not set");
+      console.log("FormoAnalytics::getCurrentChainId: provider not set");
     }
-    const chainIdHex = await this.provider?.request<string>({
-      method: "eth_chainId",
-    });
+
+    const chainIdHex = await this.fetchChainId();
     // Because we're connected, the chainId cannot be null
     if (!chainIdHex) {
-      console.error(
+      console.log(
         `FormoAnalytics::getCurrentChainId: chainIdHex is: ${chainIdHex}`
       );
     }
@@ -342,64 +400,60 @@ export class FormoAnalytics implements IFormoAnalytics {
     this.storeWalletAddress(address);
   }
 
-  private onAddressDisconnected() {
-    if (!this.currentConnectedAddress) {
+  private handleDisconnection(chainId?: string, address?: string) {
+    if (!address) {
       return;
     }
-
     const payload = {
-      chain_id: this.currentChainId,
-      address: this.currentConnectedAddress,
+      chain_id: chainId || this.currentChainId,
+      address,
     };
     this.currentChainId = undefined;
     this.currentConnectedAddress = undefined;
     this.clearWalletAddress();
-
     return this.trackEvent(Event.DISCONNECT, payload);
   }
 
+  private onAddressDisconnected() {
+    if (!this.currentConnectedAddress) {
+      return;
+    }
+    this.handleDisconnection(this.currentChainId || undefined, this.currentConnectedAddress);
+  }
+
   private async onChainChanged(chainIdHex: string) {
     this.currentChainId = parseInt(chainIdHex).toString();
     if (!this.currentConnectedAddress) {
       if (!this.provider) {
-        console.error(
-          "error",
+        console.log(
           "FormoAnalytics::onChainChanged: provider not found. CHAIN_CHANGED not reported"
         );
         return;
       }
 
-      try {
-        const res: string[] | null | undefined = await this.provider.request({
-          method: "eth_accounts",
-        });
-        if (!res || res.length === 0) {
-          console.error(
-            "error",
-            "FormoAnalytics::onChainChanged: unable to get account. eth_accounts returned empty"
-          );
-          return;
-        }
-
-        this.currentConnectedAddress = res[0];
-      } catch (err) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if ((err as any).code !== 4001) {
-          // 4001: The request is rejected by the user , see https://docs.metamask.io/wallet/reference/provider-api/#errors
-          console.error(
-            "error",
-            `FormoAnalytics::onChainChanged: unable to get account. eth_accounts threw an error`,
-            err
-          );
-          return;
-        }
+      // Attempt to fetch and store the connected address
+      const address = await this.getAndStoreConnectedAddress();
+      if (!address) {
+        console.log(
+          "FormoAnalytics::onChainChanged: Unable to fetch or store connected address"
+        );
+        return;
       }
+
+      this.currentConnectedAddress = address[0];
     }
 
-    return this.chain({
-      chainId: this.currentChainId,
-      address: this.currentConnectedAddress,
-    });
+    // Proceed only if the address exists
+    if (this.currentConnectedAddress) {
+      return this.chain({
+        chainId: this.currentChainId,
+        address: this.currentConnectedAddress,
+      });
+    } else {
+      console.log(
+        "FormoAnalytics::onChainChanged: currentConnectedAddress is null despite fetch attempt"
+      );
+    }
   }
 
   /**
@@ -408,7 +462,7 @@ export class FormoAnalytics implements IFormoAnalytics {
    */
   private storeWalletAddress(address: string): void {
     if (!address) {
-      console.error("No wallet address provided to store.");
+      console.log("No wallet address provided to store.");
       return;
     }
 
@@ -459,15 +513,7 @@ export class FormoAnalytics implements IFormoAnalytics {
       // `disconnect` detection
       return;
     }
-
-    const payload = {
-      chain_id: params?.chainId || this.currentChainId,
-      address,
-    };
-    this.currentChainId = undefined;
-    this.currentConnectedAddress = undefined;
-
-    return this.trackEvent(Event.DISCONNECT, payload);
+    return this.handleDisconnection((params?.chainId?.toString() || this.currentChainId) as string, address);
   }
 
   chain({ chainId, address }: { chainId: ChainID; address?: string }) {

package/src/FormoAnalyticsProvider.tsx

@@ -26,6 +26,40 @@ export const FormoAnalyticsProvider = ({
   const [isInitialized, setIsInitialized] = useState(false);
   const initializedStartedRef = useRef(false);
 
+  const initializeHighlight = async () => {
+    if (HIGHLIGHT_PROJECT_ID) {
+      try {
+        H.init(HIGHLIGHT_PROJECT_ID, {
+          serviceName: 'formo-analytics-sdk',
+          tracingOrigins: true,
+          networkRecording: {
+            enabled: true,
+            recordHeadersAndBody: true,
+            urlBlocklist: [
+              'https://www.googleapis.com/identitytoolkit',
+              'https://securetoken.googleapis.com',
+            ],
+          },
+        });
+        console.log('Highlight.run initialized successfully');
+      } catch (error) {
+        console.error('Failed to initialize Highlight.run', error);
+      }
+    }
+  };
+
+  const initializeFormoAnalytics = async (apiKey: string, options: any) => {
+    try {
+      const sdkInstance = await FormoAnalytics.init(apiKey, options);
+      setSdk(sdkInstance);
+      console.log('FormoAnalytics SDK initialized successfully');
+    } catch (error) {
+      console.error('Failed to initialize FormoAnalytics SDK', error);
+    } finally {
+      setIsInitialized(true); // Ensure UI renders even after failure
+    }
+  };
+
   useEffect(() => {
     const initialize = async () => {
       if (!apiKey) {
@@ -38,37 +72,9 @@ export const FormoAnalyticsProvider = ({
       }
       if (initializedStartedRef.current) return;
       initializedStartedRef.current = true;
-      // Initialize Highlight.run if project ID is available
-      if (HIGHLIGHT_PROJECT_ID) {
-        try {
-          H.init(HIGHLIGHT_PROJECT_ID, {
-            serviceName: 'formo-analytics-sdk',
-            tracingOrigins: true,
-            networkRecording: {
-              enabled: true,
-              recordHeadersAndBody: true,
-              urlBlocklist: [
-                'https://www.googleapis.com/identitytoolkit',
-                'https://securetoken.googleapis.com',
-              ],
-            },
-          });
-          console.log('Highlight.run initialized successfully');
-        } catch (error) {
-          console.error('Failed to initialize Highlight.run', error);
-        }
-      }
 
-      // Initialize FormoAnalytics
-      try {
-        const sdkInstance = await FormoAnalytics.init(apiKey, options);
-        setSdk(sdkInstance);
-        console.log('FormoAnalytics SDK initialized successfully');
-      } catch (error) {
-        console.error('Failed to initialize FormoAnalytics SDK', error);
-      } finally {
-        setIsInitialized(true); // Ensure UI renders even after failure
-      }
+      await initializeHighlight();
+      await initializeFormoAnalytics(apiKey, options);
     };
 
     initialize();

package/src/constants/config.ts

@@ -1,5 +1,4 @@
 export const EVENTS_API_URL = 'https://events.formo.so/events';
-export const SESSION_STORAGE_ID_KEY = 'formo-analytics-session-id';
 export const COUNTRY_LIST = {
   // Africa
   'Africa/Accra': 'GH',

package/src/types/base.ts

@@ -8,7 +8,7 @@ export interface Options {
 
 export interface FormoAnalyticsProviderProps {
   apiKey: string;
-  options: Options;
+  options?: Options;
   disabled?: boolean;
   children: React.ReactNode;
 }