| 1 | "use client"; |
| 2 | |
| 3 | import { useEffect } from "react"; |
| 4 | |
| 5 | export default function ErrorBoundary({ |
| 6 | error, |
| 7 | reset, |
| 8 | }: { |
| 9 | error: Error & { digest?: string }; |
| 10 | reset: () => void; |
| 11 | }) { |
| 12 | useEffect(() => { |
| 13 | fetch("/api/dev-errors", { |
| 14 | method: "POST", |
| 15 | headers: { "Content-Type": "application/json" }, |
| 16 | body: JSON.stringify({ |
| 17 | type: "react-error", |
| 18 | message: error.message, |
| 19 | stack: error.stack, |
| 20 | digest: error.digest, |
| 21 | url: window.location.href, |
| 22 | }), |
| 23 | }).catch(() => {}); |
| 24 | }, [error]); |
| 25 | |
| 26 | return ( |
| 27 | <div className="max-w-3xl mx-auto px-4 py-16"> |
| 28 | <h1 className="text-lg" style={{ color: "var(--text-secondary)" }}> |
| 29 | Something went wrong |
| 30 | </h1> |
| 31 | <p |
| 32 | className="text-sm mt-1 mb-4" |
| 33 | style={{ color: "var(--text-muted)" }} |
| 34 | > |
| 35 | {error.message} |
| 36 | </p> |
| 37 | <button |
| 38 | onClick={reset} |
| 39 | className="text-sm px-3 py-1.5" |
| 40 | style={{ |
| 41 | color: "var(--accent)", |
| 42 | border: "1px solid var(--border-subtle)", |
| 43 | }} |
| 44 | > |
| 45 | Try again |
| 46 | </button> |
| 47 | </div> |
| 48 | ); |
| 49 | } |
| 50 | |