75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error("[Error Boundary]", error);
|
|
// Notify parent frame (Webild editor) about the runtime error
|
|
try {
|
|
window.parent.postMessage(
|
|
{ type: "webild-runtime-error", message: error.message },
|
|
"*",
|
|
);
|
|
} catch {}
|
|
}, [error]);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
background: "#fafafa",
|
|
padding: "2rem",
|
|
}}
|
|
>
|
|
<div style={{ textAlign: "center", maxWidth: 420 }}>
|
|
<h2
|
|
style={{
|
|
fontSize: "1.25rem",
|
|
fontWeight: 600,
|
|
color: "#111",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Something went wrong
|
|
</h2>
|
|
<p
|
|
style={{
|
|
color: "#666",
|
|
fontSize: "0.875rem",
|
|
lineHeight: 1.5,
|
|
marginBottom: "1.25rem",
|
|
}}
|
|
>
|
|
An error occurred while rendering this page.
|
|
</p>
|
|
<button
|
|
onClick={reset}
|
|
style={{
|
|
padding: "0.5rem 1.25rem",
|
|
fontSize: "0.8125rem",
|
|
fontWeight: 500,
|
|
color: "#fff",
|
|
background: "#111",
|
|
border: "none",
|
|
borderRadius: "0.375rem",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|