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,38 +150,49 @@ export const ChatModerationDetailsModal: FC<ChatModerationDetailsModalProps> = (
     },
   ];
   return (
-    <Spin spinning={loading}>
+    <ErrorBoundary
-      <UserColorBlock color={displayColor} />
+      // eslint-disable-next-line react/no-unstable-nested-components
-      {scopes?.map(scope => (
+      fallbackRender={({ error, resetErrorBoundary }) => (
-        <Tag key={scope}>{scope}</Tag>
+        <ComponentError
-      ))}
+          componentName="ChatModerationDetailsModal"
-      {authenticated && <Tag>Authenticated</Tag>}
+          message={error.message}
-      {isBot && <Tag>Bot</Tag>}
+          retryFunction={resetErrorBoundary}
-      <ValueRow label="Messages Sent Across Clients" value={totalMessagesSent.toString()} />
+        />
-      <ValueRow label="User Created" value={createdAtDate} />
+      )}
-      <ValueRow label="Known As" value={previousNames.join(',')} />
+    >
-      <Collapse accordion>
+      <Spin spinning={loading}>
-        <Panel header="Currently Connected Clients" key="connected-clients">
+        <UserColorBlock color={displayColor} />
-          <Collapse accordion>
+        {scopes?.map(scope => (
-            {connectedClients.map(client => (
+          <Tag key={scope}>{scope}</Tag>
-              <Panel header={formatUAstring(client.userAgent)} key={client.id}>
+        ))}
-                <ConnectedClient client={client} />
+        {authenticated && <Tag>Authenticated</Tag>}
-              </Panel>
+        {isBot && <Tag>Bot</Tag>}
-            ))}
+        <ValueRow label="Messages Sent Across Clients" value={totalMessagesSent.toString()} />
-          </Collapse>
+        <ValueRow label="User Created" value={createdAtDate} />
-        </Panel>
+        <ValueRow label="Known As" value={previousNames.join(',')} />
         <Collapse accordion>
-          <Panel header="Recent Chat Messages" key="chat-messages">
+          <Panel header="Currently Connected Clients" key="connected-clients">
-            <Table
+            <Collapse accordion>
-              size="small"
+              {connectedClients.map(client => (
-              pagination={null}
+                <Panel header={formatUAstring(client.userAgent)} key={client.id}>
-              columns={chatMessageColumns}
+                  <ConnectedClient client={client} />
-              dataSource={messages}
+                </Panel>
-              rowKey="id"
+              ))}
-            />
+            </Collapse>
           </Panel>
+          <Collapse accordion>
+            <Panel header="Recent Chat Messages" key="chat-messages">
+              <Table
+                size="small"
+                pagination={null}
+                columns={chatMessageColumns}
+                dataSource={messages}
+                rowKey="id"
+              />
+            </Panel>
+          </Collapse>
         </Collapse>
-      </Collapse>
+      </Spin>
-    </Spin>
+    </ErrorBoundary>
   );
 };