54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Next.js global error boundary. Renders only when a render error
|
|
* escapes every other error.tsx boundary in the tree (including the
|
|
* root layout). Required for Sentry to capture root-layout crashes
|
|
* — the more granular `error.tsx` files don't run when the layout
|
|
* itself blows up.
|
|
*/
|
|
|
|
import * as Sentry from "@sentry/nextjs";
|
|
import { useEffect } from "react";
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
}) {
|
|
useEffect(() => {
|
|
Sentry.captureException(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html>
|
|
<body>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minHeight: "100vh",
|
|
padding: "2rem",
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
color: "#1a1a1a",
|
|
}}
|
|
>
|
|
<h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
|
|
Something went wrong
|
|
</h1>
|
|
<p style={{ color: "#666", marginBottom: "1.5rem" }}>
|
|
We've been notified and will look into it. Try refreshing.
|
|
</p>
|
|
{error.digest ? (
|
|
<code style={{ fontSize: "0.75rem", color: "#999" }}>
|
|
ref: {error.digest}
|
|
</code>
|
|
) : null}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|