feat(posthog): Emit useful events (#4798)

Co-authored-by: Graham Neubig <neubig@gmail.com>

frontend/src/components/chat-interface.tsx

@@ -1,5 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import React from "react";
+import posthog from "posthog-js";
 import { useSocket } from "#/context/socket";
 import { convertImageToBase64 } from "#/utils/convert-image-to-base-64";
 import { ChatMessage } from "./chat-message";
@@ -43,6 +44,9 @@ export function ChatInterface() {
   const [messageToSend, setMessageToSend] = React.useState<string | null>(null);
 
   const handleSendMessage = async (content: string, files: File[]) => {
+    posthog.capture("user_message_sent", {
+      current_message_count: messages.length,
+    });
     const promises = files.map((file) => convertImageToBase64(file));
     const imageUrls = await Promise.all(promises);
 
@@ -53,6 +57,7 @@ export function ChatInterface() {
   };
 
   const handleStop = () => {
+    posthog.capture("stop_button_clicked");
     send(generateAgentStateChangeEvent(AgentState.STOPPED));
   };
 

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { useDispatch } from "react-redux";
 import toast from "react-hot-toast";
+import posthog from "posthog-js";
 import EllipsisH from "#/assets/ellipsis-h.svg?react";
 import { ModalBackdrop } from "../modals/modal-backdrop";
 import { ConnectToGitHubModal } from "../modals/connect-to-github-modal";
@@ -37,6 +38,7 @@ export function ProjectMenuCard({
   };
 
   const handlePushToGitHub = () => {
+    posthog.capture("push_to_github_button_clicked");
     const rawEvent = {
       content: `
 Let's push the code to GitHub.
@@ -58,6 +60,15 @@ Finally, open up a pull request using the GitHub API and the token in the GITHUB
     setContextMenuIsOpen(false);
   };
 
+  const handleDownloadWorkspace = () => {
+    posthog.capture("download_workspace_button_clicked");
+    try {
+      downloadWorkspace();
+    } catch (error) {
+      toast.error("Failed to download workspace");
+    }
+  };
+
   return (
     <div className="px-4 py-[10px] w-[337px] rounded-xl border border-[#525252] flex justify-between items-center relative">
       {contextMenuIsOpen && (
@@ -65,13 +76,7 @@ Finally, open up a pull request using the GitHub API and the token in the GITHUB
           isConnectedToGitHub={isConnectedToGitHub}
           onConnectToGitHub={() => setConnectToGitHubModalOpen(true)}
           onPushToGitHub={handlePushToGitHub}
-          onDownloadWorkspace={() => {
-            try {
-              downloadWorkspace();
-            } catch (error) {
-              toast.error("Failed to download workspace");
-            }
-          }}
+          onDownloadWorkspace={handleDownloadWorkspace}
           onClose={() => setContextMenuIsOpen(false)}
         />
       )}

frontend/src/context/socket.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Data } from "ws";
+import posthog from "posthog-js";
 import EventLogger from "#/utils/event-logger";
 
 interface WebSocketClientOptions {
@@ -58,6 +59,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     ]);
 
     ws.addEventListener("open", (event) => {
+      posthog.capture("socket_opened");
       setIsConnected(true);
       options?.onOpen?.(event);
     });
@@ -70,11 +72,13 @@ function SocketProvider({ children }: SocketProviderProps) {
     });
 
     ws.addEventListener("error", (event) => {
+      posthog.capture("socket_error");
       EventLogger.event(event, "SOCKET ERROR");
       options?.onError?.(event);
     });
 
     ws.addEventListener("close", (event) => {
+      posthog.capture("socket_closed");
       EventLogger.event(event, "SOCKET CLOSE");
 
       setIsConnected(false);

frontend/src/routes/_oh._index/route.tsx

@@ -10,6 +10,7 @@ import {
 } from "@remix-run/react";
 import React from "react";
 import { useDispatch } from "react-redux";
+import posthog from "posthog-js";
 import { SuggestionBox } from "./suggestion-box";
 import { TaskForm } from "./task-form";
 import { HeroHeading } from "./hero-heading";
@@ -64,6 +65,10 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
   const q = formData.get("q")?.toString();
   if (q) store.dispatch(setInitialQuery(q));
 
+  posthog.capture("initial_query_submitted", {
+    query_character_length: q?.length,
+  });
+
   return redirect("/app");
 };
 

frontend/src/routes/settings.ts

@@ -1,4 +1,5 @@
 import { ClientActionFunctionArgs, json } from "@remix-run/react";
+import posthog from "posthog-js";
 import {
   getDefaultSettings,
   LATEST_SETTINGS_VERSION,
@@ -38,6 +39,7 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
     saveSettings(getDefaultSettings());
     if (requestedToEndSession(formData)) removeSessionTokenAndSelectedRepo();
 
+    posthog.capture("settings_reset");
     return json({ success: true });
   }
 
@@ -97,5 +99,10 @@ export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
   }
 
   if (requestedToEndSession(formData)) removeSessionTokenAndSelectedRepo();
+
+  posthog.capture("settings_saved", {
+    LLM_MODEL,
+    LLM_API_KEY: LLM_API_KEY ? "SET" : "UNSET",
+  });
   return json({ success: true });
 };