adds upstream error page (#5113)

* adds upstream error page

* help docs in new tab

ui/src/App.tsx

@@ -12,14 +12,21 @@ 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;
   const primary = data?.primaryColor || "#6F43E7";
   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 = <UpstreamErrorPage data={data} />;
+      break;
     case "Error":
       body = <ErrorPage data={data} />;
       break;

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<ErrorPageProps> = ({ data }) => {
+  const status = data?.status || 500;
+  console.log(data.statusText);
+  return (
+    <Container>
+      <Card>
+        <Alert severity="error" sx={{ borderRadius: 0 }}>
+          <AlertTitle>
+            <Typography variant="h3">Error {status}</Typography>
+          </AlertTitle>
+          <Typography variant="body2">Web Server is down</Typography>
+        </Alert>
+
+        <Divider sx={{ color: "rgba(234, 236, 240, 1)" }} />
+
+        <Card sx={{ borderRadius: 0, borderTop: 0 }}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            width="100%"
+            sx={{
+              m: "3vw",
+            }}
+            gap={15}
+          >
+            <Stack direction="row" alignItems="center" gap={2}>
+              <CheckCircleRounded color="primary" fontSize="large" />
+              <Stack>
+                <Typography variant="overline">YOU (BROWSER)</Typography>
+                <Typography color="primary.main" variant="body2">
+                  Working
+                </Typography>
+              </Stack>
+            </Stack>
+
+            <Divider
+              sx={{
+                color: "primary.main",
+                width: "2vw",
+                height: 1,
+                border: 1,
+              }}
+            />
+
+            <Stack direction="row" alignItems="center" gap={2}>
+              <CheckCircleRounded color="primary" fontSize="large" />
+              <Stack>
+                <Typography variant="overline">POMERIUM</Typography>
+                <Typography color="primary.main" variant="body2">
+                  Working
+                </Typography>
+              </Stack>
+            </Stack>
+
+            <Divider
+              sx={{
+                color: "rgba(234, 236, 240, 1)",
+                width: "2vw",
+                height: 1,
+                border: 1,
+              }}
+            />
+
+            <Stack direction="row" alignItems="center" gap={2}>
+              <Circle color="error" fontSize="large" />
+              <Stack>
+                <Typography variant="overline">UPSTREAM HOST</Typography>
+                <Typography color="error" variant="body2">
+                  Error
+                </Typography>
+              </Stack>
+            </Stack>
+          </Stack>
+          <CardContent>
+            <Divider sx={{ color: "rgba(234, 236, 240, 1)" }} />
+            <Stack gap={1} sx={{ my: 5 }}>
+              <Typography variant="h5">What happened?</Typography>
+              <Typography variant="body2" color="rgba(102, 112, 133, 1)">
+                The web server is not returning a connection. As a result, the
+                webpage is not displaying.
+              </Typography>
+            </Stack>
+            <Divider sx={{ color: "rgba(234, 236, 240, 1)" }} />
+            <Stack gap={2} sx={{ my: 5 }}>
+              <Stack gap={1}>
+                <Typography variant="h5">What can I do?</Typography>
+              </Stack>
+              <Stack>
+                <Typography variant="body2" fontWeight={700} color="rgba(102, 112, 133, 1)">
+                  If you are a visitor of this website:
+                </Typography>
+                <Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)">
+                  Please try again in a few minutes.
+                </Typography>
+              </Stack>
+              <Stack>
+                <Typography variant="body2" fontWeight={700}>
+                  If you are the owner of this website:
+                </Typography>
+                <Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)">
+                  Contact your hosting provider letting them know your web
+                  server is not responding.
+                </Typography>
+                <Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)">
+                  Error Text: {data.statusText}
+                </Typography>
+                <Link
+                    href="https://www.pomerium.com/docs/troubleshooting#envoy-error-messages"
+                    underline="hover"
+                    color="primary.main"
+                    variant="body2"
+                    target="_blank"
+                >
+                  Additional troubleshooting information.
+                </Link>
+              </Stack>
+            </Stack>
+          </CardContent>
+        </Card>
+      </Card>
+    </Container>
+  );
+};
+export default UpstreamErrorPage;

ui/src/types/index.ts

@@ -97,7 +97,7 @@ type BasePageData = {
 };
 
 export type ErrorPageData = BasePageData & {
-  page: "Error";
+  page: "Error" | "UpstreamError";
 
   canDebug?: boolean;
   debugUrl?: string;