OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Add not-found case to MajorErrorMessage

Browse source 
Like the previous change, we can use this for a lot of resource loading failure stuff!
This commit is contained in:
Emi Matchu 2021-06-12 03:25:01 -07:00
parent 468e662a32
commit 232e35e062
1 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app/util.js
View file

@ -392,16 +392,18 @@ export function logAndCapture(e) {
Sentry.captureException(e); Sentry.captureException(e);
} }
export function MajorErrorMessage({ error, variant = "unexpected" }) { export function MajorErrorMessage({ error = null, variant = "unexpected" }) {
// If this is a GraphQL Bad Request error, show the message of the first // If this is a GraphQL Bad Request error, show the message of the first
// error the server returned. Otherwise, just use the normal error message! // error the server returned. Otherwise, just use the normal error message!
const message = const message =
error?.networkError?.result?.errors?.[0]?.message || error.message; error?.networkError?.result?.errors?.[0]?.message || error?.message || null;
// Log the detailed error to the console, so we can have a good debug // Log the detailed error to the console, so we can have a good debug
// experience without the parent worrying about it! // experience without the parent worrying about it!
React.useEffect(() => { React.useEffect(() => {
console.error(error); if (error) {
console.error(error);
}
}, [error]); }, [error]);
return ( return (
@ -428,6 +430,7 @@ export function MajorErrorMessage({ error, variant = "unexpected" }) {
<Box gridArea="title" fontSize="lg" marginBottom="1"> <Box gridArea="title" fontSize="lg" marginBottom="1">
{variant === "unexpected" && <>Ah dang, I broke it 😖</>} {variant === "unexpected" && <>Ah dang, I broke it 😖</>}
{variant === "network" && <>Oops, it didn't work, sorry 😖</>} {variant === "network" && <>Oops, it didn't work, sorry 😖</>}
{variant === "not-found" && <>Oops, page not found 😖</>}
</Box> </Box>
<Box gridArea="description" marginBottom="2"> <Box gridArea="description" marginBottom="2">
{variant === "unexpected" && ( {variant === "unexpected" && (
@ -451,15 +454,28 @@ export function MajorErrorMessage({ error, variant = "unexpected" }) {
! !
</> </>
)} )}
{variant === "not-found" && (
<>
We couldn't find this page. Maybe it's been deleted? Check the URL
and try again—and if you keep having trouble, please tell me more
at{" "}
<Link href="mailto:matchu@openneo.net" color="green.400">
matchu@openneo.net
</Link>
!
</>
)}
</Box> </Box>
<Box gridArea="details" fontSize="xs" opacity="0.8"> {message && (
<WarningIcon <Box gridArea="details" fontSize="xs" opacity="0.8">
marginRight="1.5" <WarningIcon
marginTop="-2px" marginRight="1.5"
aria-label="Error message" marginTop="-2px"
/> aria-label="Error message"
"{message}" />
</Box> "{message}"
</Box>
)}
</Grid> </Grid>
</Flex> </Flex>
); );