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 2 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
38 changes: 26 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,40 @@
import React from "react";
import { useRouteError } from "react-router-dom";
import { useRouteError, useNavigate } from "react-router-dom";
import { PageTitle } from "../components/elements/BattlecodeStyle";
import { DEFAULT_EPISODE } from "../utils/constants";

const ErrorBoundary: React.FC = () => {
const error = useRouteError();
const navigate = useNavigate(); // Initialize useNavigate

if (error instanceof Error) {
return (
<div className="flex flex-col gap-6 p-6 xl:flex-row">
const handleGoHome = (): void => {
navigate(`/${DEFAULT_EPISODE}/home`); // Navigate to home
};

return (
<div className="flex h-screen w-full items-center justify-center bg-white p-6">
<div className="flex flex-col gap-4 rounded-lg border border-gray-300 bg-gray-50 p-6 shadow-md max-w-xs w-full">
<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="rounded-md bg-gray-200 px-1 py-0.5 font-mono text-center block">
{error.message}
</span>
) : (
<span className="text-red-600 text-center block">An unknown error occurred.</span>
)}
<button
Copy link
Member

Choose a reason for hiding this comment

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

We have a custom Button component in components/elements that you can use for any buttons you create, it's pre styled.

Copy link
Member

Choose a reason for hiding this comment

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

I think we can just use a div here instead of a button though (put the div inside the Link component)

onClick={handleGoHome}
Copy link
Member

Choose a reason for hiding this comment

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

instead of using navigate we can use the React Router Link component https://reactrouter.com/en/main/components/link

It'll simplify the logic a bit, I think that navigate should be used for more complicated logic

className="mt-4 rounded bg-blue-500 text-white px-3 py-1 hover:bg-blue-600 transition mx-auto"
>
Go to Home
</button>
</div>
);
}

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

export default ErrorBoundary;
Loading