surely this works
All checks were successful
Deploy Backend / deploy (push) Successful in 4m23s
Deploy Website / deploy (push) Successful in 7m25s

This commit is contained in:
Lee 2024-10-14 11:29:00 +01:00
parent 5871b82f75
commit 383f41f9ca
3 changed files with 43 additions and 26 deletions

@ -7,5 +7,9 @@ let regionNames = new Intl.DisplayNames(["en"], { type: "region" });
* @returns the normalized region name * @returns the normalized region name
*/ */
export function normalizedRegionName(region: string) { export function normalizedRegionName(region: string) {
return regionNames.of(region); try {
return regionNames.of(region) || region;
} catch {
return region;
}
} }

@ -0,0 +1,26 @@
"use client"; // Error components must be Client Components
import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import Card from "@/components/card";
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
return (
<Card>
<div className="flex flex-col items-center justify-center text-center h-screen">
<GlobeAmericasIcon className="h-24 w-24 text-red-500" />
<h1 className="text-4xl font-bold text-gray-200 mt-6">Oops! Something went wrong.</h1>
<p className="text-lg text-gray-400 mt-2">
We&#39;re experiencing some technical difficulties. Please try again later.
</p>
{error?.digest && <p className="text-sm text-gray-500 mt-1">Error Code: {error.digest}</p>}
<div className="mt-6">
<Link href="/" className="text-blue-500 hover:underline">
Go back to the homepage
</Link>
</div>
</div>
</Card>
);
}

@ -1,36 +1,23 @@
"use client"; "use client";
import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
import Card from "@/components/card"; import NextError from "next/error";
import { useEffect } from "react";
/** export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
* Error page component for handling global errors.
*
* @param error - The error object passed to the component.
*/
export default function ErrorPage({ error }: { error: Error & { digest?: string } }) {
useEffect(() => { useEffect(() => {
Sentry.captureException(error); Sentry.captureException(error);
}, [error]); }, [error]);
return ( return (
<Card> <html>
<div className="flex flex-col items-center justify-center text-center h-screen"> <body>
<GlobeAmericasIcon className="h-24 w-24 text-red-500" /> {/* `NextError` is the default Next.js error page component. Its type
<h1 className="text-4xl font-bold text-gray-200 mt-6">Oops! Something went wrong.</h1> definition requires a `statusCode` prop. However, since the App Router
<p className="text-lg text-gray-400 mt-2"> does not expose status codes for errors, we simply pass 0 to render a
We&#39;re experiencing some technical difficulties. Please try again later. generic error message. */}
</p> <NextError statusCode={0} />
</body>
<div className="mt-6"> </html>
<Link href="/" className="text-blue-500 hover:brightness-75 transition-all transform-gpu">
Go Home
</Link>
</div>
</div>
</Card>
); );
} }