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 />
-      <Theme />
-      {currentUser && (
-        <ChatContainer
-          messages={messages}
-          usernameToHighlight={currentUser.displayName}
-          chatUserId={currentUser.id}
-          isModerator={false}
-          showInput={false}
-          height="100vh"
-          chatAvailable={isChatAvailable}
-        />
-      )}
+      <ErrorBoundary
+        // eslint-disable-next-line react/no-unstable-nested-components
+        fallbackRender={({ error }) => (
+          <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
+        )}
+      >
+        <ClientConfigStore />
+        <Theme />
+        {currentUser && (
+          <ChatContainer
+            messages={messages}
+            usernameToHighlight={currentUser.displayName}
+            chatUserId={currentUser.id}
+            isModerator={false}
+            showInput={false}
+            height="100vh"
+            chatAvailable={isChatAvailable}
+          />
+        )}
+      </ErrorBoundary>
     </div>
   );
 }