Skip to content

Improve 404/403 error page with clear messaging and next steps #2909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cqnykamp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve 404/403 error page with clear messaging and next steps #2909

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 116 additions & 68 deletions apps/app/src/paths/ErrorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,142 @@
import { Container, Button, Heading, Text } from "@chakra-ui/react";
import { Container, Button, Heading, Text, HStack } from "@chakra-ui/react";

import { useNavigate, useRouteError } from "react-router";

const mouths = [
"M 23.485 28.879 C 23.474 28.835 22.34 24.5 18 24.5 S 12.526 28.835 12.515 28.879 C 12.462 29.092 12.559 29.31 12.747 29.423 C 12.935 29.535 13.18 29.509 13.343 29.363 C 13.352 29.355 14.356 28.5 18 28.5 C 21.59 28.5 22.617 29.33 22.656 29.363 C 22.751 29.453 22.875 29.5 23 29.5 C 23.084 29.5 23.169 29.479 23.246 29.436 C 23.442 29.324 23.54 29.097 23.485 28.879 Z",
"M25 26H11c-.552 0-1-.447-1-1s.448-1 1-1h14c.553 0 1 .447 1 1s-.447 1-1 1z",
"M18 21.849c-2.966 0-4.935-.346-7.369-.819-.557-.106-1.638 0-1.638 1.638 0 3.275 3.763 7.369 9.007 7.369s9.007-4.094 9.007-7.369c0-1.638-1.082-1.745-1.638-1.638-2.434.473-4.402.819-7.369.819",
];
const sadFacePath = {
mouth:
"M 23.485 28.879 C 23.474 28.835 22.34 24.5 18 24.5 S 12.526 28.835 12.515 28.879 C 12.462 29.092 12.559 29.31 12.747 29.423 C 12.935 29.535 13.18 29.509 13.343 29.363 C 13.352 29.355 14.356 28.5 18 28.5 C 21.59 28.5 22.617 29.33 22.656 29.363 C 22.751 29.453 22.875 29.5 23 29.5 C 23.084 29.5 23.169 29.479 23.246 29.436 C 23.442 29.324 23.54 29.097 23.485 28.879 Z",
leftEye:
"M 11.226 15.512 C 10.909 15.512 10.59 15.551 10.279 15.628 C 7.409 16.335 6.766 19.749 6.74 19.895 C 6.7 20.118 6.816 20.338 7.021 20.435 C 7.088 20.466 7.161 20.482 7.232 20.482 C 7.377 20.482 7.519 20.419 7.617 20.302 C 7.627 20.29 8.627 19.124 10.996 18.541 C 11.71 18.365 12.408 18.276 13.069 18.276 C 14.173 18.276 14.801 18.529 14.804 18.53 C 14.871 18.558 14.935 18.57 15.011 18.57 C 15.283 18.582 15.52 18.349 15.52 18.07 C 15.52 17.905 15.44 17.759 15.317 17.668 C 14.95 17.233 13.364 15.512 11.226 15.512 Z",
rightEye:
"M 24.774 15.512 C 25.091 15.512 25.41 15.551 25.721 15.628 C 28.591 16.335 29.234 19.749 29.26 19.895 C 29.3 20.118 29.184 20.338 28.979 20.435 C 28.912 20.466 28.839 20.482 28.768 20.482 C 28.623 20.482 28.481 20.419 28.383 20.302 C 28.373 20.29 27.373 19.124 25.004 18.541 C 24.29 18.365 23.592 18.276 22.931 18.276 C 21.827 18.276 21.2 18.529 21.196 18.53 C 21.129 18.558 21.065 18.57 20.99 18.57 C 20.718 18.582 20.481 18.349 20.481 18.07 C 20.481 17.905 20.561 17.759 20.684 17.668 C 21.05 17.233 22.636 15.512 24.774 15.512 Z",
};

const leftEyes = [
"M 11.226 15.512 C 10.909 15.512 10.59 15.551 10.279 15.628 C 7.409 16.335 6.766 19.749 6.74 19.895 C 6.7 20.118 6.816 20.338 7.021 20.435 C 7.088 20.466 7.161 20.482 7.232 20.482 C 7.377 20.482 7.519 20.419 7.617 20.302 C 7.627 20.29 8.627 19.124 10.996 18.541 C 11.71 18.365 12.408 18.276 13.069 18.276 C 14.173 18.276 14.801 18.529 14.804 18.53 C 14.871 18.558 14.935 18.57 15.011 18.57 C 15.283 18.582 15.52 18.349 15.52 18.07 C 15.52 17.905 15.44 17.759 15.317 17.668 C 14.95 17.233 13.364 15.512 11.226 15.512 Z",
// "M 11.226",
"M9,16.5a2.5,3.5 0 1,0 5,0a2.5,3.5 0 1,0 -5,0",
"M 16.65 3.281 C 15.791 0.85 13.126 -0.426 10.694 0.431 C 9.218 0.951 8.173 2.142 7.766 3.535 C 6.575 2.706 5.015 2.435 3.541 2.955 C 1.111 3.813 -0.167 6.48 0.692 8.911 C 0.814 9.255 0.976 9.574 1.164 9.869 C 3.115 13.451 8.752 15.969 12.165 16 C 14.802 13.833 17.611 8.335 16.883 4.323 C 16.845 3.975 16.77 3.625 16.65 3.281 Z",
];

const rightEyes = [
"M 24.774 15.512 C 25.091 15.512 25.41 15.551 25.721 15.628 C 28.591 16.335 29.234 19.749 29.26 19.895 C 29.3 20.118 29.184 20.338 28.979 20.435 C 28.912 20.466 28.839 20.482 28.768 20.482 C 28.623 20.482 28.481 20.419 28.383 20.302 C 28.373 20.29 27.373 19.124 25.004 18.541 C 24.29 18.365 23.592 18.276 22.931 18.276 C 21.827 18.276 21.2 18.529 21.196 18.53 C 21.129 18.558 21.065 18.57 20.99 18.57 C 20.718 18.582 20.481 18.349 20.481 18.07 C 20.481 17.905 20.561 17.759 20.684 17.668 C 21.05 17.233 22.636 15.512 24.774 15.512 Z",
"M22,16.5a2.5,3.5 0 1,0 5,0a2.5,3.5 0 1,0 -5,0",
"M 19.35 3.281 C 20.209 0.85 22.875 -0.426 25.306 0.431 C 26.782 0.951 27.827 2.142 28.235 3.535 C 29.426 2.706 30.986 2.435 32.46 2.955 C 34.89 3.813 36.167 6.48 35.31 8.911 C 35.187 9.255 35.026 9.574 34.837 9.869 C 32.886 13.451 27.249 15.969 23.835 16 C 21.198 13.833 18.39 8.335 19.118 4.323 C 19.155 3.975 19.23 3.625 19.35 3.281 Z",
];
function SadFace() {
return (
<svg
width="120"
height="120"
viewBox="0 0 36 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="18" cy="18" r="18" fill="#eea177" />
<circle cx="18" cy="18" r="15" fill="#6d4445" />
<circle cx="18" cy="18" r="6" fill="white" />
<path d={sadFacePath.rightEye} fill={"black"} />
<path d={sadFacePath.leftEye} fill={"black"} />
<path d={sadFacePath.mouth} fill={"black"} />
</svg>
);
}

function ErrorPage() {
const navigate = useNavigate();
const error: any = useRouteError();
console.error(error);

let errorDescription;
const status = error?.response?.status;
const responseData = error?.response?.data;
const isMustLogin = responseData?.error === "Must be logged in";

let heading: string;
let description: React.ReactNode;
let actions: React.ReactNode;

if (
!error.response ||
error.response.status === 404 ||
error.response.status === 403
) {
errorDescription = (
if (status === 404) {
heading = "Content Not Found";
description = (
<Text>
We are very sorry for the inconvenience. It looks like you&apos;re
trying to access a page that is unavailable.
The page you&apos;re looking for doesn&apos;t exist or may have been
removed. If someone shared this link with you, the author may need to
make the content public before you can access it.
</Text>
);
} else {
errorDescription = (
actions = (
<HStack justify="center" gap={4} flexWrap="wrap">
<Button colorScheme="blue" onClick={() => navigate("/")}>
Go to Homepage
</Button>
<Button variant="outline" onClick={() => navigate("/explore")}>
Explore Public Activities
</Button>
</HStack>
);
} else if (status === 403) {
if (isMustLogin) {
heading = "Sign In Required";
description = (
<Text>
You need to sign in to view this content. Please sign in and try
again.
</Text>
);
actions = (
<HStack justify="center" gap={4} flexWrap="wrap">
<Button colorScheme="blue" onClick={() => navigate("/signIn")}>
Sign In
</Button>
<Button variant="outline" onClick={() => navigate("/")}>
Go to Homepage
</Button>
</HStack>
);
} else {
heading = "This Content is Private";
description = (
<Text>
You don&apos;t have permission to view this content. If someone shared
this link with you, ask the author to make the content public or to
share it with you directly.
</Text>
);
actions = (
<HStack justify="center" gap={4} flexWrap="wrap">
<Button colorScheme="blue" onClick={() => navigate("/")}>
Go to Homepage
</Button>
<Button variant="outline" onClick={() => navigate("/explore")}>
Explore Public Activities
</Button>
</HStack>
);
}
} else if (!error.response) {
heading = "Page Unavailable";
description = (
<Text>
We are very sorry for for the inconvenience. It appears that we have
encountered an error.
This page is currently unavailable. Please check your connection and try
again.
</Text>
);
}

let errorMessage;
if (
typeof error.response?.data === "string" &&
error.response.data.length > 0 &&
error.response.data.length < 50
) {
errorMessage = error.response.data;
actions = (
<Button colorScheme="blue" onClick={() => navigate("/")}>
Go to Homepage
</Button>
);
} else {
errorMessage = error.message;
heading = "Something Went Wrong";
description = (
<Text>
We&apos;re sorry for the inconvenience. An unexpected error occurred.
Please try again or return to the homepage.
</Text>
);
actions = (
<Button colorScheme="blue" onClick={() => navigate("/")}>
Go to Homepage
</Button>
);
}

return (
<Container padding="70px 0" textAlign="center" maxWidth="800px">
{/* <Heading>Oops! Page not found.</Heading> */}
<Heading data-test="Error Message">{errorMessage}</Heading>
{/* <Heading fontSize="96">404</Heading> */}
{errorDescription}
<Container centerContent padding="36px">
<svg
width="240"
height="240"
viewBox="0 0 36 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="18" cy="18" r="18" fill="#eea177" />
<circle cx="18" cy="18" r="15" fill="#6d4445" />
<circle cx="18" cy="18" r="6" fill="white" />
<path d={rightEyes[0]} fill={"black"} />
<path d={leftEyes[0]} fill={"black"} />
<path d={mouths[0]} fill={"black"} />
</svg>
<Heading data-test="Error Message">{heading}</Heading>
<Container padding="16px 0">{description}</Container>
<Container centerContent padding="24px">
<SadFace />
</Container>
<Button
colorScheme="blue"
onClick={() => {
navigate("/");
}}
>
Back to Home
</Button>
{actions}
</Container>
);
}
Expand Down
Loading