forked from langflow-ai/langflow
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: health check and error handling (langflow-ai#3620)
* Refactored getHealth to get if any value of health check is not ok * Added custom health check * Created generic error component to display error popups * added useHealthCheck hook * Updated wrapper page to use health check hook * Removed custom error * Added custom loading page for when custom primary loading is not done * Changed health check to be disabled when flow is building or any request is pending * Changed text of ttimeout error
- Loading branch information
1 parent
9102c62
commit 59b6d8a
Showing
8 changed files
with
128 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
src/frontend/src/customization/components/custom-loading-page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export function CustomLoadingPage() { | ||
| return <></>; | ||
| } |
2 changes: 1 addition & 1 deletion
2
...ustomization/hooks/use-primary-loading.ts → ...ation/hooks/use-custom-primary-loading.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/frontend/src/pages/AppWrapperPage/components/GenericErrorComponent/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import FetchErrorComponent from "@/components/fetchErrorComponent"; | ||
| import TimeoutErrorComponent from "@/components/timeoutErrorComponent"; | ||
| import { | ||
| FETCH_ERROR_DESCRIPION, | ||
| FETCH_ERROR_MESSAGE, | ||
| TIMEOUT_ERROR_DESCRIPION, | ||
| TIMEOUT_ERROR_MESSAGE, | ||
| } from "@/constants/constants"; | ||
|
|
||
| export function GenericErrorComponent({ healthCheckTimeout, fetching, retry }) { | ||
| switch (healthCheckTimeout) { | ||
| case "serverDown": | ||
| return ( | ||
| <FetchErrorComponent | ||
| description={FETCH_ERROR_DESCRIPION} | ||
| message={FETCH_ERROR_MESSAGE} | ||
| openModal={true} | ||
| setRetry={retry} | ||
| isLoadingHealth={fetching} | ||
| ></FetchErrorComponent> | ||
| ); | ||
| case "timeout": | ||
| return ( | ||
| <TimeoutErrorComponent | ||
| description={TIMEOUT_ERROR_MESSAGE} | ||
| message={TIMEOUT_ERROR_DESCRIPION} | ||
| openModal={true} | ||
| setRetry={retry} | ||
| isLoadingHealth={fetching} | ||
| ></TimeoutErrorComponent> | ||
| ); | ||
| default: | ||
| return <></>; | ||
| } | ||
| } |
56 changes: 56 additions & 0 deletions
56
src/frontend/src/pages/AppWrapperPage/hooks/use-health-check.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { useGetHealthQuery } from "@/controllers/API/queries/health"; | ||
| import useFlowsManagerStore from "@/stores/flowsManagerStore"; | ||
| import useFlowStore from "@/stores/flowStore"; | ||
| import { useUtilityStore } from "@/stores/utilityStore"; | ||
| import { useIsFetching, useIsMutating } from "@tanstack/react-query"; | ||
| import { AxiosError } from "axios"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| export function useHealthCheck() { | ||
| const healthCheckMaxRetries = useFlowsManagerStore( | ||
| (state) => state.healthCheckMaxRetries, | ||
| ); | ||
|
|
||
| const healthCheckTimeout = useUtilityStore( | ||
| (state) => state.healthCheckTimeout, | ||
| ); | ||
|
|
||
| const isMutating = useIsMutating(); | ||
| const isFetching = useIsFetching({ | ||
| predicate: (query) => query.queryKey[0] !== "useGetHealthQuery", | ||
| }); | ||
| const isBuilding = useFlowStore((state) => state.isBuilding); | ||
|
|
||
| const disabled = isMutating || isFetching || isBuilding; | ||
|
|
||
| const { | ||
| isFetching: fetchingHealth, | ||
| isError: isErrorHealth, | ||
| error, | ||
| refetch, | ||
| } = useGetHealthQuery({ enableInterval: !disabled }); | ||
| const [retryCount, setRetryCount] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| const isServerBusy = | ||
| (error as AxiosError)?.response?.status === 503 || | ||
| (error as AxiosError)?.response?.status === 429; | ||
|
|
||
| if (isServerBusy && isErrorHealth && !disabled) { | ||
| const maxRetries = healthCheckMaxRetries; | ||
| if (retryCount < maxRetries) { | ||
| const delay = Math.pow(2, retryCount) * 1000; | ||
| const timer = setTimeout(() => { | ||
| refetch(); | ||
| setRetryCount(retryCount + 1); | ||
| }, delay); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| } | ||
| } else { | ||
| setRetryCount(0); | ||
| } | ||
| }, [isErrorHealth, retryCount, refetch]); | ||
|
|
||
| return { healthCheckTimeout, refetch, fetchingHealth }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters