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,6 +18,12 @@ export default function ReadOnlyChatEmbed() {
 
   return (
     <div>
+      <ErrorBoundary
+        // eslint-disable-next-line react/no-unstable-nested-components
+        fallbackRender={({ error }) => (
+          <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
+        )}
+      >
         <ClientConfigStore />
         <Theme />
         {currentUser && (
@@ -29,6 +37,7 @@ export default function ReadOnlyChatEmbed() {
             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,9 +49,20 @@ export default function ReadWriteChatEmbed() {
           }
         `}
       </style>
+      <ErrorBoundary
+        // eslint-disable-next-line react/no-unstable-nested-components
+        fallbackRender={({ error }) => (
+          <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
+        )}
+      >
         <ClientConfigStore />
         <Theme />
-      <Header name={headerText} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} />
+        <Header
+          name={headerText}
+          chatAvailable
+          chatDisabled={chatDisabled}
+          online={videoAvailable}
+        />
         {currentUser && (
           <div id="chat-container">
             <ChatContainer
@@ -63,6 +76,7 @@ export default function ReadWriteChatEmbed() {
             />
           </div>
         )}
+      </ErrorBoundary>
     </div>
   );
 }