`src/app/error.tsx`

28 lines
"use client";

import Link from "next/link";
import { useEffect } from "react";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => { console.error("app error", error); }, [error]);

  return (
    <article className="mx-auto max-w-2xl">
      <div className="card p-8 text-center">
        <div className="text-xs uppercase tracking-widest text-red-700">500</div>
        <h1 className="mt-2 text-3xl font-semibold">Something broke on our side.</h1>
        <p className="mt-3 text-ink/70">We've been pinged. Meanwhile:</p>
        <pre className="mt-3 rounded bg-ink/5 p-3 text-left text-xs text-ink/60 overflow-auto max-h-32">
          {error.message}
          {error.digest ? `\ndigest: ${error.digest}` : ""}
        </pre>
        <div className="mt-6 flex flex-wrap justify-center gap-2">
          <button onClick={() => reset()} className="btn">Try again</button>
          <Link href="/drops" className="btn-ghost">Back to Drops</Link>
          <a href="mailto:drops@agentabrams.com" className="btn-ghost">Email support</a>
        </div>
      </div>
    </article>
  );
}