Mixpanel client initializes twice with default settings and overwrites my settings

[noah-haub]

Hey there, currently trying to implement Mixpanel for the first time in my Expo app.

I have coded an analytics.context.tsx that looks like this:

import { clientEnv } from "@/env";
import { User } from "@/types";
import * as Application from "expo-application";
import { Mixpanel } from "mixpanel-react-native";
import { createContext, useContext, useEffect, useState } from "react";

// ...

const AnalyticsContext = createContext<AnalyticsContextType | null>(null);

export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [mixpanel, setMixpanel] = useState<Mixpanel | null>(null);

    useEffect(() => {
        if (mixpanel) {
            console.log(`🟠🟠🟠 Mixpanel already initialized`);
            return;
        }

        console.log(`🟠🟠🟠 Initializing Mixpanel`);
        const mixpanelInstance = new Mixpanel(clientEnv.EXPO_PUBLIC_MIXPANEL_TOKEN, false, false);
        if (clientEnv.APP_VARIANT === "development") mixpanelInstance.setLoggingEnabled(true);
        mixpanelInstance.init();
        mixpanelInstance.setServerURL("https://api-eu.mixpanel.com");
        mixpanelInstance.registerSuperProperties({
            platform: Platform.OS,
            app_version: Application.nativeApplicationVersion ?? "unknown",
            app_build: Application.nativeBuildVersion ?? "unknown",
            environment: clientEnv.APP_VARIANT,
        });
        setMixpanel(mixpanelInstance);
        console.log(`🟠🟠🟠 Mixpanel initialized`);
    }, []);

    // ...

    return (
        <AnalyticsContext.Provider
            value={{
                // ...
            }}
        >
            {children}
        </AnalyticsContext.Provider>
    );
};

export const useAnalytics = () => {
    const context = useContext(AnalyticsContext);
    if (!context) throw new Error("useAnalytics must be used within an AnalyticsProvider");
    return context;
};

Basically all this does, is initialize the mixpanel client and export some functions like track, identify, etc. (I kept those out of the example because they're not important for this issue.)

The issue, is that my initialization gets overwritten by some default one which I did not define.

Here is what my console looks like:

 LOG  🟠🟠🟠 Initializing Mixpanel (HERE MY INIT STARTS)
 INFO  Mixpanel Logging Enabled
 LOG  [Mixpanel] Initializing Mixpanel
 LOG  [Mixpanel] Set serverURL: https://api-eu.mixpanel.com
 LOG  [Mixpanel] Register super properties: {"app_build": "3", "app_version": "1.0.1", "environment": "development", "platform": "ios"}
 LOG  [Mixpanel] Current Super Properties: undefined
 LOG  [Mixpanel] Updated Super Properties: {"app_build": "3", "app_version": "1.0.1", "environment": "development", "platform": "ios"}
 LOG  🟠🟠🟠 Mixpanel initialized (HERE MY INIT ENDS)
 LOG  [Mixpanel] deviceId: 73d12271-efb9-46aa-8d19-66b16d501dc
 LOG  [Mixpanel] Set serverURL: https://api.mixpanel.com (HERE MY INIT SETTINGS GET OVERWRITTEN)
 LOG  [Mixpanel] Register super properties: {"$lib_version": "3.1.2", "mp_lib": "react-native"}
 LOG  [Mixpanel] Current Super Properties: {"$lib_version": "3.1.2", "mp_lib": "react-native"}
 LOG  [Mixpanel] Updated Super Properties: {"$lib_version": "3.1.2", "mp_lib": "react-native"}
 LOG  [Mixpanel] distinctId: m174720rmwgryvvdc049cxnaf57nthta
 LOG  [Mixpanel] userId: m174720rmwgryvvdc049cxnaf57nthta

Has anyone else faced this issue before? It's super annoying and leads to me not seeing any events in the dashboard since I need to set the serverUrl to https://api-eu.mixpanel.com for them to arrive, but it keeps getting overwritten.

[noah-haub]

FIXED.

Looked into the library and realized the fix was to pass the settings into the init() call.
This is mentioned nowhere in the docs!

        mixpanelInstance.init(
            false,
            {
                platform: Platform.OS,
                app_version: Application.nativeApplicationVersion ?? "unknown",
                app_build: Application.nativeBuildVersion ?? "unknown",
                environment: clientEnv.APP_VARIANT,
            },
            "https://api-eu.mixpanel.com"
        );