@formo/analytics 1.13.4 → 1.14.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@formo/analytics",
-  "version": "1.13.4",
+  "version": "1.14.2",
   "repository": {
     "type": "git",
-    "url": "https://github.com/getformo/sdk.git"
+    "url": "git+https://github.com/getformo/sdk.git"
   },
   "main": "dist/cjs/src/index.js",
   "types": "dist/esm/src/index.d.ts",
@@ -21,9 +21,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@highlight-run/react": "^7.0.2",
-    "axios": "^1.7.7",
-    "highlight.run": "^9.5.2",
+    "@fingerprintjs/fingerprintjs": "^4.6.0",
+    "fetch-retry": "^6.0.0",
+    "is-network-error": "^1.1.0",
     "mipd": "^0.0.7"
   },
   "devDependencies": {
@@ -77,7 +77,8 @@
     "test": "mocha --require ts-node/register test/**/*.ts",
     "test-watch": "nodemon --config test.nodemon.json",
     "prepare": "husky install",
-    "commit": "git add . && cz"
+    "commit": "git add . && cz",
+    "pub": "yarn build && npm publish"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.34",

package/src/FormoAnalytics.ts

@@ -1,4 +1,3 @@
-import axios from "axios";
 import { createStore, EIP6963ProviderDetail } from "mipd";
 import {
   COUNTRY_LIST,
@@ -6,7 +5,6 @@ import {
   EVENTS_API_URL,
   Event,
 } from "./constants";
-import { H } from "highlight.run";
 import {
   ChainID,
   Address,
@@ -17,8 +15,11 @@ import {
   RPCError,
   SignatureStatus,
   TransactionStatus,
+  RequestEvent,
 } from "./types";
-import { toSnakeCase } from "./lib/utils";
+import { session, isLocalhost, toSnakeCase, isAddress } from "./lib";
+import { SESSION_IDENTIFIED_KEY } from "./constants";
+import { EventQueue } from "./lib/queue";
 
 interface IFormoAnalytics {
   page(): void;
@@ -62,19 +63,32 @@ interface IFormoAnalytics {
 export class FormoAnalytics implements IFormoAnalytics {
   private _provider?: EIP1193Provider;
   private _providerListeners: Record<string, (...args: unknown[]) => void> = {};
+  private session: FormoAnalyticsSession;
+  private eventQueue: EventQueue;
 
   config: Config;
   currentChainId?: ChainID;
   currentConnectedAddress?: Address;
 
   private constructor(
-    public readonly apiKey: string,
+    public readonly writeKey: string,
     public options: Options = {}
   ) {
     this.config = {
-      apiKey: apiKey,
+      writeKey,
+      trackLocalhost: options.trackLocalhost || false,
     };
 
+    this.session = new FormoAnalyticsSession();
+
+    this.eventQueue = new EventQueue(this.config.writeKey, {
+      url: EVENTS_API_URL,
+      flushAt: options.flushAt,
+      retryCount: options.retryCount,
+      maxQueueSize: options.maxQueueSize,
+      flushInterval: options.flushInterval,
+    });
+
     // TODO: replace with eip6963
     const provider = options.provider || window?.ethereum;
     if (provider) {
@@ -86,10 +100,10 @@ export class FormoAnalytics implements IFormoAnalytics {
   }
 
   static async init(
-    apiKey: string,
+    writeKey: string,
     options?: Options
   ): Promise<FormoAnalytics> {
-    const analytics = new FormoAnalytics(apiKey, options);
+    const analytics = new FormoAnalytics(writeKey, options);
 
     // Identify
     const providers = await analytics.getProviders();
@@ -264,7 +278,7 @@ export class FormoAnalytics implements IFormoAnalytics {
   }
 
   /**
-   * Emits a identify event with current wallet address.
+   * Emits an identify event with current wallet address.
    * @param {Address} params.address
    * @returns {Promise<void>}
    */
@@ -273,17 +287,21 @@ export class FormoAnalytics implements IFormoAnalytics {
     providerName,
     rdns,
   }: {
-    address: Address;
+    address: Address | null;
     providerName?: string;
     rdns?: string;
   }): Promise<void> {
-    if (address) {
-      await this.trackEvent(Event.IDENTIFY, {
-        address,
-        providerName,
-        rdns,
-      });
-    }
+    if (this.session.isIdentified())
+      return console.warn(
+        "FormoAnalytics::identify: Wallet already identified in this session"
+      );
+
+    this.session.identify();
+    await this.trackEvent(Event.IDENTIFY, {
+      address,
+      providerName,
+      rdns,
+    });
   }
 
   /**
@@ -302,7 +320,7 @@ export class FormoAnalytics implements IFormoAnalytics {
 
   private trackProvider(provider: EIP1193Provider): void {
     if (provider === this._provider) {
-      console.log("Provider already tracked.");
+      console.warn("FormoAnalytics::trackProvider: Provider already tracked.");
       return;
     }
 
@@ -535,8 +553,8 @@ export class FormoAnalytics implements IFormoAnalytics {
   }
 
   private async trackFirstPageHit(): Promise<void> {
-    if (sessionStorage.getItem(CURRENT_URL_KEY) === null) {
-      sessionStorage.setItem(CURRENT_URL_KEY, window.location.href);
+    if (session.get(CURRENT_URL_KEY) === null) {
+      session.set(CURRENT_URL_KEY, window.location.href);
     }
 
     return this.trackPageHit();
@@ -562,70 +580,48 @@ export class FormoAnalytics implements IFormoAnalytics {
   }
 
   private async onLocationChange(): Promise<void> {
-    const currentUrl = sessionStorage.getItem(CURRENT_URL_KEY);
+    const currentUrl = session.get(CURRENT_URL_KEY);
 
     if (currentUrl !== window.location.href) {
-      sessionStorage.setItem(CURRENT_URL_KEY, window.location.href);
+      session.set(CURRENT_URL_KEY, window.location.href);
       this.trackPageHit();
     }
   }
 
   private trackPageHit(): void {
     const pathname = window.location.pathname;
-    const href = window.location.href;
     const hash = window.location.hash;
 
+    if (!this.config.trackLocalhost && isLocalhost()) {
+      return console.warn(
+        "FormoAnalytics::trackPageHit: Ignoring event because website is running locally"
+      );
+    }
+
     setTimeout(async () => {
       this.trackEvent(Event.PAGE, {
         pathname,
-        href,
         hash,
       });
     }, 300);
   }
 
-  // TODO: refactor this with event queue and flushing
-  // https://linear.app/getformo/issue/P-835/sdk-refactor-retries-with-event-queue-and-batching
   private async trackEvent(action: string, payload: any): Promise<void> {
     const address = await this.getAddress();
 
-    const requestData = {
-      address: address,
+    const requestData: RequestEvent = {
+      address,
       timestamp: new Date().toISOString(),
       action,
       version: "1",
       payload: await this.buildEventPayload(toSnakeCase(payload)),
     };
 
-    try {
-      const response = await axios.post(
-        EVENTS_API_URL,
-        JSON.stringify(requestData),
-        {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${this.config.apiKey}`,
-          },
-        }
-      );
-
-      if (response.status >= 200 && response.status < 300) {
-        console.log(
-          `Event sent successfully: ${this.getActionDescriptor(
-            action,
-            payload
-          )}`
-        );
-      } else {
-        throw new Error(`Failed with status: ${response.status}`);
-      }
-    } catch (error) {
-      H.consumeError(
-        error as Error,
-        `Request data: ${JSON.stringify(requestData)}`
-      );
-      console.error(`Event "${action}" failed. Error: ${error}`);
-    }
+    await this.eventQueue.enqueue(requestData, (err, _, data) => {
+      if (err) {
+        console.error(err);
+      } else console.log(`Events sent successfully: ${data.length} events`);
+    });
   }
 
   /*
@@ -646,9 +642,10 @@ export class FormoAnalytics implements IFormoAnalytics {
   }
 
   private async identifyAll(providers: EIP6963ProviderDetail[]): Promise<void> {
-    for (const { provider, info } of providers) {
-      try {
+    try {
+      for (const { provider, info } of providers) {
         const accounts = await this.getAccounts(provider);
+        // Identify with accounts
         if (accounts && accounts.length > 0) {
           for (const address of accounts) {
             await this.identify({
@@ -657,8 +654,17 @@ export class FormoAnalytics implements IFormoAnalytics {
               rdns: info.rdns,
             });
           }
+        } else {
+          // Identify without accounts
+          await this.identify({
+            address: null,
+            providerName: info.name,
+            rdns: info.rdns,
+          });
         }
-      } catch (err) {}
+      }
+    } catch (err) {
+      console.log("identifying all => err", err);
     }
   }
 
@@ -668,7 +674,7 @@ export class FormoAnalytics implements IFormoAnalytics {
 
   private async getAddress(): Promise<Address | null> {
     if (this.currentConnectedAddress) return this.currentConnectedAddress;
-    if (!this.provider) {
+    if (!this?.provider) {
       console.log("FormoAnalytics::getAddress: the provider is not set");
       return null;
     }
@@ -676,7 +682,7 @@ export class FormoAnalytics implements IFormoAnalytics {
     try {
       const accounts = await this.getAccounts();
       if (accounts && accounts.length > 0) {
-        return accounts[0];
+        return isAddress(accounts[0]) ? accounts[0] : null;
       }
     } catch (err) {
       console.log("Failed to fetch accounts from provider:", err);
@@ -694,7 +700,7 @@ export class FormoAnalytics implements IFormoAnalytics {
         method: "eth_accounts",
       });
       if (!res || res.length === 0) return null;
-      return res;
+      return res.filter(isAddress);
     } catch (err) {
       if ((err as any).code !== 4001) {
         console.log(
@@ -764,18 +770,19 @@ export class FormoAnalytics implements IFormoAnalytics {
 
     const location = this.getLocation();
     const language = this.getLanguage();
-    const address = await this.getAddress();
 
     // common browser properties
     return {
       "user-agent": window.navigator.userAgent,
-      address,
+      href: url.href,
       locale: language,
       location,
       referrer: document.referrer,
       utm_source: params.get("utm_source"),
       utm_medium: params.get("utm_medium"),
       utm_campaign: params.get("utm_campaign"),
+      utm_content: params.get("utm_content"),
+      utm_term: params.get("utm_term"),
       ref: params.get("ref"),
       ...eventSpecificPayload,
     };
@@ -828,8 +835,21 @@ export class FormoAnalytics implements IFormoAnalytics {
       value,
     };
   }
+}
+
+interface IFormoAnalyticsSession {
+  isIdentified(): boolean;
+  identify(): void;
+}
+
+class FormoAnalyticsSession implements IFormoAnalyticsSession {
+  constructor() {}
+
+  public isIdentified(): boolean {
+    return session.get(SESSION_IDENTIFIED_KEY) === true;
+  }
 
-  private getActionDescriptor(action: string, payload: any): string {
-    return `${action}${payload.status ? ` ${payload.status}` : ""}`;
+  public identify(): void {
+    session.set(SESSION_IDENTIFIED_KEY, true);
   }
 }

package/src/FormoAnalyticsProvider.tsx

@@ -1,96 +1,61 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  useRef,
-} from 'react';
-import { FormoAnalytics } from './FormoAnalytics';
-import { FormoAnalyticsProviderProps } from './types';
-import { ErrorBoundary } from '@highlight-run/react';
-import { H } from 'highlight.run';
-
-const HIGHLIGHT_PROJECT_ID = process.env.REACT_APP_HIGHLIGHT_PROJECT_ID;
+import { createContext, useContext, useEffect, useState, useRef } from "react";
+import { FormoAnalytics } from "./FormoAnalytics";
+import { FormoAnalyticsProviderProps } from "./types";
 
 export const FormoAnalyticsContext = createContext<FormoAnalytics | undefined>(
   undefined
 );
 
-export const FormoAnalyticsProvider = ({
-  apiKey,
+export const FormoAnalyticsProvider = (props: FormoAnalyticsProviderProps) => {
+  const { writeKey, disabled, children } = props;
+
+  // Keep the app running without analytics if no Write Key is provided or disabled
+  if (!writeKey) {
+    console.error("FormoAnalyticsProvider: No Write Key provided");
+    return children;
+  }
+
+  if (disabled) {
+    console.warn("FormoAnalytics is disabled");
+    return children;
+  }
+
+  return <InitializedAnalytics {...props} />;
+};
+
+const InitializedAnalytics = ({
+  writeKey,
   options,
-  disabled,
   children,
 }: FormoAnalyticsProviderProps) => {
   const [sdk, setSdk] = useState<FormoAnalytics | undefined>();
-  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) => {
+  const initializeFormoAnalytics = async (writeKey: string, options: any) => {
     try {
-      const sdkInstance = await FormoAnalytics.init(apiKey, options);
+      const sdkInstance = await FormoAnalytics.init(writeKey, options);
       setSdk(sdkInstance);
-      console.log('FormoAnalytics SDK initialized successfully');
+      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
+      console.error("Failed to initialize FormoAnalytics SDK", error);
     }
   };
 
   useEffect(() => {
     const initialize = async () => {
-      if (!apiKey) {
-        console.error('FormoAnalyticsProvider: No API key provided');
-        return;
-      }
-      if (disabled) {
-        console.warn('FormoAnalytics is disabled');
-        return;
-      }
       if (initializedStartedRef.current) return;
       initializedStartedRef.current = true;
 
-      await initializeHighlight();
-      await initializeFormoAnalytics(apiKey, options);
+      await initializeFormoAnalytics(writeKey!, options);
     };
 
     initialize();
-  }, [apiKey, disabled, options]);
-
-  if (!isInitialized) {
-    // Optionally show a loading state until initialization attempt finishes
-    return <div>Loading analytics...</div>;
-  }
+  }, [writeKey, options]);
 
   return (
-    <ErrorBoundary onError={(error, info) => H?.consumeError(error, info)}>
-      <FormoAnalyticsContext.Provider value={sdk}>
-        {children}
-      </FormoAnalyticsContext.Provider>
-    </ErrorBoundary>
+    <FormoAnalyticsContext.Provider value={sdk}>
+      {children}
+    </FormoAnalyticsContext.Provider>
   );
 };
 
@@ -98,7 +63,7 @@ export const useFormoAnalytics = () => {
   const context = useContext(FormoAnalyticsContext);
 
   if (!context) {
-    console.warn('useFormoAnalytics called without a valid context');
+    console.warn("useFormoAnalytics called without a valid context");
   }
 
   return context; // Return undefined if SDK is not initialized, handle accordingly in consumer

package/src/constants/base.ts

@@ -0,0 +1,2 @@
+export const SESSION_PREFIX = "f0-";
+export const SESSION_IDENTIFIED_KEY = SESSION_PREFIX + "session_identified";