feat: refactor Mixpanel initialization logic and improve global state handling

Author: spivx

components/MixpanelInit/MixpanelInit.tsx

@@ -3,16 +3,12 @@
 import { useEffect } from "react"
 import { usePathname, useSearchParams } from "next/navigation"
 
-import { initMixpanel, trackPageView } from "@/lib/mixpanel"
+import { trackPageView } from "@/lib/mixpanel"
 
 export function MixpanelInit() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
-  useEffect(() => {
-    initMixpanel()
-  }, [])
-
   useEffect(() => {
     if (!pathname) {
       return

lib/mixpanel.ts

@@ -2,12 +2,16 @@ import mixpanel from "mixpanel-browser"
 
 import { ANALYTICS_EVENTS, type AnalyticsEvent } from "@/lib/analytics-events"
 
-const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN
+declare global {
+  interface Window {
+    __mixpanel_initialized?: boolean
+  }
+}
 
-let isMixpanelInitialized = false
+const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN
 
-export const initMixpanel = () => {
-  if (typeof window === "undefined" || isMixpanelInitialized) {
+const initializeMixpanel = () => {
+  if (typeof window === "undefined" || window.__mixpanel_initialized) {
     return
   }
 
@@ -19,23 +23,57 @@ export const initMixpanel = () => {
   }
 
   mixpanel.init(MIXPANEL_TOKEN, {
-    debug: process.env.NODE_ENV !== "production",
-    ignore_dnt: true,
+    debug: false,
+    track_pageview: false,
+    persistence: "localStorage",
   })
 
-  isMixpanelInitialized = true
+  window.__mixpanel_initialized = true
+  mixpanel.track("Page Load", { path: window.location.pathname })
+}
+
+if (typeof window !== "undefined") {
+  initializeMixpanel()
 }
 
+export const initMixpanel = initializeMixpanel
+
 export const track = (event: AnalyticsEvent, props?: Record<string, unknown>) => {
-  if (typeof window === "undefined" || !isMixpanelInitialized) {
+  if (typeof window === "undefined") {
+    return
+  }
+
+  if (process.env.NODE_ENV === "development") {
+    console.log("[mixpanel track]", event, props)
+    return
+  }
+
+  if (!window.__mixpanel_initialized) {
+    initializeMixpanel()
+  }
+
+  if (!window.__mixpanel_initialized) {
     return
   }
 
   mixpanel.track(event, props)
 }
 
 export const identify = (userId: string) => {
-  if (typeof window === "undefined" || !isMixpanelInitialized) {
+  if (typeof window === "undefined") {
+    return
+  }
+
+  if (process.env.NODE_ENV === "development") {
+    console.log("[mixpanel identify]", userId)
+    return
+  }
+
+  if (!window.__mixpanel_initialized) {
+    initializeMixpanel()
+  }
+
+  if (!window.__mixpanel_initialized) {
     return
   }