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

@@ -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">

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);
     }
   };