Error boundary

apps/hub/app/_components/Error.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect } from "react";
+
 export const Error = ({
 	statusCode,
 	title,
@@ -8,8 +10,8 @@ export const Error = ({
 	title: string;
 }) => {
 	return (
-		<div className="flex items-center justify-center ">
-			<div className="shadow-lg rounded-2xl p-8 text-center max-w-md w-full	">
+		<div className="flex-1 flex items-center justify-center h-full">
+			<div className="rounded-2xl bg-base-300 p-8 text-center max-w-md w-full">
 				<h1 className="text-6xl font-bold text-red-500">{statusCode}</h1>
 				<p className="text-xl font-semibold mt-4">
 					Oh nein! Ein Fehler ist aufgetreten.
@@ -27,3 +29,30 @@ export const Error = ({
 		</div>
 	);
 };
+
+export const ErrorFallback = ({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) => {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div>
+			<h2>Something went wrong!</h2>
+			<button
+				onClick={
+					// Attempt to recover by trying to re-render the segment
+					() => reset()
+				}
+			>
+				Try again
+			</button>
+		</div>
+	);
+};