fix: posthog tracking

Author: itsskofficial

src/client/app/onboarding/page.js

@@ -357,6 +357,15 @@ const OnboardingPage = () => {
 					result.message || "Failed to save onboarding data"
 				)
 			}
+			// Identify the user in PostHog as soon as we have their name
+			posthog?.identify(
+				(await (await fetch("/api/user/profile")).json()).sub, // Fetch user ID from session
+				{ name: mainOnboardingData["user-name"] }
+			)
+			posthog?.capture("user_signed_up", {
+				signup_method: "auth0", // or derive from user profile if available
+				referral_source: "direct" // Placeholder, can be populated from URL params
+			})
 			posthog?.capture("onboarding_completed")
 			router.push("/chat?show_demo=true")
 		} catch (error) {

src/client/components/LayoutWrapper.js

@@ -19,6 +19,7 @@ import { useGlobalShortcuts } from "@hooks/useGlobalShortcuts"
 import { cn } from "@utils/cn"
 import toast from "react-hot-toast"
 import { useUser } from "@auth0/nextjs-auth0"
+import { usePostHog } from "posthog-js/react"
 
 // ... (keep the rest of your imports and context creation)
 export const PlanContext = createContext({
@@ -56,6 +57,7 @@ export default function LayoutWrapper({ children }) {
 	const pathname = usePathname()
 	const router = useRouter()
 	const searchParams = useSearchParams() // Hook to read URL query parameters
+	const posthog = usePostHog()
 
 	const { user, error: authError, isLoading: isAuthLoading } = useUser()
 
@@ -64,10 +66,25 @@ export default function LayoutWrapper({ children }) {
 
 	const showNav = !["/", "/onboarding"].includes(pathname)
 
+	useEffect(() => {
+		if (user && posthog) {
+			posthog.identify(user.sub, {
+				name: user.name,
+				email: user.email
+			})
+		}
+	}, [user, posthog])
+
 	useEffect(() => {
 		const paymentStatus = searchParams.get("payment_status")
 		const needsRefresh = searchParams.get("refresh_session")
 
+		if (paymentStatus === "success" && posthog) {
+			posthog.capture("plan_upgraded", {
+				plan_name: "pro"
+				// MRR and billing_cycle are not available on the client
+			})
+		}
 		// Check for either trigger
 		if (paymentStatus === "success" || needsRefresh === "true") {
 			// CRITICAL FIX: Clean the URL synchronously *before* doing anything else.

src/client/components/Sidebar.js

@@ -32,6 +32,7 @@ import {
 import { cn } from "@utils/cn"
 import { usePlan } from "@hooks/usePlan"
 import { motion, AnimatePresence } from "framer-motion"
+import { usePostHog } from "posthog-js/react"
 import useClickOutside from "@hooks/useClickOutside"
 
 const proPlanFeatures = [
@@ -238,6 +239,7 @@ const UserProfileSection = ({ isCollapsed, user }) => {
 	const [isUserMenuOpen, setUserMenuOpen] = useState(false)
 	const userMenuRef = useRef(null)
 	const { isPro, plan } = usePlan()
+	const posthog = usePostHog()
 	useClickOutside(userMenuRef, () => setUserMenuOpen(false))
 
 	const planName = isPro ? "Pro" : "Basic"
@@ -321,6 +323,9 @@ const UserProfileSection = ({ isCollapsed, user }) => {
 								</a>
 								<a
 									href="/auth/logout"
+									onClick={() => {
+										posthog?.reset()
+									}}
 									className="w-full flex items-center gap-2 text-left px-3 py-2 text-sm rounded-md text-red-400 hover:bg-red-500/20 hover:text-red-300 transition-colors"
 								>
 									<IconLogout size={16} />