3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-04-30 19:06:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

adds upstream error page (#5113)

Browse source 
* adds upstream error page

* help docs in new tab
This commit is contained in:
Nathan Hayfield 2024-05-14 18:23:24 +02:00 • committed by GitHub
parent 568e99fdd4
commit adb5f781a6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 148 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/src/App.tsx
View file

@ -12,6 +12,7 @@ import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
import { SubpageContextProvider } from "./context/Subpage"; import { SubpageContextProvider } from "./context/Subpage";
import { createTheme } from "./theme"; import { createTheme } from "./theme";
import { PageData } from "./types"; import { PageData } from "./types";
import UpstreamErrorPage from "./components/UpstreamErrorPage";
const App: FC = () => { const App: FC = () => {
const data = (window["POMERIUM_DATA"] || {}) as PageData; const data = (window["POMERIUM_DATA"] || {}) as PageData;
@ -19,7 +20,13 @@ const App: FC = () => {
const secondary = data?.secondaryColor || "#49AAA1"; const secondary = data?.secondaryColor || "#49AAA1";
const theme = createTheme(primary, secondary); const theme = createTheme(primary, secondary);
let body: React.ReactNode = <></>; let body: React.ReactNode = <></>;
if(data?.page === 'Error' && data?.statusText?.toLowerCase().includes('upstream')) {
data.page = 'UpstreamError';
}
switch (data?.page) { switch (data?.page) {
case "UpstreamError":
body = <UpstreamErrorPage data={data} />;
break;
case "Error": case "Error":
body = <ErrorPage data={data} />; body = <ErrorPage data={data} />;
break; break;

140
ui/src/components/UpstreamErrorPage.tsx Normal file
View file

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

2
ui/src/types/index.ts
View file

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