Add error boundary to ClientConfigStore modal. For #2811

web/components/layouts/Main/Main.tsx

@@ -6,6 +6,7 @@ import { FC, useEffect, useRef } from 'react';
 import { Layout } from 'antd';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
+import { ErrorBoundary } from 'react-error-boundary';
 import {
   ClientConfigStore,
   isChatAvailableSelector,
@@ -139,8 +140,17 @@ export const Main: FC = () => {
           <title>{name}</title>
         </Head>
       )}
-
-      <ClientConfigStore />
+      <ErrorBoundary
+        // eslint-disable-next-line react/no-unstable-nested-components
+        fallbackRender={({ error }) => (
+          <FatalErrorStateModal
+            title="Error"
+            message={`There was an unexpected error. Please refresh the page to retry. If this error continues please file a bug with the Owncast project: ${error}`}
+          />
+        )}
+      >
+        <ClientConfigStore />
+      </ErrorBoundary>
       <PushNotificationServiceWorker />
       <TitleNotifier name={name} />
       <Theme />