show error message when app is down

raheeliftikhar5 · raheeliftikhar5 · commit 7cf57507749d · 2024-10-30T13:12:59.000+05:00
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -58,6 +58,7 @@ import GlobalInstances from 'components/GlobalInstances';
 import { fetchHomeData } from "./redux/reduxActions/applicationActions";
 import { getNpmPackageMeta } from "./comps/utils/remote";
 import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
+import ErrorFallback from "./components/ErrorFallback";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -89,7 +90,9 @@ type AppIndexProps = {
   currentUserAnonymous: boolean;
   orgDev: boolean;
   defaultHomePage: string | null | undefined;
+  fetchHomeOrgFinished: boolean;
   fetchHomeDataFinished: boolean;
+  fetchHomeDataError: boolean;
   fetchConfig: (orgId?: string) => void;
   fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
   fetchLowcoderCompVersions: () => void;
@@ -130,9 +133,14 @@ class AppIndex extends React.Component<AppIndexProps, any> {
     /* if (isLocalhost || isLowCoderDomain) {
       posthog.init('phc_lD36OXeppUehLgI33YFhioTpXqThZ5QqR8IWeKvXP7f', { api_host: 'https://eu.i.posthog.com', person_profiles: 'always' });
     } */
-
+    
+    // show error message when /home endpoint fails
+    if (this.props.fetchHomeDataFinished && this.props.fetchHomeDataError) {
+      return <ErrorFallback />
+    }
+    
     // make sure all users in this app have checked login info
-    if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeDataFinished)) {
+    if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeOrgFinished)) {
       const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname);
       return <ProductLoading hideHeader={hideLoadingHeader} />;
     }
@@ -409,7 +417,9 @@ const mapStateToProps = (state: AppState) => ({
   currentUserAnonymous: state.ui.users.user.isAnonymous,
   currentOrgId: state.ui.users.user.currentOrgId,
   defaultHomePage: state.ui.application.homeOrg?.commonSettings.defaultHomePage,
-  fetchHomeDataFinished: Boolean(state.ui.application.homeOrg?.commonSettings),
+  fetchHomeOrgFinished: Boolean(state.ui.application.homeOrg?.commonSettings),
+  fetchHomeDataFinished: state.ui.application.loadingStatus.fetchHomeDataFinished,
+  fetchHomeDataError: state.ui.application.fetchHomeDataError,
   favicon: getBrandingConfig(state)?.favicon
     ? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!)
     : favicon,
@@ -449,7 +459,7 @@ export function bootstrap() {
   const root = createRoot(container!);
   root.render(
     <Provider store={reduxStore}>
-        <AppIndexWithProps />
+      <AppIndexWithProps />
     </Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/components/ErrorFallback.tsx b/client/packages/lowcoder/src/components/ErrorFallback.tsx
@@ -0,0 +1,38 @@
+import Flex from "antd/es/flex";
+import { WarningIcon } from "lowcoder-design";
+
+const ErrorFallback = (props: {
+  heading?: string,
+  buttonText?: string,
+  onButtonClick?: () => void,
+}) => (
+  <Flex align="center" justify="center" vertical style={{
+    height: '90vh',
+    width: '400px',
+    margin: '0 auto',
+  }}>
+    <WarningIcon width={'100px'} height={'100px'} />
+    <h1 style={{marginTop: '20px', marginBottom: '20px' }}>
+      {Boolean(props.heading)  ? props.heading : 'Oops, Something went wrong!'}
+    </h1>
+    <button
+      onClick={() => {
+        if(props.onButtonClick) {
+          return props?.onButtonClick();
+        }
+        window.location.reload();
+      }}
+      style={{
+        background: '#4965f2',
+        border: '1px solid #4965f2',
+        color: '#ffffff',
+        borderRadius:'6px',
+        fontSize: '16px',
+        padding: '10px 28px',
+    }}>
+      {Boolean(props.buttonText)  ? props.buttonText : 'Reload'}
+    </button>
+  </Flex>
+);
+
+export default ErrorFallback;
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -36,6 +36,7 @@ import dayjs from "dayjs";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 import { notificationInstance } from "components/GlobalInstances";
 import { AppState } from "@lowcoder-ee/redux/reducers";
+import ErrorFallback from "@lowcoder-ee/components/ErrorFallback";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -191,17 +192,6 @@ const AppEditor = React.memo(() => {
     }
   }, [isLowcoderCompLoading, fetchApplication]);
 
-  const fallbackUI = useMemo(() => (
-    <Flex align="center" justify="center" vertical style={{
-      height: '300px',
-      width: '400px',
-      margin: '0 auto',
-    }}>
-      <h4 style={{margin: 0}}>Something went wrong while displaying this webpage</h4>
-      <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Go to Apps</button>
-    </Flex>
-  ), []);
-
   if (Boolean(appError)) {
     return (
       <Flex align="center" justify="center" vertical style={{
@@ -216,7 +206,12 @@ const AppEditor = React.memo(() => {
   }
 
   return (
-    <ErrorBoundary fallback={fallbackUI}>
+    <ErrorBoundary fallback={
+      <ErrorFallback
+        buttonText="Go to Apps"
+        onButtonClick={() => history.push(ALL_APPLICATIONS_URL)}
+      />
+    }>
       {showAppSnapshot ? (
         <Suspense fallback={<EditorSkeletonView />}>
           <AppSnapshot
diff --git a/client/packages/lowcoder/src/redux/reducers/uiReducers/applicationReducer.ts b/client/packages/lowcoder/src/redux/reducers/uiReducers/applicationReducer.ts
@@ -33,6 +33,7 @@ const initialState: ApplicationReduxState = {
     fetchingAppDetail: false,
     applicationPublishing: false,
   },
+  fetchHomeDataError: false,
 };
 
 const usersReducer = createReducer(initialState, {
@@ -91,6 +92,7 @@ const usersReducer = createReducer(initialState, {
       isFetchingHomeData: false,
       fetchHomeDataFinished: true,
     },
+    fetchHomeDataError: true,
   }),
   [ReduxActionTypes.FETCH_APPLICATION_RECYCLE_LIST_SUCCESS]: (
     state: ApplicationReduxState,
@@ -356,6 +358,7 @@ export interface ApplicationReduxState {
     fetchingAppDetail: boolean; // dsl in detail
     applicationPublishing: boolean;
   };
+  fetchHomeDataError: boolean;
 }
 
 export default usersReducer;
