Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

testing custom error page
All checks were successful
Deploy Website / deploy (push) Successful in 6m38s
Details

Browse Source
This commit is contained in:
Lee 2024-10-14 11:11:13 +01:00
parent 055e0869b8
commit 52e3ac9cec
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
projects/website/src/app/global-error.tsx
View File

@ -1,23 +1,37 @@
"use client";
import * as Sentry from "@sentry/nextjs";
import NextError from "next/error";
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";
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(() => {
Sentry.captureException(error);
}, [error]);
return (
<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>
<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>
);
}