From 274aeb8be6b7db787778636e35b90439713a0cb8 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 23:01:14 -0700
Subject: [PATCH] Add error boundary to ClientConfigStore modal. For #2811

---
 web/components/layouts/Main/Main.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/components/layouts/Main/Main.tsx b/web/components/layouts/Main/Main.tsx
index 09a1a646d..7450f3a6e 100644
--- a/web/components/layouts/Main/Main.tsx
+++ b/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 />