fix: network error handling and build errors (langflow-ai#4088)

* Fixed API not throwing network errors

* Fix onBuildError assigning wrong status for the components

* Fix Network Error handling, making it call onBuildError

* Fixed build stop not triggering the alert

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jordan Frazier <[email protected]>

src/frontend/src/controllers/API/api.tsx

@@ -250,18 +250,19 @@ async function performStreamingRequest({
   }
   let current: string[] = [];
   let textDecoder = new TextDecoder();
-  const response = await fetch(url, params);
-  if (!response.ok) {
-    if (onError) {
-      onError(response.status);
-    } else {
-      throw new Error("error in streaming request");
-    }
-  }
-  if (response.body === null) {
-    return;
-  }
+
   try {
+    const response = await fetch(url, params);
+    if (!response.ok) {
+      if (onError) {
+        onError(response.status);
+      } else {
+        throw new Error("Error in streaming request.");
+      }
+    }
+    if (response.body === null) {
+      return;
+    }
     const reader = response.body.getReader();
     while (true) {
       const { done, value } = await reader.read();

src/frontend/src/stores/flowStore.ts

@@ -675,10 +675,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         get().setLockChat(false);
       },
       onBuildError: (title: string, list: string[], elementList) => {
-        const idList = elementList
-          .map((element) => element.id)
-          .filter(Boolean) as string[];
-        useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILT);
+        const idList =
+          (elementList
+            ?.map((element) => element.id)
+            .filter(Boolean) as string[]) ?? get().nodes.map((n) => n.id);
+        useFlowStore.getState().updateBuildStatus(idList, BuildStatus.ERROR);
         if (get().componentsToUpdate)
           setErrorData({
             title:

src/frontend/src/utils/buildUtils.ts

@@ -25,7 +25,7 @@ type BuildVerticesParams = {
     buildId: string,
   ) => void; // Replace any with the actual type if it's not any
   onBuildComplete?: (allNodesValid: boolean) => void;
-  onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
+  onBuildError?: (title, list, idList?: VertexLayerElementType[]) => void;
   onBuildStopped?: () => void;
   onBuildStart?: (idList: VertexLayerElementType[]) => void;
   onValidateNodes?: (nodes: string[]) => void;
@@ -40,6 +40,7 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
     results: {},
     outputs: {},
     messages: [],
+    logs: {},
     inactive: true,
   };
   let inactiveVertexData = {
@@ -125,7 +126,7 @@ export async function buildFlowVerticesWithFallback(
   try {
     return await buildFlowVertices(params);
   } catch (e: any) {
-    if (e.message === "endpoint not available") {
+    if (e.message === "Endpoint not available") {
       return await buildVertices(params);
     }
     throw e;
@@ -295,12 +296,19 @@ export async function buildFlowVertices({
     },
     onError: (statusCode) => {
       if (statusCode === 404) {
-        throw new Error("endpoint not available");
+        throw new Error("Endpoint not available");
+      }
+      throw new Error("Error Building Component");
+    },
+    onNetworkError: (error: Error) => {
+      if (error.name === "AbortError") {
+        onBuildStopped && onBuildStopped();
+        return;
       }
-      throw new Error("error in streaming request");
+      onBuildError!("Error Building Component", [
+        "Network error. Please check the connection to the server.",
+      ]);
     },
-    // network error are likely caused by the window.stop() called in the stopBuild function
-    onNetworkError: onBuildStopped,
   });
 }