perf(analytics): added usage analytics (#381)

Author: StanGirard

frontend/app/(auth)/login/page.tsx

@@ -46,7 +46,7 @@ export default function Login() {
   };
 
   if (session?.user !== undefined) {
-    track("SIGNED_IN");
+    void track("SIGNED_IN");
     redirect("/upload");
   }
 

frontend/app/(auth)/logout/page.tsx

@@ -9,18 +9,20 @@ import Card from "@/lib/components/ui/Card";
 import PageHeading from "@/lib/components/ui/PageHeading";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useToast } from "@/lib/hooks/useToast";
+import { useEventTracking } from "@/services/analytics/useEventTracking";
 
 export default function Logout() {
   const { supabase } = useSupabase();
   const [isPending, setIsPending] = useState(false);
+  const { track } = useEventTracking();
 
   const { publish } = useToast();
   const router = useRouter();
 
   const handleLogout = async () => {
     setIsPending(true);
     const { error } = await supabase.auth.signOut();
-
+    void track("LOGOUT")
     if (error) {
       console.error("Error logging out:", error.message);
       publish({

frontend/app/(auth)/signup/page.tsx

@@ -9,15 +9,19 @@ import Field from "@/lib/components/ui/Field";
 import PageHeading from "@/lib/components/ui/PageHeading";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useToast } from "@/lib/hooks/useToast";
+import { useEventTracking } from "@/services/analytics/useEventTracking";
 
 export default function SignUp() {
   const { supabase } = useSupabase();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isPending, setIsPending] = useState(false);
+  const { track } = useEventTracking();
+
 
   const { publish } = useToast();
   const handleSignUp = async () => {
+    void track("SIGNUP")
     setIsPending(true);
     const { data, error } = await supabase.auth.signUp({
       email: email,

frontend/app/config/components/ApiKeyConfig.tsx

@@ -5,13 +5,16 @@ import { useState } from "react";
 
 import Button from "@/lib/components/ui/Button";
 import { useAxios } from "@/lib/hooks";
+import { useEventTracking } from "@/services/analytics/useEventTracking";
 
 export const ApiKeyConfig = (): JSX.Element => {
   const [apiKey, setApiKey] = useState("");
   const { axiosInstance } = useAxios();
+  const { track} = useEventTracking();
 
   const handleCreateClick = async () => {
     try {
+      void track("CREATE_API_KEY")
       const response = await axiosInstance.post("/api-key"); // replace with your api-key endpoint URL
       setApiKey(response.data.api_key);
     } catch (error) {
@@ -21,6 +24,7 @@ export const ApiKeyConfig = (): JSX.Element => {
 
   const copyToClipboard = async (text: string) => {
     try {
+      void track("COPY_API_KEY")
       await navigator.clipboard.writeText(text);
     } catch (err) {
       console.error("Failed to copy:", err);

frontend/app/explore/DocumentItem/DocumentData.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import { useAxios } from "@/lib/hooks";
 
+import { useEventTracking } from "@/services/analytics/useEventTracking";
 import { useSupabase } from "../../../lib/context/SupabaseProvider";
 
 interface DocumentDataProps {
@@ -16,6 +17,8 @@ type DocumentDetails = any;
 const DocumentData = ({ documentName }: DocumentDataProps): JSX.Element => {
   const { session } = useSupabase();
   const { axiosInstance } = useAxios();
+  const { track } = useEventTracking();
+
 
   const [documents, setDocuments] = useState<DocumentDetails[]>([]);
 
@@ -25,6 +28,7 @@ const DocumentData = ({ documentName }: DocumentDataProps): JSX.Element => {
 
   useEffect(() => {
     const fetchDocuments = async () => {
+      void track("GET_DOCUMENT_DETAILS");
       const res = await axiosInstance.get<{ documents: DocumentDetails[] }>(
         `/explore/${documentName}`
       );

frontend/app/explore/DocumentItem/index.tsx

@@ -16,6 +16,7 @@ import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useAxios } from "@/lib/hooks";
 import { useToast } from "@/lib/hooks/useToast";
 import { Document } from "@/lib/types/Document";
+import { useEventTracking } from "@/services/analytics/useEventTracking";
 
 import DocumentData from "./DocumentData";
 
@@ -30,13 +31,15 @@ const DocumentItem = forwardRef(
     const { publish } = useToast();
     const { session } = useSupabase();
     const { axiosInstance } = useAxios();
+    const { track } = useEventTracking();
 
     if (!session) {
       throw new Error("User session not found");
     }
 
     const deleteDocument = async (name: string) => {
       setIsDeleting(true);
+      void track("DELETE_DOCUMENT");
       try {
         await axiosInstance.delete(`/explore/${name}`);
         setDocuments((docs) => docs.filter((doc) => doc.name !== name)); // Optimistic update

frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts

@@ -27,7 +27,7 @@ export const useFileUploader = () => {
       formData.append("file", file);
       try {
         const response = await axiosInstance.post(`/upload`, formData);
-        track("FILE_UPLOADED");
+        void track("FILE_UPLOADED");
         publish({
           variant: response.data.type,
           text:

frontend/lib/context/BrainProvider/hooks/useBrainState.ts

@@ -7,6 +7,7 @@ import { useAxios, useToast } from "@/lib/hooks";
 
 import { Brain } from "../types";
 
+
 const createBrainFromBackend = async (
   axiosInstance: AxiosInstance,
   name: string

frontend/services/analytics/useEventTracking.ts

@@ -11,7 +11,7 @@ export const useEventTracking = () => {
   const { session } = useSupabase();
 
   const track = async (event: string): Promise<void> => {
-    await analytics?.identify(session?.user.id);
+    await analytics?.identify(session?.user.email);
     await analytics?.track(event);
   };