Error boundary

apps/hub/app/(auth)/layout.tsx

@@ -1,5 +1,7 @@
+"use client";
+import { Error as ErrorComp } from "_components/Error";
+import { ErrorBoundary } from "react-error-boundary";
 import { NextPage } from "next";
-import { ReactNode } from "react";
 
 const AuthLayout: NextPage<
 	Readonly<{
@@ -15,11 +17,30 @@ const AuthLayout: NextPage<
 	>
 		<div className="hero-overlay bg-neutral/60"></div>
 		<div className="hero-content text-center ">
-			<div className="max-w-lg">
-				<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
-					{children}
+			<ErrorBoundary
+				fallbackRender={({ error, resetErrorBoundary }) => {
+					console.log(error);
+					let errorTest;
+					let errorCode = 500;
+					if ("statusCode" in error) {
+						errorCode = error.statusCode;
+					}
+					if ("message" in error || error instanceof Error) {
+						errorTest = error.message;
+					} else if (typeof error === "string") {
+						errorTest = error;
+					} else {
+						errorTest = "Ein unerwarteter Fehler ist aufgetreten.";
+					}
+					return <ErrorComp title={errorTest} statusCode={errorCode} />;
+				}}
+			>
+				<div className="max-w-lg">
+					<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
+						{children}
+					</div>
 				</div>
-			</div>
+			</ErrorBoundary>
 		</div>
 	</div>
 );