Merge pull request #664 from getmaxun/error-handling

chore: better ui error logging

src/components/browser/BrowserContent.tsx

@@ -130,7 +130,7 @@ export const BrowserContent = () => {
         }
       })
       .catch((error) => {
-        console.log("Fetching current url failed");
+        console.log(`Fetching current url failed: ${error}`);
       });
   }, []);
 

src/components/browser/BrowserNavBar.tsx

@@ -63,7 +63,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
         handleUrlChanged(response);
       }
     }).catch((error) => {
-      console.log("Fetching current url failed");
+      console.log(`Fetching current url failed: ${error}`);
     })
   }, []);
 

src/components/browser/UrlForm.tsx

@@ -40,7 +40,7 @@ export const UrlForm = ({
             lastSubmittedRef.current = url;  // Update the last submitted URL
         } catch (e) {
             //alert(`ERROR: ${url} is not a valid url!`);
-            console.log(e)
+            console.log(`Failed to submit form:`,e)
         }
     }, [setCurrentAddress]);
 

src/components/recorder/LeftSidePanel.tsx

@@ -19,7 +19,7 @@ const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) =
         throw new Error("No workflow found");
       }
     }
-  ).catch((error) => { console.log(error.message) })
+  ).catch((error) => { console.log(`Failed to fetch workflow:`,error.message) })
 };
 
 interface LeftSidePanelProps {

src/components/recorder/RightSidePanel.tsx

@@ -32,7 +32,7 @@ const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) =
         throw new Error("No workflow found");
       }
     }
-  ).catch((error) => { console.log(error.message) })
+  ).catch((error) => { console.log(`Failed to fetch workflow:`,error.message) })
 };
 
 interface RightSidePanelProps {
@@ -233,7 +233,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           );
 
           updateListStepData(currentListId, extractedData);
-          console.log("✅ Client-side extraction completed:", extractedData);
+          console.log("✅ UI extraction completed:");
         } catch (error) {
           console.error("Error in client-side data extraction:", error);
           notify("error", "Failed to extract data client-side");
@@ -253,7 +253,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
             pagination: { type: "", selector: "" },
           });
 
-          console.log("📤 Sent extraction request to backend");
+          console.log("📤 Sent extraction request to server");
         } catch (error) {
           console.error("Error in backend data extraction:", error);
         }

src/helpers/clientListExtractor.ts

@@ -464,8 +464,6 @@ class ClientListExtractor {
         }
       }
 
-      console.log("📦 Found containers:", containers.length);
-
       // Analyze fields for table vs non-table context
       const containerFields: ContainerFields[] = containers.map(() => ({
         tableFields: {},
@@ -642,7 +640,6 @@ class ClientListExtractor {
                   const value = this.extractValue(element, attribute);
                   if (value !== null && value !== "") {
                     record[label] = value;
-                    console.log(`✅ Extracted ${label}:`, value);
                   } else {
                     console.warn(
                       `❌ No value for ${label} in row ${rowIndex + 1}`
@@ -691,7 +688,6 @@ class ClientListExtractor {
               const value = this.extractValue(element, attribute);
               if (value !== null && value !== "") {
                 record[label] = value;
-                console.log(`✅ Extracted ${label}:`, value);
               } else {
                 console.warn(
                   `❌ No value for ${label} in container ${containerIndex + 1}`
@@ -716,13 +712,6 @@ class ClientListExtractor {
       // Combine and limit results
       const extractedData = [...tableData, ...nonTableData].slice(0, limit);
 
-      console.log("🎉 Client extraction complete:", {
-        totalRecords: extractedData.length,
-        tableRecords: tableData.length,
-        nonTableRecords: nonTableData.length,
-        data: extractedData,
-      });
-
       return extractedData;
     } catch (error) {
       console.error("Error in client-side extractListData:", error);

src/helpers/clientSelectorGenerator.ts

@@ -1803,22 +1803,16 @@ class ClientSelectorGenerator {
         let elements = iframeDoc.elementsFromPoint(x, y) as HTMLElement[];
         if (!elements.length) return null;
 
-        console.log("ALL ELEMENTS", elements);
-
         const dialogElement = elements.find(
           (el) => el.getAttribute("role") === "dialog"
         );
 
         if (dialogElement) {
-          console.log("FOUND DIALOG ELEMENT", dialogElement);
-
           // Filter to keep only the dialog and its children
           const dialogElements = elements.filter(
             (el) => el === dialogElement || dialogElement.contains(el)
           );
 
-          console.log("FILTERED DIALOG ELEMENTS", dialogElements);
-
           // Get deepest element within the dialog
           const findDeepestInDialog = (
             elements: HTMLElement[]
@@ -1852,7 +1846,6 @@ class ClientSelectorGenerator {
           };
 
           const deepestInDialog = findDeepestInDialog(dialogElements);
-          console.log("DEEPEST IN DIALOG", deepestInDialog);
           return deepestInDialog;
         }
 
@@ -1874,13 +1867,11 @@ class ClientSelectorGenerator {
               (style.position === "fixed" || style.position === "absolute") &&
               zIndex > 50
             ) {
-              console.log("FOUND POSITIONED ELEMENT", element);
               return element;
             }
 
             // For SVG elements (like close buttons), prefer them if they're in the top elements
             if (element.tagName === "SVG" && i < 2) {
-              console.log("FOUND SVG ELEMENT", element);
               return element;
             }
           }
@@ -1913,8 +1904,6 @@ class ClientSelectorGenerator {
 
         let deepestElement = findDeepestElement(elements);
 
-        console.log("DEEPEST ELEMENT", deepestElement);
-
         if (!deepestElement) return null;
 
         const traverseShadowDOM = (element: HTMLElement): HTMLElement => {
@@ -3133,13 +3122,6 @@ class ClientSelectorGenerator {
     childSelectors?: string[];
   } | null {
     try {
-      console.log("🐛 DEBUG: generateDataForHighlighter called with:", {
-        coordinates,
-        getList: this.getList,
-        listSelector: this.listSelector,
-        isDOMMode,
-      });
-
       // Use instance variables instead of parameters
       const rect = this.getRect(
         iframeDocument,
@@ -3161,11 +3143,6 @@ class ClientSelectorGenerator {
       );
 
       if (!rect || !elementInfo || !displaySelector) {
-        console.log("🐛 DEBUG: Missing basic data:", {
-          rect: !!rect,
-          elementInfo: !!elementInfo,
-          selectors: !!displaySelector,
-        });
         return null;
       }
 
@@ -3183,24 +3160,12 @@ class ClientSelectorGenerator {
 
       if (this.getList === true) {
         if (this.listSelector !== "") {
-          console.log(
-            "🐛 DEBUG: Getting child selectors for:",
-            this.listSelector
-          );
           const childSelectors = this.getChildSelectors(
             iframeDocument,
             this.listSelector
           );
-          console.log("🐛 DEBUG: Generated child selectors:", {
-            count: childSelectors.length,
-            selectors: childSelectors.slice(0, 10), // First 10
-            listSelector: this.listSelector,
-          });
           return { ...highlighterData, childSelectors };
         } else {
-          console.log(
-            "🐛 DEBUG: No listSelector set, returning without childSelectors"
-          );
           return highlighterData;
         }
       } else {
@@ -3234,8 +3199,6 @@ class ClientSelectorGenerator {
           )
         : this.getSelectors(iframeDocument, coordinates);
 
-    console.log("SELECTOR BASED ON CUSTOM ACTION", selectorBasedOnCustomAction);
-
     if (this.paginationMode && selectorBasedOnCustomAction) {
       // Chain selectors in specific priority order
       const selectors = selectorBasedOnCustomAction;

src/pages/Register.tsx

@@ -42,7 +42,6 @@ const Register = () => {
     setLoading(true);
     try {
       const { data } = await axios.post(`${apiUrl}/auth/register`, { email, password });
-      console.log(data);
       dispatch({ type: "LOGIN", payload: data });
       notify("success", t('register.welcome_notification'));
       window.localStorage.setItem("user", JSON.stringify(data));