From 69b117f09ab456528eff001a91238fcdee483b20 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Fri, 5 Jul 2024 03:21:06 +0500 Subject: [PATCH 1/6] error boundary part 1 --- client/packages/lowcoder/package.json | 1 + client/packages/lowcoder/src/app.tsx | 321 +++++++++++++----- .../packages/lowcoder/src/errorBoundary.tsx | 39 +++ .../packages/lowcoder/src/layout/gridItem.tsx | 3 +- package.json | 3 + 5 files changed, 283 insertions(+), 84 deletions(-) create mode 100644 client/packages/lowcoder/src/errorBoundary.tsx create mode 100644 package.json diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 1b39a10fa..03c4ace78 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -68,6 +68,7 @@ "react-documents": "^1.2.1", "react-dom": "^18.2.0", "react-draggable": "^4.4.4", + "react-error-boundary": "^4.0.13", "react-grid-layout": "^1.3.0", "react-helmet": "^6.1.0", "react-joyride": "^2.4.0", diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx index 1e9b5ebb1..35f8e84ee 100644 --- a/client/packages/lowcoder/src/app.tsx +++ b/client/packages/lowcoder/src/app.tsx @@ -53,6 +53,7 @@ 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")); @@ -89,18 +90,34 @@ type AppIndexProps = { }; class AppIndex extends React.Component { + constructor(props: any) { + super(props); + this.state = {error: null}; + } componentDidMount() { this.props.getCurrentUser(); } componentDidUpdate(prevProps: AppIndexProps) { - if(prevProps.currentOrgId !== this.props.currentOrgId && this.props.currentOrgId !== '') { + if ( + prevProps.currentOrgId !== this.props.currentOrgId && + this.props.currentOrgId !== '' + ) { this.props.fetchConfig(this.props.currentOrgId); } } - + updateError = () => { + this.state.error('known'); + }; + fallbackRender = ({error, resetErrorBoundary}: FallbackProps) => { + return
+

Error Boundary

+

Something went wrong.

+ +
; + }; render() { - const isTemplate = hasQueryParam("template"); + const isTemplate = hasQueryParam('template'); const pathname = history.location.pathname; // we check if we are on the public cloud @@ -122,56 +139,157 @@ class AppIndex extends React.Component { {{this.props.brandName}} {} - - + + - - - - + + + - - - - + + + + - - + + - - - - - + + + + + - - - + + + {/* }, */} {isLowCoderDomain && [ // Adding Support for iframely to be able to embedd the component explorer in the docu - , - , + , + , - , - , - , + , + , + , // adding Clearbit Support for Analytics - + , ]} - - - - {/* + { + this.state.error(null); + }} + > + + + {/* // we decided to show the org homepage in a own navigation page {!this.props.orgDev && !!this.props.defaultHomePage ? ( { /> )} */} - {!this.props.orgDev ? ( - - ) : ( - - )} - - - - - - - - - - - - - - {developEnv() && ( - <> - - - - - - )} - - + {!this.props.orgDev ? ( + + ) : ( + + )} + + + + + + + + + + + + + + {developEnv() && ( + <> + + + + + + )} + + + ); } @@ -267,7 +422,7 @@ export function bootstrap() { const root = createRoot(container!); root.render( - + ); } diff --git a/client/packages/lowcoder/src/errorBoundary.tsx b/client/packages/lowcoder/src/errorBoundary.tsx new file mode 100644 index 000000000..6fa9513c0 --- /dev/null +++ b/client/packages/lowcoder/src/errorBoundary.tsx @@ -0,0 +1,39 @@ +import {default as Button} from 'antd/es/button'; +import {trans} from 'i18n'; +import React from 'react'; + +export default class ErrorBoundary extends React.Component< + any, + {errorMessage?: string} +> { + constructor(props: any) { + super(props); + this.state = {}; + } + + static getDerivedStateFromError(error: any) { + // Update state so the next render will show the fallback UI. + return {errorMessage: error.toString()}; + } + + componentDidCatch(error: any, errorInfo: any) { + console.log("🚀 ~ error:", error) + } + + render() { + if (this.state.errorMessage) { + return ( + <> +

{this.state.errorMessage}

+ + + ); + } + return this.props.children; + } +} diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index 6ff2b813e..d2a0f71c0 100644 --- a/client/packages/lowcoder/src/layout/gridItem.tsx +++ b/client/packages/lowcoder/src/layout/gridItem.tsx @@ -26,6 +26,7 @@ import { setTransform, } from "./utils"; import styled from "styled-components"; +import { withErrorBoundary } from "@lowcoder-ee/index.sdk"; type GridItemCallback = ( i: string, @@ -416,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(child, { + let newChild: React.ReactElement = React.cloneElement(withErrorBoundary(child), { ref: elementRef, className: clsx( "react-grid-item", diff --git a/package.json b/package.json new file mode 100644 index 000000000..18a1e415e --- /dev/null +++ b/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} From 81d072c2856421821862fb41c4f29735f0d7ce84 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Fri, 5 Jul 2024 21:07:45 +0500 Subject: [PATCH 2/6] latest changes --- client/packages/lowcoder/src/pages/editor/AppEditor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx index cb3de06f6..54744996f 100644 --- a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx +++ b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx @@ -26,8 +26,8 @@ import { fetchFolderElements } from "redux/reduxActions/folderActions"; import { registryDataSourcePlugin } from "constants/queryConstants"; import { DatasourceApi } from "api/datasourceApi"; import { useRootCompInstance } from "./useRootCompInstance"; -import ErrorBoundary from "antd/es/alert/ErrorBoundary"; import EditorSkeletonView from "./editorSkeletonView"; +import {ErrorBoundary, FallbackProps} from 'react-error-boundary'; const AppSnapshot = lazy(() => { return import("pages/editor/appSnapshot") @@ -135,7 +135,7 @@ export default function AppEditor() { }, [viewMode, applicationId, dispatch]); return ( - + ⚠️Something went wrong

}> {showAppSnapshot ? ( }> Date: Fri, 5 Jul 2024 21:52:14 +0500 Subject: [PATCH 3/6] fallback ui for error boundary --- client/packages/lowcoder/src/app.tsx | 22 ------------------- .../packages/lowcoder/src/layout/gridItem.tsx | 2 +- .../lowcoder/src/pages/editor/AppEditor.tsx | 11 ++++++++-- 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx index 35f8e84ee..f1f8d3846 100644 --- 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 { - constructor(props: any) { - super(props); - this.state = {error: null}; - } componentDidMount() { this.props.getCurrentUser(); } @@ -106,16 +101,6 @@ class AppIndex extends React.Component { this.props.fetchConfig(this.props.currentOrgId); } } - updateError = () => { - this.state.error('known'); - }; - fallbackRender = ({error, resetErrorBoundary}: FallbackProps) => { - return
-

Error Boundary

-

Something went wrong.

- -
; - }; render() { const isTemplate = hasQueryParam('template'); const pathname = history.location.pathname; @@ -281,12 +266,6 @@ class AppIndex extends React.Component { ]} - { - this.state.error(null); - }} - > {/* @@ -387,7 +366,6 @@ class AppIndex extends React.Component { )} - ); } diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index d2a0f71c0..769274314 100644 --- 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 index 54744996f..805c7af18 100644 --- 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 = ( +
+

Something went wrong while displaying this webpage

+ +
+); return ( - ⚠️Something went wrong

}> + {showAppSnapshot ? ( }> Date: Fri, 5 Jul 2024 23:14:57 +0500 Subject: [PATCH 4/6] yarn.lock changes --- client/yarn.lock | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/client/yarn.lock b/client/yarn.lock index 1e09f9fd9..ac370d38c 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -13876,6 +13876,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: react-documents: ^1.2.1 react-dom: ^18.2.0 react-draggable: ^4.4.4 + react-error-boundary: ^4.0.13 react-grid-layout: ^1.3.0 react-helmet: ^6.1.0 react-joyride: ^2.4.0 @@ -17032,6 +17033,17 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard +"react-error-boundary@npm:^4.0.13": + version: 4.0.13 + resolution: "react-error-boundary@npm:4.0.13" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + react: ">=16.13.1" + checksum: 50398d080015d51d22c6f94c56f4ea336d10232d72345b36ee6f15b6b643666d20b072829b02f091a80e5af68fe67f68a62ef0d2b649dbd759ead929304449af + languageName: node + linkType: hard + "react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.2": version: 3.2.2 resolution: "react-fast-compare@npm:3.2.2" From 7969dc309d6cb59654f48e7c7cf748069d8948e8 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 6 Jul 2024 12:33:08 +0500 Subject: [PATCH 5/6] removed unused code --- .../packages/lowcoder/src/errorBoundary.tsx | 39 ------------------- .../packages/lowcoder/src/layout/gridItem.tsx | 1 - 2 files changed, 40 deletions(-) delete mode 100644 client/packages/lowcoder/src/errorBoundary.tsx diff --git a/client/packages/lowcoder/src/errorBoundary.tsx b/client/packages/lowcoder/src/errorBoundary.tsx deleted file mode 100644 index 6fa9513c0..000000000 --- a/client/packages/lowcoder/src/errorBoundary.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import {default as Button} from 'antd/es/button'; -import {trans} from 'i18n'; -import React from 'react'; - -export default class ErrorBoundary extends React.Component< - any, - {errorMessage?: string} -> { - constructor(props: any) { - super(props); - this.state = {}; - } - - static getDerivedStateFromError(error: any) { - // Update state so the next render will show the fallback UI. - return {errorMessage: error.toString()}; - } - - componentDidCatch(error: any, errorInfo: any) { - console.log("🚀 ~ error:", error) - } - - render() { - if (this.state.errorMessage) { - return ( - <> -

{this.state.errorMessage}

- - - ); - } - return this.props.children; - } -} diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index 769274314..6ff2b813e 100644 --- a/client/packages/lowcoder/src/layout/gridItem.tsx +++ b/client/packages/lowcoder/src/layout/gridItem.tsx @@ -26,7 +26,6 @@ import { setTransform, } from "./utils"; import styled from "styled-components"; -import { withErrorBoundary } from "@lowcoder-ee/index.sdk"; type GridItemCallback = ( i: string, From 45cf14160b3ed810126925b8ef140025b0fa1ff0 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 6 Jul 2024 12:34:29 +0500 Subject: [PATCH 6/6] removed unused code --- package.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 package.json diff --git a/package.json b/package.json deleted file mode 100644 index 18a1e415e..000000000 --- a/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "dependencies": {} -}