diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index ee315e1b4..0b1e287a4 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -12,6 +12,7 @@ import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
import { SubpageContextProvider } from "./context/Subpage";
import { createTheme } from "./theme";
import { PageData } from "./types";
+import UpstreamErrorPage from "./components/UpstreamErrorPage";
const App: FC = () => {
const data = (window["POMERIUM_DATA"] || {}) as PageData;
@@ -19,7 +20,13 @@ const App: FC = () => {
const secondary = data?.secondaryColor || "#49AAA1";
const theme = createTheme(primary, secondary);
let body: React.ReactNode = <>;
+ if(data?.page === 'Error' && data?.statusText?.toLowerCase().includes('upstream')) {
+ data.page = 'UpstreamError';
+ }
switch (data?.page) {
+ case "UpstreamError":
+ body = ;
+ break;
case "Error":
body = ;
break;
diff --git a/ui/src/components/UpstreamErrorPage.tsx b/ui/src/components/UpstreamErrorPage.tsx
new file mode 100644
index 000000000..2a7380bb5
--- /dev/null
+++ b/ui/src/components/UpstreamErrorPage.tsx
@@ -0,0 +1,140 @@
+import { CheckCircleRounded, Circle } from "@mui/icons-material";
+import {
+ Alert,
+ AlertTitle,
+ Card,
+ CardContent,
+ Container,
+ Divider,
+ Link,
+ Stack,
+ Typography,
+} from "@mui/material";
+import React, { FC } from "react";
+
+import { ErrorPageProps } from "./ErrorPage";
+
+export const UpstreamErrorPage: FC = ({ data }) => {
+ const status = data?.status || 500;
+ console.log(data.statusText);
+ return (
+
+
+
+
+ Error {status}
+
+ Web Server is down
+
+
+
+
+
+
+
+
+
+ YOU (BROWSER)
+
+ Working
+
+
+
+
+
+
+
+
+
+ POMERIUM
+
+ Working
+
+
+
+
+
+
+
+
+
+ UPSTREAM HOST
+
+ Error
+
+
+
+
+
+
+
+ What happened?
+
+ The web server is not returning a connection. As a result, the
+ webpage is not displaying.
+
+
+
+
+
+ What can I do?
+
+
+
+ If you are a visitor of this website:
+
+
+ Please try again in a few minutes.
+
+
+
+
+ If you are the owner of this website:
+
+
+ Contact your hosting provider letting them know your web
+ server is not responding.
+
+
+ Error Text: {data.statusText}
+
+
+ Additional troubleshooting information.
+
+
+
+
+
+
+
+ );
+};
+export default UpstreamErrorPage;
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index d8158402f..13eea01fe 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -97,7 +97,7 @@ type BasePageData = {
};
export type ErrorPageData = BasePageData & {
- page: "Error";
+ page: "Error" | "UpstreamError";
canDebug?: boolean;
debugUrl?: string;