From cd0f92f496927f63c12fa4ba38d4a36e608fdeb1 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 23:11:09 -0700
Subject: [PATCH] Add error boundary to DesktopContent. For #2811

---
 web/components/ui/Content/DesktopContent.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/components/ui/Content/DesktopContent.tsx b/web/components/ui/Content/DesktopContent.tsx
index 748851480..5da417754 100644
--- a/web/components/ui/Content/DesktopContent.tsx
+++ b/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>
   );
 };