3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-06-15 17:22:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

core/ui: add request id to upstream error page (#5166)

Browse source
This commit is contained in:
Caleb Doxsey 2024-07-08 11:44:30 -06:00 • committed by GitHub
parent 8f8c66e9fd
commit 517abbada4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

48
ui/src/components/UpstreamErrorPage.tsx
View file

@ -9,14 +9,23 @@ import {
Link, Link,
Stack, Stack,
Typography, Typography,
TypographyProps,
} from "@mui/material"; } from "@mui/material";
import React, { FC } from "react"; import React, { FC } from "react";
import { ErrorPageProps } from "./ErrorPage"; import { ErrorPageProps } from "./ErrorPage";
import IDField from "./IDField";
const TextBlock: FC<TypographyProps> = ({ children }) => {
return (
<Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)">
{children}
</Typography>
);
};
export const UpstreamErrorPage: FC<ErrorPageProps> = ({ data }) => { export const UpstreamErrorPage: FC<ErrorPageProps> = ({ data }) => {
const status = data?.status || 500; const status = data?.status || 500;
console.log(data.statusText);
return ( return (
<Container> <Container>
<Card> <Card>
@ -91,10 +100,10 @@ export const UpstreamErrorPage: FC<ErrorPageProps> = ({ data }) => {
<Divider sx={{ color: "rgba(234, 236, 240, 1)" }} /> <Divider sx={{ color: "rgba(234, 236, 240, 1)" }} />
<Stack gap={1} sx={{ my: 5 }}> <Stack gap={1} sx={{ my: 5 }}>
<Typography variant="h5">What happened?</Typography> <Typography variant="h5">What happened?</Typography>
<Typography variant="body2" color="rgba(102, 112, 133, 1)"> <TextBlock>
The web server is not returning a connection. As a result, the The web server is not returning a connection. As a result, the
webpage is not displaying. webpage is not displaying.
</Typography> </TextBlock>
</Stack> </Stack>
<Divider sx={{ color: "rgba(234, 236, 240, 1)" }} /> <Divider sx={{ color: "rgba(234, 236, 240, 1)" }} />
<Stack gap={2} sx={{ my: 5 }}> <Stack gap={2} sx={{ my: 5 }}>
@ -102,30 +111,35 @@ export const UpstreamErrorPage: FC<ErrorPageProps> = ({ data }) => {
<Typography variant="h5">What can I do?</Typography> <Typography variant="h5">What can I do?</Typography>
</Stack> </Stack>
<Stack> <Stack>
<Typography variant="body2" fontWeight={700} color="rgba(102, 112, 133, 1)"> <Typography
variant="body2"
fontWeight={700}
color="rgba(102, 112, 133, 1)"
>
If you are a visitor of this website: If you are a visitor of this website:
</Typography> </Typography>
<Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)"> <TextBlock>Please try again in a few minutes.</TextBlock>
Please try again in a few minutes.
</Typography>
</Stack> </Stack>
<Stack> <Stack>
<Typography variant="body2" fontWeight={700}> <Typography variant="body2" fontWeight={700}>
If you are the owner of this website: If you are the owner of this website:
</Typography> </Typography>
<Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)"> <TextBlock>
Contact your hosting provider letting them know your web Contact your hosting provider letting them know your web
server is not responding. server is not responding.
</Typography> </TextBlock>
<Typography variant="body2" fontWeight={400} color="rgba(102, 112, 133, 1)"> <TextBlock>Error Text: {data.statusText}</TextBlock>
Error Text: {data.statusText} {data?.requestId && (
</Typography> <TextBlock>
Request ID: <IDField value={data.requestId} />
</TextBlock>
)}
<Link <Link
href="https://www.pomerium.com/docs/troubleshooting#envoy-error-messages" href="https://www.pomerium.com/docs/troubleshooting#envoy-error-messages"
underline="hover" underline="hover"
color="primary.main" color="primary.main"
variant="body2" variant="body2"
target="_blank" target="_blank"
> >
Additional troubleshooting information. Additional troubleshooting information.
</Link> </Link>