Frontend/src/app/global-error.tsx

"use client";

import * as Sentry from "@sentry/nextjs";
import Error from "next/error";
import { useEffect } from "react";
import Link from "next/link";
import { Button } from "@/app/components/ui/button";

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

  return (
    <div className="flex text-center flex-col gap-4">
      <div>
        <h2 className="text-red-400 font-2xl font-semibold">Error</h2>
        <p>An error occurred while rendering this page.</p>
      </div>
      <Button onClick={reset}>Reload</Button>
    </div>
  );
}