thallium-frontend/src/pages/ErrorPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { useRouteError, isRouteErrorResponse } from "react-router-dom";

import Card from "../components/Card";
import MaxWidthContainer from "../components/MaxWidthContainer";

const ErrorPage = () => {
    const error = useRouteError();

    let title = "Unexpected Error", message, isUnexpected = false;

    if (isRouteErrorResponse(error)) {
        if (error.status === 404) {
            title = "Not Found";
            message = "The requested page could not be found.";
        } else {
            message = error.statusText;
        }
    } else if (error instanceof Error) {
        message = error.message;
        isUnexpected = true;
    } else if (typeof error === "string") {
        message = error;
        isUnexpected = true;
    } else {
        console.error(error);
        message = "Unknown error";
        isUnexpected = true;
    }

    return <MaxWidthContainer>
        <Card title={title}>
            {isUnexpected && <strong>An error occurred:</strong>}
            <p>
                {message}
            </p>
        </Card>
    </MaxWidthContainer>;
};

export default ErrorPage;