feat(embeds): wrap chat embeds in error components

web/pages/embed/chat/readonly/index.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ChatMessage } from '../../../../interfaces/chat-message.model';
 import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
 import {
@@ -8,6 +9,7 @@ import {
   isChatAvailableSelector,
 } from '../../../../components/stores/ClientConfigStore';
 import { Theme } from '../../../../components/theme/Theme';
+import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
 
 export default function ReadOnlyChatEmbed() {
   const currentUser = useRecoilValue(currentUserAtom);
@@ -16,19 +18,26 @@ export default function ReadOnlyChatEmbed() {
 
   return (
     <div>
-      <ClientConfigStore />
+      <ErrorBoundary
-      <Theme />
+        // eslint-disable-next-line react/no-unstable-nested-components
-      {currentUser && (
+        fallbackRender={({ error }) => (
-        <ChatContainer
+          <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
-          messages={messages}
+        )}
-          usernameToHighlight={currentUser.displayName}
+      >
-          chatUserId={currentUser.id}
+        <ClientConfigStore />
-          isModerator={false}
+        <Theme />
-          showInput={false}
+        {currentUser && (
-          height="100vh"
+          <ChatContainer
-          chatAvailable={isChatAvailable}
+            messages={messages}
-        />
+            usernameToHighlight={currentUser.displayName}
-      )}
+            chatUserId={currentUser.id}
+            isModerator={false}
+            showInput={false}
+            height="100vh"
+            chatAvailable={isChatAvailable}
+          />
+        )}
+      </ErrorBoundary>
     </div>
   );
 }

web/pages/embed/chat/readwrite/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import { useRecoilValue } from 'recoil';
 import { useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ChatMessage } from '../../../../interfaces/chat-message.model';
 import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
 import {
@@ -17,6 +18,7 @@ import { ClientConfig } from '../../../../interfaces/client-config.model';
 import { AppStateOptions } from '../../../../components/stores/application-state';
 import { ServerStatus } from '../../../../interfaces/server-status.model';
 import { Theme } from '../../../../components/theme/Theme';
+import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
 
 export default function ReadWriteChatEmbed() {
   const currentUser = useRecoilValue(currentUserAtom);
@@ -47,22 +49,34 @@ export default function ReadWriteChatEmbed() {
           }
         `}
       </style>
-      <ClientConfigStore />
+      <ErrorBoundary
-      <Theme />
+        // eslint-disable-next-line react/no-unstable-nested-components
-      <Header name={headerText} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} />
+        fallbackRender={({ error }) => (
-      {currentUser && (
+          <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
-        <div id="chat-container">
+        )}
-          <ChatContainer
+      >
-            messages={messages}
+        <ClientConfigStore />
-            usernameToHighlight={currentUser.displayName}
+        <Theme />
-            chatUserId={currentUser.id}
+        <Header
-            isModerator={currentUser.isModerator}
+          name={headerText}
-            showInput
+          chatAvailable
-            height="92vh"
+          chatDisabled={chatDisabled}
-            chatAvailable={isChatAvailable}
+          online={videoAvailable}
-          />
+        />
-        </div>
+        {currentUser && (
-      )}
+          <div id="chat-container">
+            <ChatContainer
+              messages={messages}
+              usernameToHighlight={currentUser.displayName}
+              chatUserId={currentUser.id}
+              isModerator={currentUser.isModerator}
+              showInput
+              height="92vh"
+              chatAvailable={isChatAvailable}
+            />
+          </div>
+        )}
+      </ErrorBoundary>
     </div>
   );
 }