From 4192482a4c52db436f3ae901f147882cd9eab9d6 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 21:53:02 -0700
Subject: [PATCH] Add error boundary to chat. For #2811

---
 .../chat/ChatContainer/ChatContainer.tsx      | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 93cc23a27..064c5d34a 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -1,5 +1,6 @@
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import {
   ConnectedClientInfoEvent,
   FediverseEvent,
@@ -18,6 +19,7 @@ import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
 import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
 import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
 import { User } from '../../../interfaces/user.model';
+import { ComponentError } from '../../ui/ComponentError/ComponentError';
 
 export type ChatContainerProps = {
   messages: ChatMessage[];
@@ -266,14 +268,25 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   );
 
   return (
-    <div id="chat-container" className={styles.chatContainer}>
-      {MessagesTable}
-      {showInput && (
-        <div className={styles.chatTextField}>
-          <ChatTextField enabled={chatEnabled} />
-        </div>
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="ChatContainer"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
       )}
-    </div>
+    >
+      <div id="chat-container" className={styles.chatContainer}>
+        {MessagesTable}
+        {showInput && (
+          <div className={styles.chatTextField}>
+            <ChatTextField enabled={chatEnabled} />
+          </div>
+        )}
+      </div>
+    </ErrorBoundary>
   );
 };