Add error boundary to system Modal. For #2811

web/components/ui/Modal/Modal.tsx

@@ -1,5 +1,7 @@
 import { Spin, Skeleton, Modal as AntModal } from 'antd';
 import React, { FC, ReactNode, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ComponentError } from '../ComponentError/ComponentError';
 import styles from './Modal.module.scss';
 
 export type ModalProps = {
@@ -70,6 +72,16 @@ export const Modal: FC<ModalProps> = ({
       footer={null}
       centered
       destroyOnClose
+    >
+      <ErrorBoundary
+        // eslint-disable-next-line react/no-unstable-nested-components
+        fallbackRender={({ error, resetErrorBoundary }) => (
+          <ComponentError
+            componentName="Modal"
+            message={error.message}
+            retryFunction={resetErrorBoundary}
+          />
+        )}
       >
         <div id="modal-container" style={{ height: '100%' }}>
           {loading && (
@@ -80,6 +92,7 @@ export const Modal: FC<ModalProps> = ({
           {children && <div className={styles.content}>{children}</div>}
           {loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
         </div>
+      </ErrorBoundary>
     </AntModal>
   );
 };