Skip to content
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

Jump to bottom

Prettier error-page #836

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Prettier error-page #836

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c068db
test
Oct 11, 2024
e6c01af
Added Error boundary
Nov 2, 2024
5661dc3
Fixed Error boundry following serena comments
Nov 9, 2024
34d637c
Used div to make it nicer and ran npm run format
Nov 9, 2024
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
35 changes: 23 additions & 12 deletions frontend2/src/views/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
import React from "react";
import { useRouteError } from "react-router-dom";
import { useRouteError, Link } from "react-router-dom";
import { PageTitle } from "../components/elements/BattlecodeStyle";
import { useEpisodeId } from "../contexts/EpisodeContext";

const ErrorBoundary: React.FC = () => {
const error = useRouteError();
const { episodeId } = useEpisodeId();

if (error instanceof Error) {
return (
<div className="flex flex-col gap-6 p-6 xl:flex-row">
return (
<div className="flex h-screen w-full items-center justify-center bg-white p-6">
<div className="flex w-full max-w-xs flex-col gap-4 rounded-lg border border-gray-300 bg-gray-50 p-6 shadow-md">
<PageTitle>Oops, something went wrong.</PageTitle>
<p>
<p className="text-center">
Please reach out on Discord or to [email protected] with the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's replace this with whatever the standard way to link to an email address is! Maybe:

<a href="mailto:[email protected]?subject=play.battlecode.org%20Bug%20Report&body=This%20is%20the%20email%20body">[email protected]</a>

where the body is the error message and page name (or some other well-formatted embedding of the error information 😃)

following error message:
</p>
<span className="rounded-md bg-gray-200 px-1 py-0.5 font-mono">
{error.message}
</span>
{error instanceof Error ? (
<span className="block rounded-md bg-gray-200 px-1 py-0.5 text-center font-mono">
{error.message}
</span>
) : (
<span className="block text-center text-red-600">
An unknown error occurred.
</span>
)}
<Link to={episodeId !== undefined ? `/${episodeId}/home` : "/"}>
<div className="mx-auto mt-4 rounded bg-blue-500 px-3 py-1 text-center text-white transition hover:bg-blue-600">
Go to Home
</div>
</Link>
</div>
);
}

return <p>Oops, something went wrong.</p>;
</div>
);
};

export default ErrorBoundary;
Loading