File size: 3,003 Bytes
65d68f5 | 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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | "use client";
import { useEffect } from "react";
import Link from "next/link";
import { AlertCircle, ArrowRight, RefreshCw } from "lucide-react";
import { reportClientError } from "@/lib/telemetry";
export default function RouteError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
if (process.env.NODE_ENV !== "production") {
console.error("[DocDoe] Unhandled route error:", error);
}
reportClientError(error, "route-error", { digest: error.digest });
}, [error]);
return (
<main className="relative grid min-h-svh place-items-center overflow-hidden bg-[#f7f7f5] px-5 py-8 text-[#17181b]">
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(23,24,27,0.025)_1px,transparent_1px),linear-gradient(90deg,rgba(23,24,27,0.025)_1px,transparent_1px)] bg-[size:72px_72px]" aria-hidden="true" />
<section className="relative w-full max-w-md border border-[#deded9] bg-white p-6 text-center shadow-[0_20px_70px_rgba(23,24,27,0.11)] sm:p-8">
<div className="mx-auto grid size-12 place-items-center border border-[#d7a4a0] bg-[#fff6f5] text-[#8a2f2a]">
<AlertCircle className="size-5" strokeWidth={1.9} aria-hidden="true" />
</div>
<h1 className="mt-5 text-[25px] font-semibold tracking-[-0.035em]">This page did not finish loading</h1>
<p className="mt-3 text-[14px] leading-6 text-[#62635e]" role="alert">
Your saved study work has not been changed. Try again, or return to your study desk.
</p>
<div className="mt-7 grid gap-3 sm:grid-cols-2">
<button
type="button"
onClick={reset}
className="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-[#17181b] px-4 text-[13px] font-semibold text-white transition hover:bg-[#303136] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2"
>
<RefreshCw className="size-4" strokeWidth={2} aria-hidden="true" />
Try again
</button>
<Link
href="/"
className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-[#d8d8d3] px-4 text-[13px] font-semibold text-[#363733] transition hover:bg-[#f8f8f6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2"
>
Open Home
<ArrowRight className="size-4" strokeWidth={2} aria-hidden="true" />
</Link>
</div>
<Link href="/" className="mt-5 inline-flex rounded text-[12px] font-semibold text-[#62635e] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b]">
Go to the DocDoe start page
</Link>
{error.digest ? <p className="mt-5 text-[11px] text-[#8a8b86]">Reference: {error.digest}</p> : null}
</section>
</main>
);
}
|