fix(analytics): june debug for real (#1033)

* 🔥 remove Suspense because no ssr in front anymore * ✨ add debugging * 🔥 remove debugger and better logs * 🐛 fixed tracker by adding it to dependencies * 🚨 add dependencies to hooks * 🚨 remove linter warning from unawaited promise
QuivrHQ · Aug 25, 2023 · a9411c9 · a9411c9
1 parent d36217b
commit a9411c9
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 60 deletions.
diff --git a/frontend/app/explore/DocumentItem/index.tsx b/frontend/app/explore/DocumentItem/index.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable max-lines */
 "use client";
 import {
   Dispatch,
@@ -7,19 +7,19 @@ import {
   SetStateAction,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
 import { AnimatedCard } from "@/lib/components/ui/Card";
 import Ellipsis from "@/lib/components/ui/Ellipsis";
 import { Modal } from "@/lib/components/ui/Modal";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useAxios, useToast } from "@/lib/hooks";
 import { Document } from "@/lib/types/Document";
 import { useEventTracking } from "@/services/analytics/useEventTracking";
 
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import DocumentData from "./DocumentData";
-import { useTranslation } from "react-i18next";
 
 interface DocumentProps {
   document: Document;
@@ -36,30 +36,35 @@ const DocumentItem = forwardRef(
     const { currentBrain } = useBrainContext();
 
     const canDeleteFile = currentBrain?.role === "Owner";
-    const {t} = useTranslation(["translation","explore"]);
+    const { t } = useTranslation(["translation", "explore"]);
 
     if (!session) {
-      throw new Error(t("sessionNotFound", {ns: "explore"}));
+      throw new Error(t("sessionNotFound", { ns: "explore" }));
     }
 
     const deleteDocument = async (name: string) => {
       setIsDeleting(true);
       void track("DELETE_DOCUMENT");
       try {
-        if (currentBrain?.id === undefined)
-          throw new Error(t("noBrain", {ns: "explore"}));
+        if (currentBrain?.id === undefined) {
+          throw new Error(t("noBrain", { ns: "explore" }));
+        }
         await axiosInstance.delete(
           `/explore/${name}/?brain_id=${currentBrain.id}`
         );
         setDocuments((docs) => docs.filter((doc) => doc.name !== name)); // Optimistic update
         publish({
           variant: "success",
-          text: t("deleted", {fileName: name, brain: currentBrain.name, ns: "explore"})
+          text: t("deleted", {
+            fileName: name,
+            brain: currentBrain.name,
+            ns: "explore",
+          }),
         });
       } catch (error) {
         publish({
           variant: "warning",
-          text: t("errorDeleting", {fileName: name, ns: "explore"})
+          text: t("errorDeleting", { fileName: name, ns: "explore" }),
         });
         console.error(`Error deleting ${name}`, error);
       }
@@ -79,34 +84,38 @@ const DocumentItem = forwardRef(
           {document.name}
         </Ellipsis>
         <div className="flex gap-2 self-end">
-          <Modal Trigger={<Button className="">{t("view", {ns: "explore"})}</Button>}>
+          <Modal
+            Trigger={
+              <Button className="">{t("view", { ns: "explore" })}</Button>
+            }
+          >
             <DocumentData documentName={document.name} />
           </Modal>
 
           {canDeleteFile && (
             <Modal
-            title={t("deleteConfirmTitle",{ns: "explore"})}
-            desc={t("deleteConfirmText",{ns: "explore"})}
-            Trigger={
-              <Button isLoading={isDeleting} variant={"danger"} className="">
-                {t("deleteButton")}
-              </Button>
-            }
-            CloseTrigger={
-              <Button
-                variant={"danger"}
-                isLoading={isDeleting}
-                onClick={() => {
-                  deleteDocument(document.name);
-                }}
-                className="self-end"
-              >
-                {t("deleteForeverButton")}
-              </Button>
-            }
-          >
-            <p>{document.name}</p>
-          </Modal>
+              title={t("deleteConfirmTitle", { ns: "explore" })}
+              desc={t("deleteConfirmText", { ns: "explore" })}
+              Trigger={
+                <Button isLoading={isDeleting} variant={"danger"} className="">
+                  {t("deleteButton")}
+                </Button>
+              }
+              CloseTrigger={
+                <Button
+                  variant={"danger"}
+                  isLoading={isDeleting}
+                  onClick={() => {
+                    void deleteDocument(document.name);
+                  }}
+                  className="self-end"
+                >
+                  {t("deleteForeverButton")}
+                </Button>
+              }
+            >
+              <p>{document.name}</p>
+            </Modal>
           )}
         </div>
       </AnimatedCard>

diff --git a/frontend/app/invitation/[brainId]/hooks/useInvitation.ts b/frontend/app/invitation/[brainId]/hooks/useInvitation.ts
@@ -60,7 +60,7 @@ export const useInvitation = () => {
       }
     };
     void checkInvitationValidity();
-  }, [brainId]);
+  }, [brainId, getInvitation, publish, router, t]);
 
   const handleAccept = async () => {
     setIsProcessingRequest(true);

diff --git a/frontend/app/upload/components/Crawler/hooks/useCrawler.ts b/frontend/app/upload/components/Crawler/hooks/useCrawler.ts
@@ -1,3 +1,4 @@
+"use client";
 import { UUID } from "crypto";
 import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -31,6 +32,7 @@ export const useCrawler = () => {
       const url = urlInputRef.current ? urlInputRef.current.value : null;
 
       if (url === null || !isValidUrl(url)) {
+        console.log("Invalid URL");
         void track("URL_INVALID");
 
         publish({
@@ -52,6 +54,7 @@ export const useCrawler = () => {
 
       setCrawling(true);
 
+      console.log("Tracking URL_CRAWLED");
       void track("URL_CRAWLED");
 
       try {
@@ -79,7 +82,7 @@ export const useCrawler = () => {
         setCrawling(false);
       }
     },
-    [session.access_token]
+    [crawlWebsiteUrl, publish, t, track]
   );
 
   return {

diff --git a/frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts b/frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts
@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */
+
 import axios from "axios";
 import { UUID } from "crypto";
 import { useCallback, useState } from "react";
@@ -62,7 +63,7 @@ export const useFileUploader = () => {
         }
       }
     },
-    [session.access_token]
+    [publish, t, track, uploadFile]
   );
 
   const onDrop = (acceptedFiles: File[], fileRejections: FileRejection[]) => {

diff --git a/frontend/app/upload/page.tsx b/frontend/app/upload/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import Link from "next/link";
-import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
@@ -58,24 +57,22 @@ const UploadPage = (): JSX.Element => {
   }
 
   return (
-    <Suspense fallback="Loading...">
-      <main className="pt-10">
-        <PageHeading
-          title={t("title", { ns: "upload" })}
-          subtitle={t("subtitle", { ns: "upload" })}
-        />
-        <FileUploader />
-        <Divider text={t("or")} className="m-5" />
-        <Crawler />
-        <div className="flex flex-col items-center justify-center gap-5 mt-5">
-          <Link href={"/chat"}>
-            <Button variant={"secondary"} className="py-3">
-              {t("chatButton")}
-            </Button>
-          </Link>
-        </div>
-      </main>
-    </Suspense>
+    <main className="pt-10">
+      <PageHeading
+        title={t("title", { ns: "upload" })}
+        subtitle={t("subtitle", { ns: "upload" })}
+      />
+      <FileUploader />
+      <Divider text={t("or")} className="m-5" />
+      <Crawler />
+      <div className="flex flex-col items-center justify-center gap-5 mt-5">
+        <Link href={"/chat"}>
+          <Button variant={"secondary"} className="py-3">
+            {t("chatButton")}
+          </Button>
+        </Link>
+      </div>
+    </main>
   );
 };
 

diff --git a/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts b/frontend/lib/context/BrainProvider/hooks/useBrainProvider.ts
@@ -66,7 +66,7 @@ export const useBrainProvider = () => {
     } finally {
       setIsFetchingBrains(false);
     }
-  }, []);
+  }, [getBrains]);
 
   const setActiveBrain = useCallback(
     ({ id, name }: { id: UUID; name: string }) => {
@@ -75,7 +75,7 @@ export const useBrainProvider = () => {
       setCurrentBrainId(id);
       void track("CHANGE_BRAIN");
     },
-    []
+    [track]
   );
 
   const setDefaultBrain = useCallback(async () => {
@@ -86,7 +86,7 @@ export const useBrainProvider = () => {
     } else {
       console.warn("No brains found");
     }
-  }, [setActiveBrain]);
+  }, [getDefaultBrain, setActiveBrain]);
 
   const fetchAndSetActiveBrain = useCallback(async () => {
     const storedBrain = getBrainFromLocalStorage();

diff --git a/frontend/services/analytics/useEventTracking.ts b/frontend/services/analytics/useEventTracking.ts
@@ -4,15 +4,20 @@ import { useSupabase } from "@/lib/context/SupabaseProvider";
 
 import { useJune } from "./useJune";
 
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useEventTracking = () => {
   const analytics = useJune();
   const { session } = useSupabase();
 
   const track = async (event: string): Promise<void> => {
-    await analytics?.identify(session?.user.id, {email: session?.user.email});
-    await analytics?.track(event);
+    console.log("Event to track", event);
+    if (analytics === undefined) {
+      console.log("No analytics found");
+
+      return;
+    }
+    await analytics.identify(session?.user.id, { email: session?.user.email });
+    await analytics.track(event);
   };
 
   return {

diff --git a/frontend/services/analytics/useJune.ts b/frontend/services/analytics/useJune.ts
@@ -1,3 +1,4 @@
+"use client";
 import { AnalyticsBrowser } from "@june-so/analytics-next";
 import { useEffect, useState } from "react";
 
@@ -11,11 +12,14 @@ export const useJune = (): AnalyticsBrowser | undefined => {
   useEffect(() => {
     const loadAnalytics = () => {
       if (juneApiKey === undefined) {
+        console.log("No June API key found");
+
         return;
       }
       const response = AnalyticsBrowser.load({
         writeKey: juneApiKey,
       });
+      console.log("Loaded June Analytics", response);
       setAnalytics(response);
     };
     loadAnalytics();