Fix #5826 UI : Add Error Boundaries (#5827)

openmetadata-ui/src/main/resources/ui/package.json

@@ -72,6 +72,7 @@
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^16.14.0",
     "react-draft-wysiwyg": "^1.14.7",
+    "react-error-boundary": "^3.1.4",
     "react-flow-renderer": "^10.3.6",
     "react-google-login": "^5.2.2",
     "react-markdown": "^8.0.2",

openmetadata-ui/src/main/resources/ui/src/App.tsx

@@ -31,6 +31,7 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import { AuthProvider } from './authentication/auth-provider/AuthProvider';
 import WebSocketProvider from './components/web-scoket/web-scoket.provider';
 import { toastOptions } from './constants/toast.constants';
+import ErrorBoundry from './ErrorBoundry/ErrorBoundry';
 import AppRouter from './router/AppRouter';
 
 const App: FunctionComponent = () => {
@@ -51,11 +52,13 @@ const App: FunctionComponent = () => {
     <div className="main-container">
       <div className="content-wrapper" data-testid="content-wrapper">
         <Router>
-          <WebSocketProvider>
-            <AuthProvider childComponentType={AppRouter}>
-              <AppRouter />
-            </AuthProvider>
-          </WebSocketProvider>
+          <ErrorBoundry>
+            <WebSocketProvider>
+              <AuthProvider childComponentType={AppRouter}>
+                <AppRouter />
+              </AuthProvider>
+            </WebSocketProvider>
+          </ErrorBoundry>
         </Router>
         <ToastContainer {...toastOptions} newestOnTop />
       </div>

openmetadata-ui/src/main/resources/ui/src/ErrorBoundry/ErrorBoundry.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useHistory } from 'react-router-dom';
+import { ROUTES } from '../constants/constants';
+import ErrorFallback from './ErrorFallback';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ErrorBoundry: React.FC<Props> = ({ children }) => {
+  const history = useHistory();
+
+  const onErrorReset = () => {
+    history.push(ROUTES.HOME);
+  };
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={onErrorReset}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default ErrorBoundry;

openmetadata-ui/src/main/resources/ui/src/ErrorBoundry/ErrorFallback.tsx

@@ -0,0 +1,27 @@
+import { Button, Result } from 'antd';
+import React from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { ERROR500 } from '../constants/constants';
+
+const ErrorFallback: React.FC<FallbackProps> = ({
+  error,
+  resetErrorBoundary,
+}) => {
+  return (
+    <Result
+      extra={
+        <Button
+          className="ant-btn-primary-custom"
+          type="primary"
+          onClick={resetErrorBoundary}>
+          Home
+        </Button>
+      }
+      status="404"
+      subTitle={error.message}
+      title={ERROR500}
+    />
+  );
+};
+
+export default ErrorFallback;

openmetadata-ui/src/main/resources/ui/yarn.lock

@@ -11809,6 +11809,13 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-flow-renderer@^10.3.6:
   version "10.3.6"
   resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.6.tgz#9b6a963fdb68f99800207bea835316f3339ed11f"