Openstatus
www.openstatus.dev
1"use client";
2
3import { Link } from "@/components/common/link";
4import { Button } from "@/components/ui/button";
5import * as Sentry from "@sentry/nextjs";
6import { useEffect } from "react";
7
8export default function GlobalError({
9 error,
10 reset,
11}: {
12 error: Error & { digest?: string };
13 reset: () => void;
14}) {
15 useEffect(() => {
16 Sentry.captureException(error);
17 }, [error]);
18
19 return (
20 <html lang="en">
21 <body>
22 <main className="flex min-h-screen w-full flex-col space-y-6 bg-background p-4 md:p-8">
23 <div className="flex flex-1 flex-col items-center justify-center gap-8">
24 <div className="mx-auto max-w-xl border bg-card text-center">
25 <div className="flex flex-col gap-4 p-6 sm:p-12">
26 <div className="flex flex-col gap-1">
27 <h2 className="font-cal text-2xl text-foreground">
28 Application Error
29 </h2>
30 <p className="text-muted-foreground text-sm sm:text-base">
31 An unexpected error occurred. This has been reported and
32 we're working on it.{" "}
33 <Link href="mailto:ping@openstatus.dev">Contact us</Link> if
34 it persists.
35 </p>
36 </div>
37 <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
38 <Button
39 variant="outline"
40 size="lg"
41 onClick={reset}
42 className="cursor-pointer"
43 >
44 Try Again
45 </Button>
46 <Button size="lg" asChild>
47 <Link href="/">Go Home</Link>
48 </Button>
49 </div>
50 </div>
51 </div>
52 </div>
53 </main>
54 </body>
55 </html>
56 );
57}