Refactor posthog

frontend/src/components/chat-interface.tsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import React from "react";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { convertImageToBase64 } from "#/utils/convert-image-to-base-64";
 import { ChatMessage } from "./chat-message";
 import { FeedbackActions } from "./feedback-actions";
@@ -35,6 +35,7 @@ const isErrorMessage = (
 ): message is ErrorMessage => "error" in message;
 
 export function ChatInterface() {
+  const posthog = usePostHog();
   const { gitHubToken } = useAuth();
   const { send, status, isLoadingMessages } = useWsClient();
 

frontend/src/components/event-handler.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import toast from "react-hot-toast";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import {
   useWsClient,
   WsClientProviderStatus,
@@ -43,6 +43,7 @@ const isErrorObservation = (data: object): data is ErrorObservation =>
   "observation" in data && data.observation === "error";
 
 export function EventHandler({ children }: React.PropsWithChildren) {
+  const posthog = usePostHog();
   const { setToken, gitHubToken } = useAuth();
   const { settings } = useUserPrefs();
   const { events, status, send } = useWsClient();

frontend/src/components/form/settings-form.tsx

@@ -8,7 +8,7 @@ import { useLocation } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import React from "react";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { organizeModelsAndProviders } from "#/utils/organize-models-and-providers";
 import { ModelSelector } from "#/components/modals/settings/model-selector";
 import { getDefaultSettings, Settings } from "#/services/settings";
@@ -42,6 +42,7 @@ export function SettingsForm({
   securityAnalyzers,
   onClose,
 }: SettingsFormProps) {
+  const posthog = usePostHog();
   const { saveSettings } = useUserPrefs();
   const endSession = useEndSession();
 

frontend/src/components/project-menu/ProjectMenuCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDispatch } from "react-redux";
 import toast from "react-hot-toast";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import EllipsisH from "#/icons/ellipsis-h.svg?react";
 import { ModalBackdrop } from "../modals/modal-backdrop";
 import { ConnectToGitHubModal } from "../modals/connect-to-github-modal";
@@ -27,6 +27,7 @@ export function ProjectMenuCard({
   isConnectedToGitHub,
   githubData,
 }: ProjectMenuCardProps) {
+  const posthog = usePostHog();
   const { send } = useWsClient();
   const dispatch = useDispatch();
 

frontend/src/context/auth-context.tsx

@@ -1,4 +1,4 @@
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import React from "react";
 
 interface AuthContextType {
@@ -14,6 +14,7 @@ interface AuthContextType {
 const AuthContext = React.createContext<AuthContextType | undefined>(undefined);
 
 function AuthProvider({ children }: React.PropsWithChildren) {
+  const posthog = usePostHog();
   const [tokenState, setTokenState] = React.useState<string | null>(() =>
     localStorage.getItem("token"),
   );

frontend/src/context/ws-client-provider.tsx

@@ -1,5 +1,5 @@
-import posthog from "posthog-js";
 import React from "react";
+import { usePostHog } from "posthog-js/react";
 import { Settings } from "#/services/settings";
 import ActionType from "#/types/action-type";
 import EventLogger from "#/utils/event-logger";
@@ -49,6 +49,7 @@ export function WsClientProvider({
   settings,
   children,
 }: React.PropsWithChildren<WsClientProviderProps>) {
+  const posthog = usePostHog();
   const wsRef = React.useRef<WebSocket | null>(null);
   const tokenRef = React.useRef<string | null>(token);
   const ghTokenRef = React.useRef<string | null>(ghToken);

frontend/src/entry.client.tsx

@@ -9,7 +9,7 @@ import { RemixBrowser } from "@remix-run/react";
 import React, { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import "./i18n";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import store from "./store";
@@ -17,19 +17,22 @@ import { useConfig } from "./hooks/query/use-config";
 import { AuthProvider } from "./context/auth-context";
 import { UserPrefsProvider } from "./context/user-prefs-context";
 
-function PosthogInit() {
+function PosthogInit({ children }: React.PropsWithChildren) {
   const { data: config } = useConfig();
 
-  React.useEffect(() => {
-    if (config?.POSTHOG_CLIENT_KEY) {
-      posthog.init(config.POSTHOG_CLIENT_KEY, {
+  // NOTE: The warning: [PostHog.js] was already loaded elsewhere. This may cause issues.
+  // is caused due to React's strict mode. In production, this warning will not appear.
+  return (
+    <PostHogProvider
+      apiKey={config?.POSTHOG_CLIENT_KEY}
+      options={{
         api_host: "https://us.i.posthog.com",
         person_profiles: "identified_only",
-      });
-    }
-  }, [config]);
-
-  return null;
+      }}
+    >
+      {children}
+    </PostHogProvider>
+  );
 }
 
 async function prepareApp() {
@@ -56,8 +59,9 @@ prepareApp().then(() =>
           <UserPrefsProvider>
             <AuthProvider>
               <QueryClientProvider client={queryClient}>
-                <RemixBrowser />
-                <PosthogInit />
+                <PosthogInit>
+                  <RemixBrowser />
+                </PosthogInit>
               </QueryClientProvider>
             </AuthProvider>
           </UserPrefsProvider>

frontend/src/hooks/query/use-github-user.ts

@@ -1,11 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import React from "react";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { retrieveGitHubUser, isGitHubErrorReponse } from "#/api/github";
 import { useAuth } from "#/context/auth-context";
 import { useConfig } from "./use-config";
 
 export const useGitHubUser = () => {
+  const posthog = usePostHog();
   const { gitHubToken } = useAuth();
   const { data: config } = useConfig();
 

frontend/src/routes/_oh._index/task-form.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigate, useNavigation } from "@remix-run/react";
 import { useDispatch, useSelector } from "react-redux";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import { RootState } from "#/store";
 import {
   addFile,
@@ -19,6 +19,7 @@ import { AttachImageLabel } from "#/components/attach-image-label";
 import { cn } from "#/utils/utils";
 
 export const TaskForm = React.forwardRef<HTMLFormElement>((_, ref) => {
+  const posthog = usePostHog();
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const navigate = useNavigate();