cutomise error page using error image and text from branding settings

Author: raheeliftikhar5

client/packages/lowcoder/src/components/ErrorFallback.tsx

@@ -0,0 +1,70 @@
+import { ExclamationCircleFilled, WarningFilled } from "@ant-design/icons";
+import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
+import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
+import Button from "antd/es/button";
+import Flex from "antd/es/flex";
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import history from "util/history";
+
+const StyledFlex = styled(Flex)`
+  height: 100vh;
+  width: 300px;
+  margin: 0 auto;
+`;
+
+const StyledErrorImage = styled.img`
+  width: 300px;
+`;
+
+const StyledErrorIcon = styled(ExclamationCircleFilled)`
+  svg {
+    width: 80px;
+    height: 80px;
+    color: #ff4d4f;
+  }
+`;
+
+const StyledErrorText = styled.h2`
+  margin: 1rem 0;
+`;
+
+const DefaultErrorMessage = 'Something went wrong while displaying this webpage';
+
+const ErrorFallback = (props: {
+  errorMessage?: string,
+}) => {
+  const brandingSettings = useSelector(getBrandingSetting);
+
+  const errorText = useMemo(() => {
+    if (props.errorMessage) return props.errorMessage;
+    if (brandingSettings?.config_set?.errorPageText) return brandingSettings?.config_set?.errorPageText;
+    return DefaultErrorMessage;
+  }, [props.errorMessage, brandingSettings?.config_set?.errorPageText]);
+  
+  const errorImage = useMemo(() => {
+    const imageUrl = brandingSettings?.config_set?.signUpPageImage || '';
+    if (Boolean(brandingSettings?.orgId)) {
+      return buildMaterialPreviewURL(imageUrl);
+    }
+    return imageUrl;
+  }, [brandingSettings?.orgId, brandingSettings?.config_set?.errorPageImage]);
+
+  return (
+
+    <StyledFlex align="center" justify="center" vertical>
+      {Boolean(errorImage) && false
+        ? <StyledErrorImage src={errorImage} />
+        : <StyledErrorIcon />
+      }
+      <StyledErrorText>{errorText}</StyledErrorText>
+      <Button type="primary" onClick={() => history.push(ALL_APPLICATIONS_URL)}>
+        Go to Apps
+      </Button>
+    </StyledFlex>
+  )
+}
+
+export default ErrorFallback;

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -28,9 +28,6 @@ import { DatasourceApi } from "api/datasourceApi";
 import { useRootCompInstance } from "./useRootCompInstance";
 import EditorSkeletonView from "./editorSkeletonView";
 import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
-import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
-import history from "util/history";
-import Flex from "antd/es/flex";
 import React from "react";
 import dayjs from "dayjs";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
@@ -50,6 +47,8 @@ const AppEditorInternalView = lazy(
     .then(moduleExports => ({default: moduleExports.AppEditorInternalView}))
 );
 
+const ErrorFallback = lazy(() => import("components/ErrorFallback"));
+
 const AppEditor = React.memo(() => {
   const dispatch = useDispatch();
   const params = useParams<AppPathParams>();
@@ -209,39 +208,12 @@ 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={{
-        height: '300px',
-        width: '400px',
-        margin: '0 auto',
-      }}>
-        <h4>{appError}</h4>
-        <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Back to Home</button>
-      </Flex>
-    )
+    return <ErrorFallback errorMessage={appError} />
   }
 
   return (
-    <ErrorBoundary fallback={fallbackUI}>
-      {/*<PaginationComp*/}
-      {/*    currentPage={currentPage}*/}
-      {/*    pageSize={pageSize}*/}
-      {/*    setPageSize={setPageSize}*/}
-      {/*    setCurrentPage={setCurrentPage}*/}
-      {/*    total={elements.total}*/}
-      {/*/>*/}
+    <ErrorBoundary fallback={<ErrorFallback />}>
       {showAppSnapshot ? (
         <Suspense fallback={<EditorSkeletonView />}>
           <AppSnapshot

client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx

@@ -55,16 +55,16 @@ enum SettingsEnum {
 const defaultSettings = {
   logo: null,
   squareLogo: null,
-  mainBrandingColor: "#FF5733",
+  mainBrandingColor: "#B480DE",
   appHeaderColor: "#2c2c2c",
   adminSidebarColor: "#f7f9fc",
   adminSidebarFontColor: "#000000e0",
   adminSidebarActiveBgColor: "#ebf0f7",
   adminSidebarActiveFontColor: "#4965f2",
-  editorSidebarColor: "#f4f4f4",
-  editorSidebarFontColor: "",
-  editorSidebarActiveBgColor: "",
-  editorSidebarActiveFontColor: "",
+  editorSidebarColor: "#393b47",
+  editorSidebarFontColor: "#ffffffa6",
+  editorSidebarActiveBgColor: "#8b8fa37f",
+  editorSidebarActiveFontColor: "#ffffff",
   font: "Roboto",
   errorPageText: "Oops! Something went wrong.",
   errorPageImage: null,