fix: posthog

frontend/vercel.json

@@ -0,0 +1,7 @@
+{
+  "git": {
+    "deploymentEnabled": {
+      "main": false
+    }
+  }
+}

vite/src/app/layout.tsx

@@ -13,13 +13,16 @@ import {
 import { useOrganization } from "@clerk/clerk-react";
 import { useEffect } from "react";
 import { Navigate, Outlet, useLocation } from "react-router";
-import posthog from "posthog-js";
+
+import { usePostHog } from "posthog-js/react";
+
 export function MainLayout() {
   const { isLoaded: isUserLoaded, user } = useUser();
   const { organization: org } = useOrganization();
   const { setActive } = useOrganizationList();
   const env = useEnv();
   const { pathname } = useLocation();
+  const posthog = usePostHog();
 
   useEffect(() => {
     // Identify user
@@ -28,13 +31,14 @@ export function MainLayout() {
       if (!email) {
         email = user.emailAddresses[0].emailAddress;
       }
-      posthog.identify(email, {
+
+      posthog?.identify(email, {
         email,
         name: user.fullName,
         id: user.id,
       });
     }
-  }, [user]);
+  }, [user, posthog]);
 
   // 1. If not loaded, show loading screen
   if (!isUserLoaded) {

vite/src/main.tsx

@@ -4,20 +4,30 @@ import "./index.css";
 import { ClerkProvider } from "@clerk/clerk-react";
 import App from "./App";
 import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 if (!PUBLISHABLE_KEY) {
   throw new Error("Add your Clerk Publishable Key to the .env file");
 }
 
-posthog.init("phc_L763VL2WY6TExI5xG5xWOua6E5LYkZN496hBeSpEdAn", {
-  api_host: "https://us.i.posthog.com",
-});
+// posthog.init("phc_L763VL2WY6TExI5xG5xWOua6E5LYkZN496hBeSpEdAn", {
+//   api_host: "https://us.i.posthog.com",
+// });
+
+const options = {
+  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+};
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <App />
+      <PostHogProvider
+        apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
+        options={options}
+      >
+        <App />
+      </PostHogProvider>
     </ClerkProvider>
   </StrictMode>
 );

vite/src/views/main-sidebar/NavButton.tsx

@@ -7,6 +7,7 @@ import { Link } from "react-router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 import { useSidebarContext } from "./SidebarContext";
+import posthog from "posthog-js";
 
 export const NavButton = ({
   value,