mixpanel-react-native 3.1.2 → 3.1.3

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/javascript/mixpanel-network.js

@@ -15,37 +15,77 @@ export const MixpanelNetwork = (() => {
     serverURL,
     useIPAddressForGeoLocation,
     retryCount = 0,
+    headers = {},
   }) => {
     retryCount = retryCount || 0;
-    const url = `${serverURL}${endpoint}?ip=${+useIPAddressForGeoLocation}`;
+    // Use & if endpoint already has query params, otherwise use ?
+    const separator = endpoint.includes('?') ? '&' : '?';
+    const url = `${serverURL}${endpoint}${separator}ip=${+useIPAddressForGeoLocation}`;
     MixpanelLogger.log(token, `Sending request to: ${url}`);
 
     try {
-      const response = await fetch(url, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-        body: `data=${encodeURIComponent(JSON.stringify(data))}`,
-      });
+      // Determine if this is a GET or POST request based on data presence
+      const isGetRequest = data === null || data === undefined;
 
-      const responseBody = await response.json();
-      if (response.status !== 200) {
-        throw new MixpanelHttpError(
-          `HTTP error! status: ${response.status}`,
-          response.status
-        );
-      }
+      const fetchOptions = isGetRequest
+        ? {
+            method: "GET",
+            headers: headers,
+          }
+        : {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              ...headers,
+            },
+            body: `data=${encodeURIComponent(JSON.stringify(data))}`,
+          };
+
+      const response = await fetch(url, fetchOptions);
+
+      // Handle GET requests differently - they return the data directly
+      if (isGetRequest) {
+        if (response.status === 200) {
+          const responseData = await response.json();
+          MixpanelLogger.log(token, `GET request successful: ${endpoint}`);
+          return responseData;
+        } else {
+          throw new MixpanelHttpError(
+            `HTTP error! status: ${response.status}`,
+            response.status
+          );
+        }
+      } else {
+        // Handle POST requests (existing logic)
+        const responseBody = await response.json();
+        if (response.status !== 200) {
+          throw new MixpanelHttpError(
+            `HTTP error! status: ${response.status}`,
+            response.status
+          );
+        }
 
-      const message =
-        responseBody === 0
-          ? `${url} api rejected some items`
-          : `Mixpanel batch sent successfully, endpoint: ${endpoint}, data: ${JSON.stringify(
-              data
-            )}`;
+        const message =
+          responseBody === 0
+            ? `${url} api rejected some items`
+            : `Mixpanel batch sent successfully, endpoint: ${endpoint}, data: ${JSON.stringify(
+                data
+              )}`;
 
-      MixpanelLogger.log(token, message);
+        MixpanelLogger.log(token, message);
+        return responseBody;
+      }
     } catch (error) {
+      // Determine if this is a GET or POST request
+      const isGetRequest = data === null || data === undefined;
+
+      // For GET requests (like flags), don't retry on 404 or other client errors
+      if (isGetRequest && error.code >= 400 && error.code < 500) {
+        MixpanelLogger.log(token, `GET request failed with status ${error.code}, not retrying`);
+        throw error;
+      }
+
+      // For POST requests or non-client errors, handle retries
       if (error.code === 400) {
         // This indicates that the data was invalid and we should not retry
         throw new MixpanelHttpError(
@@ -53,30 +93,35 @@ export const MixpanelNetwork = (() => {
           error.code
         );
       }
+
       MixpanelLogger.warn(
         token,
         `API request to ${url} has failed with reason: ${error.message}`
       );
-      const maxRetries = 5;
-      const backoff = Math.min(2 ** retryCount * 2000, 60000); // Exponential backoff
-      if (retryCount < maxRetries) {
-        MixpanelLogger.log(token, `Retrying in ${backoff / 1000} seconds...`);
-        await new Promise((resolve) => setTimeout(resolve, backoff));
-        return sendRequest({
-          token,
-          endpoint,
-          data,
-          serverURL,
-          useIPAddressForGeoLocation,
-          retryCount: retryCount + 1,
-        });
-      } else {
-        MixpanelLogger.warn(token, `Max retries reached. Giving up.`);
-        throw new MixpanelHttpError(
-          `HTTP error! status: ${error.code}`,
-          error.code
-        );
+
+      // Only retry for POST requests or server errors
+      if (!isGetRequest || error.code >= 500) {
+        const maxRetries = 5;
+        const backoff = Math.min(2 ** retryCount * 2000, 60000); // Exponential backoff
+        if (retryCount < maxRetries) {
+          MixpanelLogger.log(token, `Retrying in ${backoff / 1000} seconds...`);
+          await new Promise((resolve) => setTimeout(resolve, backoff));
+          return sendRequest({
+            token,
+            endpoint,
+            data,
+            serverURL,
+            useIPAddressForGeoLocation,
+            retryCount: retryCount + 1,
+          });
+        }
       }
+
+      MixpanelLogger.warn(token, `Request failed. Not retrying.`);
+      throw new MixpanelHttpError(
+        `HTTP error! status: ${error.code || 'unknown'}`,
+        error.code
+      );
     }
   };
 

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/javascript/mixpanel-persistent.js

@@ -9,10 +9,42 @@ import {
   getAppHasOpenedBeforeKey,
 } from "./mixpanel-constants";
 
+import "react-native-get-random-values"; // Polyfill for crypto.getRandomValues
 import { AsyncStorageAdapter } from "./mixpanel-storage";
 import uuid from "uuid";
 import { MixpanelLogger } from "mixpanel-react-native/javascript/mixpanel-logger";
-import { randomUUID } from "expo-crypto";
+
+/**
+ * Generate a UUID v4, with cross-platform fallbacks
+ * Tries: uuid package → Web Crypto API → manual generation
+ */
+function generateUUID() {
+  // Try uuid package first (works in React Native with polyfill)
+  try {
+    const result = uuid.v4();
+    if (result) return result;
+  } catch (e) {
+    // Fall through to alternatives
+  }
+
+  // Try Web Crypto API (modern browsers)
+  const cryptoObj =
+    (typeof globalThis !== "undefined" && globalThis.crypto) ||
+    (typeof window !== "undefined" && window.crypto) ||
+    (typeof crypto !== "undefined" && crypto);
+
+  if (cryptoObj && typeof cryptoObj.randomUUID === "function") {
+    return cryptoObj.randomUUID();
+  }
+
+  // Last resort: manual UUID v4 generation using Math.random
+  // Less secure but functional for device IDs
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
 
 export class MixpanelPersistent {
   static instance;
@@ -42,7 +74,7 @@ export class MixpanelPersistent {
   }
 
   async initializationCompletePromise(token) {
-    Promise.all([
+    return Promise.all([
       this.loadIdentity(token),
       this.loadSuperProperties(token),
       this.loadTimeEvents(token),
@@ -67,11 +99,8 @@ export class MixpanelPersistent {
     this._identity[token].deviceId = storageToken;
 
     if (!this._identity[token].deviceId) {
-      try {
-        this._identity[token].deviceId = randomUUID();
-      } catch (e) {
-        this._identity[token].deviceId = uuid.v4();
-      }
+      // Generate device ID with cross-platform UUID generation
+      this._identity[token].deviceId = generateUUID();
       await this.storageAdapter.setItem(
         getDeviceIdKey(token),
         this._identity[token].deviceId
@@ -172,9 +201,7 @@ export class MixpanelPersistent {
   }
 
   isIdentified(token) {
-    const userId = this.getUserId(token);
-    const isIdentified = userId !== null && userId !== undefined;
-    return isIdentified;
+    return Boolean(this.getUserId(token));
   }
 
   updateUserId(token, userId) {

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/javascript/mixpanel-queue.js

@@ -1,4 +1,3 @@
-import { MixpanelLogger } from "./mixpanel-logger";
 import { MixpanelPersistent } from "./mixpanel-persistent";
 import { MixpanelType } from "./mixpanel-constants";
 

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-react-native",
-  "version": "3.0.9",
+  "version": "3.2.0-beta.2",
   "description": "Official React Native Tracking Library for Mixpanel Analytics",
   "main": "index.js",
   "scripts": {
@@ -47,9 +47,9 @@
     }
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.21.0",
-    "expo-crypto": "~14.1.4",
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "react-native-get-random-values": "^1.9.0",
     "uuid": "3.3.2"
   },
-  "yalcSig": "a70b7359f0f86a46e69a2d9e9c657fcf"
+  "yalcSig": "d93a5195c4a6a7b47bd096c9e4fcf2eb"
 }

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/test-js-flags.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+
+/**
+ * Test script to verify JavaScript mode feature flags functionality
+ * This script simulates an environment where native modules are not available
+ */
+
+// Enable JavaScript mode for testing
+process.env.MIXPANEL_ENABLE_JS_FLAGS = 'true';
+
+// Mock React Native completely before any imports
+const Module = require('module');
+const originalRequire = Module.prototype.require;
+
+Module.prototype.require = function(id) {
+  if (id === 'react-native') {
+    return {
+      NativeModules: {},
+      Platform: {
+        OS: 'ios',
+        select: (obj) => obj.ios || obj.default
+      },
+      NativeEventEmitter: class NativeEventEmitter {}
+    };
+  }
+  // Mock expo-crypto as unavailable
+  if (id === 'expo-crypto') {
+    throw new Error('Module not found');
+  }
+  // Let uuid work normally
+  return originalRequire.apply(this, arguments);
+};
+
+// Mock React Native modules
+global.NativeModules = {};
+
+// Mock AsyncStorage
+const storage = new Map();
+global.AsyncStorage = {
+  getItem: async (key) => storage.get(key) || null,
+  setItem: async (key, value) => {
+    storage.set(key, value);
+    return Promise.resolve();
+  },
+  removeItem: async (key) => {
+    storage.delete(key);
+    return Promise.resolve();
+  },
+  getAllKeys: async () => Array.from(storage.keys()),
+  multiGet: async (keys) => keys.map(key => [key, storage.get(key) || null]),
+  multiSet: async (keyValuePairs) => {
+    keyValuePairs.forEach(([key, value]) => storage.set(key, value));
+    return Promise.resolve();
+  },
+  multiRemove: async (keys) => {
+    keys.forEach(key => storage.delete(key));
+    return Promise.resolve();
+  }
+};
+
+// Import Mixpanel
+const { Mixpanel } = require('./index.js');
+
+async function testJavaScriptModeFlags() {
+  console.log('🧪 Testing JavaScript Mode Feature Flags\n');
+  console.log('===================================\n');
+
+  try {
+    // Create Mixpanel instance in JavaScript mode
+    const mixpanel = new Mixpanel('test-token-123', false, false);
+    console.log('✅ Created Mixpanel instance in JavaScript mode\n');
+
+    // Verify we're in JavaScript mode
+    const isNativeMode = mixpanel.mixpanelImpl.constructor.name === 'MixpanelReactNative';
+    console.log(`Mode: ${isNativeMode ? 'Native' : 'JavaScript'} ✅\n`);
+
+    // Initialize with feature flags enabled
+    const success = await mixpanel.init(false, {
+      featureFlagsOptions: {
+        enabled: true,
+        context: {
+          user_type: 'tester',
+          environment: 'development'
+        }
+      }
+    });
+    console.log(`Initialized: ${success ? '✅' : '❌'}\n`);
+
+    // Access feature flags
+    const flags = mixpanel.flags;
+    console.log('✅ Accessed flags property without error\n');
+
+    // Test synchronous methods
+    console.log('Testing Synchronous Methods:');
+    console.log('----------------------------');
+
+    const ready = flags.areFlagsReady();
+    console.log(`areFlagsReady(): ${ready}`);
+
+    const variant = flags.getVariantSync('test-flag', 'fallback');
+    console.log(`getVariantSync('test-flag'): ${variant}`);
+
+    const value = flags.getVariantValueSync('button-color', 'blue');
+    console.log(`getVariantValueSync('button-color'): ${value}`);
+
+    const enabled = flags.isEnabledSync('new-feature', false);
+    console.log(`isEnabledSync('new-feature'): ${enabled}\n`);
+
+    // Test asynchronous methods
+    console.log('Testing Asynchronous Methods:');
+    console.log('-----------------------------');
+
+    // Load flags (this will fail in test environment but should handle gracefully)
+    try {
+      await flags.loadFlags();
+      console.log('loadFlags(): Success (unexpected)');
+    } catch (error) {
+      console.log('loadFlags(): Failed gracefully (expected in test) ✅');
+    }
+
+    // Test async variants with promises
+    const asyncVariant = await flags.getVariant('async-test', 'async-fallback');
+    console.log(`getVariant('async-test'): ${asyncVariant}`);
+
+    const asyncValue = await flags.getVariantValue('async-color', 'red');
+    console.log(`getVariantValue('async-color'): ${asyncValue}`);
+
+    const asyncEnabled = await flags.isEnabled('async-feature', true);
+    console.log(`isEnabled('async-feature'): ${asyncEnabled}\n`);
+
+    // Test JavaScript-specific features
+    console.log('Testing JavaScript-Specific Features:');
+    console.log('------------------------------------');
+
+    // Test updateContext (JavaScript mode only)
+    try {
+      await flags.updateContext({
+        user_type: 'premium',
+        plan: 'enterprise'
+      });
+      console.log('updateContext(): Success ✅');
+    } catch (error) {
+      console.log(`updateContext(): ${error.message}`);
+    }
+
+    // Test snake_case aliases
+    console.log('\nTesting snake_case Aliases:');
+    console.log('---------------------------');
+
+    const snakeReady = flags.are_flags_ready();
+    console.log(`are_flags_ready(): ${snakeReady}`);
+
+    const snakeVariant = flags.get_variant_sync('snake-test', 'snake-fallback');
+    console.log(`get_variant_sync(): ${snakeVariant}`);
+
+    console.log('\n✅ All JavaScript mode feature flag tests completed successfully!');
+
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+    console.error(error.stack);
+    process.exit(1);
+  }
+}
+
+// Run the tests
+testJavaScriptModeFlags().catch(console.error);

package/Samples/MixpanelExpo/.yalc/mixpanel-react-native/yalc.sig

@@ -1 +1 @@
-a70b7359f0f86a46e69a2d9e9c657fcf
+d93a5195c4a6a7b47bd096c9e4fcf2eb

package/Samples/MixpanelExpo/yalc.lock

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "mixpanel-react-native": {
-      "signature": "a70b7359f0f86a46e69a2d9e9c657fcf",
+      "signature": "d93a5195c4a6a7b47bd096c9e4fcf2eb",
       "file": true,
       "replaced": "file:../mixpanel-react-native-3.0.9.tgz"
     }

package/Samples/MixpanelStarter/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/Samples/MixpanelStarter/.env.example

@@ -0,0 +1,4 @@
+# Mixpanel Configuration
+# Get your token from: https://mixpanel.com/project/YOUR_PROJECT_ID/settings#project
+
+MIXPANEL_TOKEN="YOUR_MIXPANEL_PROJECT_TOKEN"

package/Samples/MixpanelStarter/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

package/Samples/{MixpanelExpo/.yalc/mixpanel-react-native/Samples/MixpanelExpo/.yalc/mixpanel-react-native/Samples/MixpanelExpo/.yalc/mixpanel-react-native/Samples/ContextAPIMixpanel → MixpanelStarter}/.prettierrc.js

@@ -1,7 +1,5 @@
 module.exports = {
-  bracketSpacing: false,
-  jsxBracketSameLine: true,
+  arrowParens: 'avoid',
   singleQuote: true,
   trailingComma: 'all',
-  arrowParens: 'avoid',
 };

package/Samples/MixpanelStarter/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/Samples/MixpanelStarter/App.tsx

@@ -0,0 +1,10 @@
+/**
+ * MixpanelStarter - Sample React Native App
+ * Demonstrates Mixpanel SDK integration with modern patterns
+ *
+ * @format
+ */
+
+import App from './src/App';
+
+export default App;