From b1f8ee5f94dfc8754ed754be1e72b6fd3bad90a1 Mon Sep 17 00:00:00 2001
From: Pranav Joglekar <pranav2000joglekar@gmail.com>
Date: Sun, 12 Mar 2023 01:08:29 +0530
Subject: [PATCH] feat: show a friendlier error msg in admin panel when unable
 to connect to Owncast Service (#2786)

* feat: handle 'failed to fetch' error and set error state

* feat: display alert error to user if failed to connect to backend
---
 web/components/admin/MainLayout.tsx |  7 ++++++-
 web/utils/server-status-context.tsx | 25 +++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/web/components/admin/MainLayout.tsx b/web/components/admin/MainLayout.tsx
index 05d8f5fe8..c42010d36 100644
--- a/web/components/admin/MainLayout.tsx
+++ b/web/components/admin/MainLayout.tsx
@@ -18,6 +18,7 @@ import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { TEXTFIELD_PROPS_STREAM_TITLE } from '../../utils/config-constants';
 import { ComposeFederatedPost } from './ComposeFederatedPost';
 import { UpdateArgs } from '../../types/config-section';
+import { FatalErrorStateModal } from '../modals/FatalErrorStateModal/FatalErrorStateModal';
 
 // Lazy loaded components
 
@@ -71,7 +72,7 @@ export type MainLayoutProps = {
 
 export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
   const context = useContext(ServerStatusContext);
-  const { serverConfig, online, broadcaster, versionNumber } = context || {};
+  const { serverConfig, online, broadcaster, versionNumber, error: serverError } = context || {};
   const { instanceDetails, chatDisabled, federation } = serverConfig;
   const { enabled: federationEnabled } = federation;
 
@@ -282,6 +283,10 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
         <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
       </Head>
 
+      {serverError?.type === 'OWNCAST_SERVICE_UNREACHABLE' && (
+        <FatalErrorStateModal title="Server Unreachable" message={serverError.msg} />
+      )}
+
       <Sider width={240} className="side-nav">
         <h1 className="owncast-title">
           <span className="logo-container">
diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx
index 4993561ad..ffd73e955 100644
--- a/web/utils/server-status-context.tsx
+++ b/web/utils/server-status-context.tsx
@@ -91,6 +91,10 @@ const initialServerStatusState = {
     message: '',
     representation: 0,
   },
+  error: {
+    type: null,
+    msg: null,
+  },
 };
 
 export const ServerStatusContext = React.createContext({
@@ -112,17 +116,34 @@ const ServerStatusProvider: FC<ServerStatusProviderProps> = ({ children }) => {
   const getStatus = async () => {
     try {
       const result = await fetchData(STATUS);
-      setStatus({ ...result });
+
+      if (result instanceof Error) {
+        throw result;
+      }
+
+      setStatus({ ...result, error: { type: null, msg: null } });
     } catch (error) {
+      setStatus(initialStatus => ({
+        ...initialStatus,
+        error: {
+          type: 'OWNCAST_SERVICE_UNREACHABLE',
+          msg: 'Cannot connect to the Owncast service. Please check you are connected to the internet and the Owncast server is running.',
+        },
+      }));
       // todo
     }
   };
   const getConfig = async () => {
     try {
       const result = await fetchData(SERVER_CONFIG);
+
+      if (result instanceof Error) {
+        throw result;
+      }
+
       setConfig(result);
     } catch (error) {
-      // todo
+      console.error(error);
     }
   };