Add error boundaries to MobileContent. For #2811

web/components/ui/Content/MobileContent.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentType, FC } from 'react';
 import dynamic from 'next/dynamic';
 import { Skeleton, TabsProps } from 'antd';
+import { ErrorBoundary } from 'react-error-boundary';
 import { SocialLink } from '../../../interfaces/social-link.model';
 import styles from './Content.module.scss';
 import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
@@ -9,6 +10,7 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { CurrentUser } from '../../../interfaces/current-user';
 import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
 import { ExternalAction } from '../../../interfaces/external-action';
+import { ComponentError } from '../ComponentError/ComponentError';
 
 export type MobileContentProps = {
   name: string;
@@ -61,6 +63,14 @@ type ChatContentProps = {
   currentUser: CurrentUser;
 };
 
+const ComponentErrorFallback = ({ error, resetErrorBoundary }) => (
+  <ComponentError
+    message={error}
+    componentName="MobileContent"
+    retryFunction={resetErrorBoundary}
+  />
+);
+
 const ChatContent: FC<ChatContentProps> = ({ showChat, chatEnabled, messages, currentUser }) => {
   const { id, displayName } = currentUser;
 
@@ -146,6 +156,12 @@ export const MobileContent: FC<MobileContentProps> = ({
   );
 
   return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
+      )}
+    >
       <div className={styles.lowerSectionMobile}>
         {items.length > 1 ? (
           <Tabs
@@ -158,5 +174,6 @@ export const MobileContent: FC<MobileContentProps> = ({
           aboutTabContent
         )}
       </div>
+    </ErrorBoundary>
   );
 };