Langflow UI stuck in Building without actually building the components

[ArianeFire]

Describe the bug
Hello and thanks for the amazing work,
Langflow regularly stuck in building state until I restart it like shown in the attached image.

Can someone help or is it a bug ?

Browser and Version

• Browser chrome
• Version [e.g. 22]

To Reproduce
Steps to reproduce the behavior:
Work on langflow for sometime (Editing flow, Running some components, ...)
Leave the browser window open for sometime (Some minutes)
Refresh or switch to another flow
Try to run a flow it get stuck in building.... but the components never run

Screenshots

Additional context
When I restart, It work fine but there's nothing show on the logs and the the building Icon is not animated on the components

[dosubot]

Hello, @ArianeFire! I'm here to help you with any issues you encounter. If you have any questions or need assistance, feel free to ask.

Yes, the issue where the Langflow UI gets stuck in the "Building" state without actually building the components is a known bug. The problem can occur due to errors in the updateVerticesOrder and buildVertices functions, which handle various states and errors. If an error occurs and is not properly managed, it could result in the UI being stuck in the "Building" state.

For example, in the updateVerticesOrder function, if an error occurs while fetching the vertices order, the state is set to not building:

useFlowStore.getState().setIsBuilding(false);

Similarly, in the buildVertices function, if an error occurs during the build process, the state is also set to not building:

useFlowStore.getState().setIsBuilding(false);

Additionally, the BuildTrigger component's handleBuild function sets the isBuilding state to true at the start of the build process and to false in the finally block, ensuring that the state is reset even if an error occurs. The streamNodeData function handles the streaming of build data and includes error handling for the EventSource connection. If an error occurs during the streaming, the isBuilding state is set to false and the connection is closed, which should prevent the UI from getting stuck in the "Building" state ^[1][2].

To diagnose the issue further, you can check the browser console for specific errors or warnings. The relevant error handling code logs the following message to the console:

console.error("EventSource failed:", error);

If the error contains data, it parses the error data and sets it in the state:

if (error.data) {
  const parsedData = JSON.parse(error.data);
  setErrorData({ title: parsedData.error });
  setIsBuilding(false);
}

Additionally, the updateVerticesOrder function handles errors by setting error data and updating the build state:

const setErrorData = useAlertStore.getState().setErrorData;
try {
  orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId);
} catch (error: any) {
  setErrorData({
    title: "Oops! Looks like you missed something",
    list: [error.response?.data?.detail ?? "Unknown Error"],
  });
  useFlowStore.getState().setIsBuilding(false);
  throw new Error("Invalid nodes");
}

This ensures that any issues with the EventSource connection or the vertices order update process will be logged to the console with detailed error messages, helping to diagnose why the UI is stuck in the "Building" state ^[2][3][1].

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[AndrewSun1010]

in the same situation, have you fixed it bro?

[ArianeFire]

No, it's a blocking issue for production, can't go to production with this.

I am suspecting the cache management to be the cause, One of my flow blocked forever just after a cache expiration message popup when running it through json

After adding the below code to extends the cache expiration time (Not proper way), the flow run properly (I will be testing it on langflow web to see) :

from langflow.services.deps import get_cache_service
et = get_cache_service().expiration_time
get_cache_service().expiration_time = et * et * et

[AndrewSun1010]

i fixed my problem, check in #2218