@formo/analytics 0.1.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@formo/analytics",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/getformo/sdk.git"
+  },
+  "main": "dist/cjs/src/index.js",
+  "types": "dist/esm/src/index.d.ts",
+  "module": "dist/esm/src/index.js",
+  "unpkg": "dist/index.umd.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    }
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.7.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.x",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@semantic-release/github": "^8.0.7",
+    "@testing-library/react": "^13.4.0",
+    "@types/chai": "^4.3.1",
+    "@types/jsdom": "^20.0.1",
+    "@types/mocha": "^9.1.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/sinon": "^10.0.12",
+    "@types/sinon-chai": "^3.2.9",
+    "@typescript-eslint/eslint-plugin": "^5.30.4",
+    "@typescript-eslint/parser": "^5.30.4",
+    "chai": "^4.3.6",
+    "commitizen": "^4.2.5",
+    "cz-conventional-changelog": "3.3.0",
+    "eslint": "^8.19.0",
+    "eslint-config-react-app": "^7.0.1",
+    "global-jsdom": "^8.6.0",
+    "husky": "^8.0.0",
+    "jsdom": "^21.1.0",
+    "mocha": "^10.0.0",
+    "nodemon": "^2.0.20",
+    "nyc": "^15.1.0",
+    "prettier": "^2.6.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^19.0.5",
+    "semantic-release-export-data": "^1.0.1",
+    "sinon": "^14.0.0",
+    "sinon-chai": "^3.7.0",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.8.2",
+    "typescript": "~4.8.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "scripts": {
+    "prebuild": "yarn clean",
+    "publish": "npm version && npm publish",
+    "build": "yarn build-cjs && yarn build-esm && yarn webpack --mode=production",
+    "build-cjs": "yarn tsc --build",
+    "build-esm": "yarn tsc -m es6 --outdir dist/esm",
+    "clean": "rm -rf dist",
+    "lint": "eslint '{src,test}/**/*.{ts,tsx}'",
+    "test": "nyc mocha",
+    "test-watch": "nodemon --config test.nodemon.json",
+    "prepare": "husky install",
+    "commit": "git add . && cz"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.34",
+    "react": ">=16.14.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

package/src/FormoAnalytics.ts

@@ -0,0 +1,264 @@
+import axios from 'axios';
+import { COUNTRY_LIST, EVENTS_API, SESSION_STORAGE_ID_KEY } from './constants';
+import { isNotEmpty } from './utils';
+
+interface IFormoAnalytics {
+  init(apiKey: string, projectId: string): Promise<FormoAnalytics>;
+  identify(userData: any): void;
+  page(): void;
+  track(eventName: string, eventData: any): void;
+}
+export class FormoAnalytics implements IFormoAnalytics {
+  private config: any;
+  private sessionIdKey: string = SESSION_STORAGE_ID_KEY;
+  private timezoneToCountry: Record<string, string> = COUNTRY_LIST;
+
+  private constructor(
+    public readonly apiKey: string,
+    public projectId: string
+  ) {
+    this.config = {
+      token: this.apiKey,
+    };
+    this.trackPageHit();
+  }
+  static async init(
+    apiKey: string,
+    projectId: string
+  ): Promise<FormoAnalytics> {
+    const config = {
+      token: apiKey,
+    };
+    const instance = new FormoAnalytics(apiKey, projectId);
+    instance.config = config;
+
+    return instance;
+  }
+
+  private identifyUser(userData: any) {
+    this.trackEvent('identify', userData);
+  }
+
+  private getSessionId() {
+    const existingSessionId = this.getCookieValue(this.sessionIdKey);
+
+    if (existingSessionId) {
+      return existingSessionId;
+    }
+
+    const newSessionId = this.generateSessionId();
+    return newSessionId;
+  }
+
+  // Function to set the session cookie
+  private setSessionCookie(domain?: string) {
+    const sessionId = this.getSessionId();
+    let cookieValue = `${this.sessionIdKey}=${sessionId}; Max-Age=1800; path=/; secure`;
+    if (domain) {
+      cookieValue += `; domain=${domain}`;
+    }
+    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(this.config.domain);
+    const apiUrl = this.buildApiUrl();
+
+    const requestData = {
+      project_id: this.projectId,
+      address: '', // TODO: get cached / session wallet address
+      session_id: this.getSessionId(),
+      timestamp: new Date().toISOString(),
+      action: action,
+      version: '1',
+      payload: isNotEmpty(payload) ? this.maskSensitiveData(payload) : payload,
+    };
+
+    console.log('Request data:', JSON.stringify(requestData));
+
+    const sendRequest = async (): Promise<void> => {
+      try {
+        const response = await axios.post(apiUrl, JSON.stringify(requestData), {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (response.status >= 200 && response.status < 300) {
+          console.log('Event sent successfully:', action);
+        } else {
+          throw new Error(`Failed with status: ${response.status}`);
+        }
+      } catch (error) {
+        attempt++;
+        if (attempt <= maxRetries) {
+          const retryDelay = Math.pow(2, attempt) * 1000;
+          console.error(
+            `Attempt ${attempt}: Retrying event "${action}" in ${
+              retryDelay / 1000
+            } seconds...`
+          );
+          setTimeout(sendRequest, retryDelay);
+        } else {
+          console.error(
+            `Event "${action}" failed after ${maxRetries} attempts. Error: ${error}`
+          );
+        }
+      }
+    };
+
+    // Start the initial request
+    await sendRequest();
+  }
+
+  // Function to mask sensitive data in the payload
+  private maskSensitiveData(
+    data: string | undefined | null
+  ): Record<string, any> | null {
+    // Check if data is null or undefined
+    if (data === null || data === undefined) {
+      console.warn('Data is null or undefined, returning null');
+      return null;
+    }
+
+    // Check if data is a string; if so, parse it to an object
+    if (typeof data === 'string') {
+      let parsedData: Record<string, any>;
+      try {
+        parsedData = JSON.parse(data);
+      } catch (error) {
+        console.error('Failed to parse JSON:', error);
+        return null; // Return null if parsing fails
+      }
+
+      const sensitiveFields = [
+        'username',
+        'user',
+        'user_id',
+        'password',
+        'email',
+        'phone',
+      ];
+
+      // Create a new object to store masked data
+      const maskedData = { ...parsedData };
+
+      // Mask sensitive fields
+      sensitiveFields.forEach((field) => {
+        if (field in maskedData) {
+          maskedData[field] = '********'; // Replace value with masked string
+        }
+      });
+
+      return maskedData; // Return the new object with masked fields
+    } else if (typeof data === 'object') {
+      // If data is already an object, handle masking directly
+      const sensitiveFields = [
+        'username',
+        'user',
+        'user_id',
+        'password',
+        'email',
+        'phone',
+      ];
+
+      const maskedData = { ...(data as Record<string, any>) };
+
+      // Mask sensitive fields
+      sensitiveFields.forEach((field) => {
+        if (field in maskedData) {
+          maskedData[field] = '********'; // Replace value with masked string
+        }
+      });
+
+      return maskedData; // Return the new object with masked fields
+    }
+
+    return data;
+  }
+
+  // Function to track page hits
+  private trackPageHit() {
+    if (window.__nightmare || window.navigator.webdriver || window.Cypress)
+      return;
+
+    let location: string | undefined;
+    let language: string;
+    try {
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      location = this.timezoneToCountry[timezone];
+      language =
+        navigator.languages && navigator.languages.length
+          ? navigator.languages[0]
+          : navigator.language || 'en';
+    } catch (error) {
+      console.error('Error resolving timezone or language:', error);
+    }
+
+    setTimeout(() => {
+      this.trackEvent('page_hit', {
+        'user-agent': window.navigator.userAgent,
+        locale: language,
+        location: location,
+        referrer: document.referrer,
+        pathname: window.location.pathname,
+        href: window.location.href,
+      });
+    }, 300);
+  }
+
+  // Function to build the API URL
+  private buildApiUrl(): string {
+    const { host, proxy, token, dataSource = 'analytics_events' } = this.config;
+    if (token) {
+      if (proxy) {
+        return `${proxy}/api/tracking`;
+      }
+      if (host) {
+        return `${host.replace(
+          /\/+$/,
+          ''
+        )}/v0/events?name=${dataSource}&token=${token}`;
+      }
+      return `${EVENTS_API}?name=${dataSource}&token=${token}`;
+    }
+    return 'Error: No token provided';
+  }
+
+  init(apiKey: string, projectId: string): Promise<FormoAnalytics> {
+    const instance = new FormoAnalytics(apiKey, projectId);
+
+    return Promise.resolve(instance);
+  }
+
+  identify(userData: any) {
+    this.identifyUser(userData);
+  }
+
+  page() {
+    this.trackPageHit();
+  }
+
+  track(eventName: string, eventData: any) {
+    this.trackEvent(eventName, eventData);
+  }
+}

package/src/FormoAnalyticsProvider.tsx

@@ -0,0 +1,54 @@
+import React, {
+  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,
+  projectId,
+  disabled,
+  children,
+}: FormoAnalyticsProviderProps) => {
+  const [sdk, setSdk] = useState<FormoAnalytics | undefined>();
+  const initializedStartedRef = useRef(false);
+
+  useEffect(() => {
+    if (!apiKey) {
+      throw new Error('FormoAnalyticsProvider: No API key provided');
+    }
+
+    if (disabled) return;
+
+    if (initializedStartedRef.current) return;
+    initializedStartedRef.current = true;
+
+    FormoAnalytics.init(apiKey, projectId).then((sdkInstance) => setSdk(sdkInstance));
+  }, [apiKey, disabled]);
+
+  return (
+    <FormoAnalyticsContext.Provider value={sdk}>
+      {children}
+    </FormoAnalyticsContext.Provider>
+  );
+};
+
+export const useFormoAnalytics = () => {
+  const context = useContext(FormoAnalyticsContext);
+
+  if (!context) {
+    throw new Error(
+      'useFormoAnalytics must be used within a FormoAnalyticsProvider'
+    );
+  }
+
+  return context;
+};