fallback ui for error boundary

MenamAfzal · MenamAfzal · commit 53c267bc4468 · 2024-07-05T21:52:14.000+05:00
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -53,7 +53,6 @@ import { SystemWarning } from "./components/SystemWarning";
 import { getBrandingConfig } from "./redux/selectors/configSelectors";
 import { buildMaterialPreviewURL } from "./util/materialUtils";
 import GlobalInstances from 'components/GlobalInstances';
-import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -90,10 +89,6 @@ type AppIndexProps = {
 };
 
 class AppIndex extends React.Component<AppIndexProps, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {error: null};
-  }
   componentDidMount() {
     this.props.getCurrentUser();
   }
@@ -106,16 +101,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       this.props.fetchConfig(this.props.currentOrgId);
     }
   }
-  updateError = () => {
-    this.state.error('known');
-  };
-  fallbackRender = ({error, resetErrorBoundary}: FallbackProps) => {
-   return <div role="alert">
-      <h3>Error Boundary</h3>
-      <p>Something went wrong.</p>
-      <button onClick={resetErrorBoundary}>Reset</button>
-    </div>;
-  };
   render() {
     const isTemplate = hasQueryParam('template');
     const pathname = history.location.pathname;
@@ -281,12 +266,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
           ]}
         </Helmet>
         <SystemWarning />
-        <ErrorBoundary
-          fallbackRender={this.fallbackRender}
-          onReset={(details) => {
-            this.state.error(null);
-          }}
-        >
           <Router history={history}>
             <Switch>
               {/* 
@@ -387,7 +366,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
               )}
             </Switch>
           </Router>
-        </ErrorBoundary>
       </Wrapper>
     );
   }
diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx
@@ -417,7 +417,7 @@ export function GridItem(props: GridItemProps) {
   const render = () => {
     let child = React.Children.only(children);
     // Create the child element. We clone the existing element but modify its className and style.
-    let newChild: React.ReactElement = React.cloneElement(withErrorBoundary(child), {
+    let newChild: React.ReactElement = React.cloneElement(child, {
       ref: elementRef,
       className: clsx(
         "react-grid-item",
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -28,6 +28,8 @@ 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";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -133,9 +135,14 @@ export default function AppEditor() {
       })
     );
   }, [viewMode, applicationId, dispatch]);
-
+const fallbackUI = (
+  <div style={{display:'flex', height:'100%', width:'100%', alignItems:'center',justifyContent:'center', gap:'8px',marginTop:'10px'}}>
+    <p style={{margin:0}}>Something went wrong while displaying this webpage</p>
+    <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Go to Apps</button>
+  </div>
+);
   return (
-    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
+    <ErrorBoundary fallback={fallbackUI}>
       {showAppSnapshot ? (
         <Suspense fallback={<EditorSkeletonView />}>
           <AppSnapshot
