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

View File

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

View File

@ -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>
);
}

View File

@ -1,36 +1,23 @@
"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 Card from "@/components/card";
import NextError from "next/error";
import { useEffect } from "react";
/**
* 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 } }) {
export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
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>
<div className="mt-6">
<Link href="/" className="text-blue-500 hover:brightness-75 transition-all transform-gpu">
Go Home
</Link>
</div>
</div>
</Card>
<html>
<body>
{/* `NextError` is the default Next.js error page component. Its type
definition requires a `statusCode` prop. However, since the App Router
does not expose status codes for errors, we simply pass 0 to render a
generic error message. */}
<NextError statusCode={0} />
</body>
</html>
);
}