sarlink-portal/app/(dashboard)/error.tsx

"use client"; // Error boundaries must be Client Components

import { Button } from "@/components/ui/button";
import { TriangleAlert } from "lucide-react";
import { useEffect } from "react";
export default function DashboardError({
	error,
	reset,
}: {
	error: Error & { digest?: string };
	reset: () => void;
}) {
	useEffect(() => {
		// Log the error to an error reporting service
		console.error(error);
	}, [error]);

	return (
		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
				<TriangleAlert color="red" />
				<h2 className="text-red-500 text-xl font-semibold">
					Something went wrong!
				</h2>
				<Button
					variant={"destructive"}
					size={"lg"}
					onClick={
						// Attempt to recover by trying to re-render the segment
						() => reset()
					}
				>
					Try again
				</Button>
			</div>
		</div>
	);
}