Add error boundary to ChatModerationDetailsModal. For #2811

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.tsx

@@ -3,9 +3,11 @@ import { FC, useEffect, useState } from 'react';
 import format from 'date-fns/format';
 import { ColumnsType } from 'antd/lib/table';
 import dynamic from 'next/dynamic';
+import { ErrorBoundary } from 'react-error-boundary';
 import ChatModeration from '../../../services/moderation-service';
 import styles from './ChatModerationDetailsModal.module.scss';
 import { formatUAstring } from '../../../utils/format';
+import { ComponentError } from '../../ui/ComponentError/ComponentError';
 
 const { Panel } = Collapse;
 
@@ -148,6 +150,16 @@ export const ChatModerationDetailsModal: FC<ChatModerationDetailsModalProps> = (
     },
   ];
   return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="ChatModerationDetailsModal"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
       <Spin spinning={loading}>
         <UserColorBlock color={displayColor} />
         {scopes?.map(scope => (
@@ -181,5 +193,6 @@ export const ChatModerationDetailsModal: FC<ChatModerationDetailsModalProps> = (
           </Collapse>
         </Collapse>
       </Spin>
+    </ErrorBoundary>
   );
 };