CB-4812 fix: infinite loading in error boundary

dbeaver · May 23, 2024 · e819163 · e819163
1 parent 0957684
commit e819163
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 59 deletions.
diff --git a/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.tsx b/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.tsx
@@ -88,15 +88,7 @@ export const DialogsPortal = observer(function DialogsPortal() {
       <Loader className={s(styles, { loader: true })} suspense>
         <div className={s(styles, { innerBox: true })}>
           {commonDialogService.dialogs.map((dialog, i, arr) => (
-            <ErrorBoundary key={dialog.id} className={s(styles, { error: true })} remount onClose={state.reject}>
-              <NestedDialog
-                key={dialog.id}
-                visible={i === arr.length - 1}
-                dialog={dialog}
-                resolveDialog={state.resolve}
-                rejectDialog={state.reject}
-              />
-            </ErrorBoundary>
+            <NestedDialog key={dialog.id} visible={i === arr.length - 1} dialog={dialog} resolveDialog={state.resolve} rejectDialog={state.reject} />
           ))}
         </div>
       </Loader>
@@ -112,6 +104,7 @@ interface NestedDialogType {
 }
 
 const NestedDialog: React.FC<NestedDialogType> = function NestedDialog({ dialog, resolveDialog, rejectDialog, visible }) {
+  const styles = useS(style);
   const DialogComponent = dialog.component;
 
   const context = useMemo<IDialogContext>(
@@ -125,13 +118,15 @@ const NestedDialog: React.FC<NestedDialogType> = function NestedDialog({ dialog,
 
   return (
     <DialogContext.Provider value={context}>
-      <DialogComponent
-        visible={visible}
-        payload={dialog.payload}
-        options={dialog.options}
-        resolveDialog={resolveDialog}
-        rejectDialog={rejectDialog}
-      />
+      <ErrorBoundary className={s(styles, { error: true })} remount onClose={rejectDialog}>
+        <DialogComponent
+          visible={visible}
+          payload={dialog.payload}
+          options={dialog.options}
+          resolveDialog={resolveDialog}
+          rejectDialog={rejectDialog}
+        />
+      </ErrorBoundary>
     </DialogContext.Provider>
   );
 };
diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.tsx b/webapp/packages/core-blocks/src/ErrorBoundary.tsx
@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import React, { ErrorInfo } from 'react';
+import React, { ErrorInfo, Suspense } from 'react';
 
 import { errorOf, LoadingError } from '@cloudbeaver/core-utils';
 
@@ -76,62 +76,72 @@ export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props
       if (this.props.simple) {
         const stack = errorData.errorInfo?.componentStack || errorData.error.stack;
         return (
-          <div>
-            <p>Something went wrong.</p>
-            {onClose && (
-              <div className={style.action}>
-                <button type="button" onClick={onClose}>
-                  Close
-                </button>
-              </div>
-            )}
-            {this.canRefresh && (
-              <div className={style.action}>
-                <button type="button" onClick={this.refresh}>
-                  Refresh
-                </button>
-              </div>
-            )}
+          <Suspense fallback={<>Loading...</>}>
             <div>
-              {errorData.error.toString()}
-              {stack && <br />}
-              {stack}
+              <p>Something went wrong.</p>
+              {onClose && (
+                <div className={style.action}>
+                  <button type="button" onClick={onClose}>
+                    Close
+                  </button>
+                </div>
+              )}
+              {this.canRefresh && (
+                <div className={style.action}>
+                  <button type="button" onClick={this.refresh}>
+                    Refresh
+                  </button>
+                </div>
+              )}
+              <div>
+                {errorData.error.toString()}
+                {stack && <br />}
+                {stack}
+              </div>
+              {this.props.fallback}
             </div>
-            {this.props.fallback}
-          </div>
+          </Suspense>
         );
       }
 
       if (root) {
         return (
-          <DisplayError className={className} root={root} error={errorData.error} errorInfo={errorData.errorInfo}>
-            {onClose && (
-              <div className={style.action}>
-                <Button onClick={onClose}>Close</Button>
-              </div>
-            )}
-            {this.canRefresh && (
-              <div className={style.action}>
-                <Button onClick={this.refresh}>Refresh</Button>
-              </div>
-            )}
-          </DisplayError>
+          <Suspense fallback={<>Loading...</>}>
+            <DisplayError className={className} root={root} error={errorData.error} errorInfo={errorData.errorInfo}>
+              {onClose && (
+                <div className={style.action}>
+                  <Button onClick={onClose}>Close</Button>
+                </div>
+              )}
+              {this.canRefresh && (
+                <div className={style.action}>
+                  <Button onClick={this.refresh}>Refresh</Button>
+                </div>
+              )}
+            </DisplayError>
+          </Suspense>
         );
       } else {
         return (
-          <ExceptionMessage
-            inline={inline}
-            icon={icon}
-            className={className}
-            exception={errorData.error}
-            onRetry={this.canRefresh ? this.refresh : undefined}
-            onClose={onClose}
-          />
+          <Suspense fallback={<>Loading...</>}>
+            <ExceptionMessage
+              inline={inline}
+              icon={icon}
+              className={className}
+              exception={errorData.error}
+              onRetry={this.canRefresh ? this.refresh : undefined}
+              onClose={onClose}
+            />
+          </Suspense>
         );
       }
     }
 
-    return <ErrorContext.Provider value={this}>{children}</ErrorContext.Provider>;
+    return (
+      <ErrorContext.Provider value={this}>
+        <Suspense fallback={<>Loading...</>}>{children}</Suspense>
+      </ErrorContext.Provider>
+    );
   }
 
   private refresh() {