From 9162386495f833d1ee4601839afd3246c5acadb8 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 23:09:06 -0700
Subject: [PATCH] Add error boundary to system Modal. For #2811

---
 web/components/ui/Modal/Modal.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/components/ui/Modal/Modal.tsx b/web/components/ui/Modal/Modal.tsx
index d80ebf0de..f2b4219f3 100644
--- a/web/components/ui/Modal/Modal.tsx
+++ b/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 = {
@@ -71,15 +73,26 @@ export const Modal: FC<ModalProps> = ({
       centered
       destroyOnClose
     >
-      <div id="modal-container" style={{ height: '100%' }}>
-        {loading && (
-          <Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
+      <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 && (
+            <Skeleton active={loading} style={{ padding: '10px' }} paragraph={{ rows: 10 }} />
+          )}
 
-        {iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
-        {children && <div className={styles.content}>{children}</div>}
-        {loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
-      </div>
+          {iframe && <div style={{ display: iframeDisplayStyle }}>{iframe}</div>}
+          {children && <div className={styles.content}>{children}</div>}
+          {loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
+        </div>
+      </ErrorBoundary>
     </AntModal>
   );
 };