Add error boundary to DesktopContent. For #2811

web/components/ui/Content/DesktopContent.tsx

@@ -1,10 +1,12 @@
 import React, { ComponentType, FC } from 'react';
 import dynamic from 'next/dynamic';
 import { 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';
 import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
+import { ComponentError } from '../ComponentError/ComponentError';
 
 export type DesktopContentProps = {
   name: string;
@@ -58,7 +60,16 @@ export const DesktopContent: FC<DesktopContentProps> = ({
   }
 
   return (
-    <>
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="DesktopContent"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
       <div className={styles.lowerHalf} id="skip-to-content">
         <ContentHeader
           name={name}
@@ -76,6 +87,6 @@ export const DesktopContent: FC<DesktopContentProps> = ({
           !!extraPageContent && aboutTabContent
         )}
       </div>
-    </>
+    </ErrorBoundary>
   );
 };