Changed error boundary to cover both full hub and disaptch app

apps/dispatch/app/_components/Error.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+export const Error = ({ statusCode, title }: { statusCode: number; title: string }) => {
+	return (
+		<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.</p>
+				<p className="text-gray-600 mt-2">{title || "Ein unerwarteter Fehler ist aufgetreten."}</p>
+				<button onClick={() => window.location.reload()} className="btn btn-dash my-2">
+					Refresh Page
+				</button>
+			</div>
+		</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>
+	);
+};

apps/dispatch/app/_components/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ErrorBoundary } from "react-error-boundary";
+import { Error as ErrorComp } from "./Error";
+
+export const CustomErrorBoundary = ({ children }: { children?: React.ReactNode }) => {
+	return (
+		<ErrorBoundary
+			fallbackRender={({ error }) => {
+				console.log(error);
+				let errorTest;
+				let errorCode = 500;
+				if ("statusCode" in error) {
+					errorCode = (error as any).statusCode;
+				}
+				if ("message" in error || error instanceof Error) {
+					errorTest = (error as any).message;
+				} else if (typeof error === "string") {
+					errorTest = error;
+				} else {
+					errorTest = "Ein unerwarteter Fehler ist aufgetreten.";
+				}
+				return <ErrorComp title={errorTest} statusCode={errorCode} />;
+			}}
+		>
+			{children}
+		</ErrorBoundary>
+	);
+};

apps/dispatch/app/_components/map/Map.tsx

@@ -14,7 +14,6 @@ import { Map as TMap } from "leaflet";
 const Map = () => {
 	const ref = useRef<TMap | null>(null);
 	const { map, setMap } = useMapStore();
-
 	useEffect(() => {
 		// Sync map zoom and center with the map store
 		if (ref.current) {