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) {

apps/dispatch/app/api/auth/[...nextauth]/auth.ts

@@ -70,9 +70,25 @@ export const options: AuthOptions = {
 			return token;
 		},
 		session: async ({ session, user, token }) => {
+			const dbUser = await prisma.user.findUnique({
+				where: {
+					id: token?.sub,
+				},
+			});
+			if (!dbUser) {
+				return {
+					...session,
+					user: {
+						name: null,
+						email: null,
+						image: null,
+					},
+					expires: new Date().toISOString(),
+				};
+			}
 			return {
 				...session,
-				user: token,
+				user: dbUser,
 			};
 		},
 	},

apps/dispatch/app/dispatch/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Navbar from "./_components/navbar/Navbar";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
 
 export const metadata: Metadata = {
 	title: "VAR v2: Disponent",
@@ -14,9 +15,12 @@ export default async function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const session = await getServerSession();
+
 	if (!session) {
 		redirect("/login");
 	}
+	if (!session.user.permissions.includes("DISPO"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
 		<>
 			<Navbar />

apps/dispatch/app/layout.tsx

@@ -5,6 +5,9 @@ import { NextAuthSessionProvider } from "./_components/AuthSessionProvider";
 import { getServerSession } from "./api/auth/[...nextauth]/auth";
 import { Toaster } from "react-hot-toast";
 import { QueryProvider } from "_components/QueryProvider";
+import { Error as ErrorComp } from "_components/Error";
+import { ErrorBoundary } from "react-error-boundary";
+import { CustomErrorBoundary } from "_components/ErrorBoundary";
 
 const geistSans = localFont({
 	src: "./fonts/GeistVF.woff",
@@ -47,9 +50,7 @@ export default async function RootLayout({
 					reverseOrder={false}
 				/>
 				<QueryProvider>
-					<NextAuthSessionProvider session={session}>
+					<NextAuthSessionProvider session={session}>{children}</NextAuthSessionProvider>
-						{children}
-					</NextAuthSessionProvider>
 				</QueryProvider>
 			</body>
 		</html>

apps/dispatch/app/pilot/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Navbar from "./_components/navbar/Navbar";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
+import { Error } from "_components/Error";
 
 export const metadata: Metadata = {
 	title: "VAR v2: Pilot",
@@ -14,9 +15,12 @@ export default async function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const session = await getServerSession();
+
 	if (!session) {
 		redirect("/login");
 	}
+	if (!session.user.permissions.includes("PILOT"))
+		return <Error title="Zugriff verweigert" statusCode={403} />;
 	return (
 		<>
 			<Navbar />

apps/dispatch/package.json

@@ -36,6 +36,7 @@
 		"postcss": "^8.5.1",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
+		"react-error-boundary": "^5.0.0",
 		"react-hook-form": "^7.54.2",
 		"react-hot-toast": "^2.5.2",
 		"react-leaflet": "^5.0.0-rc.2",

apps/hub-server/modules/mail-templates/PasswordChanged.tsx

@@ -78,16 +78,12 @@ const Template = ({ user, password }: { user: User; password: string }) => (
 				<tbody>
 					<tr>
 						<td>
-							<table
+							<table align="center" width="680" style={{ margin: "0 auto", color: "#000000" }}>
-								align="center"
-								width="680"
-								style={{ margin: "0 auto", color: "#000000" }}
-							>
 								<tbody>
 									<tr>
 										<td style={{ textAlign: "center", paddingTop: "30px" }}>
 											<img
-												src={`${process.env.HUB_URL}/mail/var_logo.png`}
+												src={`${process.env.NEXT_PUBLIC_HUB_URL}/mail/var_logo.png`}
 												alt="Logo"
 												width="80"
 												style={{ display: "block", margin: "0 auto" }}
@@ -125,9 +121,8 @@ const Template = ({ user, password }: { user: User; password: string }) => (
 												padding: "20px",
 											}}
 										>
-											Dein Passwort wurde erfolgreich geändert. Wenn du diese
+											Dein Passwort wurde erfolgreich geändert. Wenn du diese Änderung nicht
-											Änderung nicht vorgenommen hast, kontaktiere bitte sofort
+											vorgenommen hast, kontaktiere bitte sofort unseren Support.
-											unseren Support.
 										</td>
 									</tr>
 									<tr>
@@ -191,12 +186,6 @@ const Template = ({ user, password }: { user: User; password: string }) => (
 	</Html>
 );
 
-export function renderPasswordChanged({
+export function renderPasswordChanged({ user, password }: { user: User; password: string }) {
-	user,
-	password,
-}: {
-	user: User;
-	password: string;
-}) {
 	return render(<Template user={user} password={password} />);
 }

apps/hub/app/(app)/_components/Events.tsx

@@ -6,12 +6,11 @@ import { eventCompleted } from "../../../helper/events";
 
 const page = async () => {
 	const session = await getServerSession();
+
 	if (!session) return null;
-	const user = await prisma.user.findUnique({
+
-		where: {
+	const user = session.user;
-			id: session.user.id,
+
-		},
-	});
 	if (!user) return null;
 
 	const events = await prisma.event.findMany({

apps/hub/app/(app)/_components/Stats.tsx

@@ -7,10 +7,7 @@ import { PlaneIcon } from "lucide-react";
 export const PilotStats = async () => {
 	const session = await getServerSession();
 	if (!session) return null;
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: { id: session.user.id },
-	});
-
 	const mostFlownStationsIds = await prisma.missionOnStationUsers.groupBy({
 		where: {
 			userId: user?.id,
@@ -63,8 +60,7 @@ export const PilotStats = async () => {
 		orderBy: { _count: { userId: "desc" } },
 	});
 
-	const ownRankMissionsFlown =
+	const ownRankMissionsFlown = missionsFlownRanks.findIndex((rank) => rank.userId === user?.id) + 1;
-		missionsFlownRanks.findIndex((rank) => rank.userId === user?.id) + 1;
 
 	const totalUserCount = await prisma.user.count({
 		where: {
@@ -108,8 +104,7 @@ export const PilotStats = async () => {
 				<div className="stat-title">Einsätze geflogen</div>
 				<div className="stat-value text-primary">{totalFlownMissions}</div>
 				<div className="stat-desc">
-					Du bist damit unter den top{" "}
+					Du bist damit unter den top {((ownRankMissionsFlown * 100) / totalUserCount).toFixed(0)}%!
-					{((ownRankMissionsFlown * 100) / totalUserCount).toFixed(0)}%!
 				</div>
 			</div>
 
@@ -140,17 +135,12 @@ export const PilotStats = async () => {
 					<div className="stat-figure text-info">
 						<PlaneIcon className="w-8 h-8" />
 					</div>
-					<div className="stat-value text-info">
+					<div className="stat-value text-info">{mostFlownStation?.bosCallsign}</div>
-						{mostFlownStation?.bosCallsign}
+					<div className="stat-title">War bisher dein Rettungsmittel der Wahl</div>
-					</div>
-					<div className="stat-title">
-						War bisher dein Rettungsmittel der Wahl
-					</div>
 					{unflownStationsCount > 0 && (
 						<div className="stat-desc text-secondary">
-							{unflownStationsCount}{" "}
+							{unflownStationsCount} {unflownStationsCount > 1 ? "Stationen" : "Station"} warten
-							{unflownStationsCount > 1 ? "Stationen" : "Station"} warten noch
+							noch auf dich!
-							auf dich!
 						</div>
 					)}
 					{unflownStationsCount === 0 && (
@@ -167,9 +157,7 @@ export const PilotStats = async () => {
 export const DispoStats = async () => {
 	const session = await getServerSession();
 	if (!session) return null;
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: { id: session.user.id },
-	});
 
 	const dispoSessions = await prisma.connectedDispatcher.findMany({
 		where: {
@@ -275,9 +263,7 @@ export const DispoStats = async () => {
 					<div className="stat-figure text-info">
 						<PlaneIcon className="w-8 h-8" />
 					</div>
-					<div className="stat-value text-info">
+					<div className="stat-value text-info">{mostDispatchedStation?.bosCallsign}</div>
-						{mostDispatchedStation?.bosCallsign}
-					</div>
 					<div className="stat-title">Wurde von dir am meisten Disponiert</div>
 					<div className="stat-desc text-secondary">
 						{mostDispatchedStationIds[0]?._count.missionStationIds} Einsätze

apps/hub/app/(app)/admin/event/layout.tsx

@@ -1,20 +1,18 @@
-import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
-export default async ({ children }: { children: React.ReactNode }) => {
+const AdminEventLayout = async ({ children }: { children: React.ReactNode }) => {
 	const session = await getServerSession();
 
 	if (!session) return <Error title="Nicht eingeloggt" statusCode={401} />;
 
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 
 	if (!user?.permissions.includes("ADMIN_EVENT"))
 		return <Error title="Keine Berechtigung" statusCode={403} />;
 
 	return <>{children}</>;
 };
+AdminEventLayout.displayName = "AdminEventLayout";
+
+export default AdminEventLayout;

apps/hub/app/(app)/admin/keyword/layout.tsx

@@ -1,20 +1,19 @@
-import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
-export default async ({ children }: { children: React.ReactNode }) => {
+const AdminKeywordLayout = async ({ children }: { children: React.ReactNode }) => {
 	const session = await getServerSession();
 
 	if (!session) return <Error title="Nicht eingeloggt" statusCode={401} />;
 
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 
 	if (!user?.permissions.includes("ADMIN_KEYWORD"))
 		return <Error title="Keine Berechtigung" statusCode={403} />;
 
 	return <>{children}</>;
 };
+
+AdminKeywordLayout.displayName = "AdminKeywordLayout";
+
+export default AdminKeywordLayout;

apps/hub/app/(app)/admin/report/layout.tsx

@@ -1,21 +1,12 @@
-import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
-export default async function ReportLayout({
+export default async function ReportLayout({ children }: { children: React.ReactNode }) {
-	children,
-}: {
-	children: React.ReactNode;
-}) {
 	const session = await getServerSession();
 
 	if (!session) return <Error title="Nicht eingeloggt" statusCode={401} />;
 
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 
 	if (!user?.permissions.includes("ADMIN_EVENT"))
 		return <Error title="Keine Berechtigung" statusCode={403} />;

apps/hub/app/(app)/admin/station/layout.tsx

@@ -1,20 +1,19 @@
-import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
-export default async ({ children }: { children: React.ReactNode }) => {
+const AdminStationLayout = async ({ children }: { children: React.ReactNode }) => {
 	const session = await getServerSession();
 
 	if (!session) return <Error title="Nicht eingeloggt" statusCode={401} />;
 
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 
 	if (!user?.permissions.includes("ADMIN_STATION"))
 		return <Error title="Keine Berechtigung" statusCode={403} />;
 
 	return <>{children}</>;
 };
+
+AdminStationLayout.displayName = "AdminStationLayout";
+
+export default AdminStationLayout;

apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx

@@ -11,12 +11,7 @@ import {
 } from "@repo/db";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import {
+import { deleteDispoHistory, deletePilotHistory, editUser, resetPassword } from "../../action";
-	deleteDispoHistory,
-	deletePilotHistory,
-	editUser,
-	resetPassword,
-} from "../../action";
 import { toast } from "react-hot-toast";
 import {
 	PersonIcon,
@@ -42,9 +37,7 @@ interface ProfileFormProps {
 	user: User;
 }
 
-export const ProfileForm: React.FC<ProfileFormProps> = ({
+export const ProfileForm: React.FC<ProfileFormProps> = ({ user }: ProfileFormProps) => {
-	user,
-}: ProfileFormProps) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const form = useForm<User>({
 		defaultValues: user,
@@ -83,9 +76,7 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({
 					/>
 				</label>
 				{form.formState.errors.firstname && (
-					<p className="text-error">
+					<p className="text-error">{form.formState.errors.firstname.message}</p>
-						{form.formState.errors.firstname.message}
-					</p>
 				)}
 				<label className="floating-label w-full mb-5">
 					<span className="text-lg flex items-center gap-2">
@@ -100,9 +91,7 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({
 					/>
 				</label>
 				{form.formState.errors.lastname && (
-					<p className="text-error">
+					<p className="text-error">{form.formState.errors.lastname?.message}</p>
-						{form.formState.errors.lastname?.message}
-					</p>
 				)}
 				<label className="floating-label w-full">
 					<span className="text-lg flex items-center gap-2">
@@ -154,11 +143,7 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({
 	);
 };
 
-export const ConnectionHistory: React.FC<{ user: User }> = ({
+export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: User }) => {
-	user,
-}: {
-	user: User;
-}) => {
 	const dispoTableRef = useRef<PaginatedTableRef>(null);
 	return (
 		<div className="card-body flex-row flex-wrap">
@@ -185,9 +170,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({
 								accessorKey: "loginTime",
 								header: "Login",
 								cell: ({ row }) => {
-									return new Date(row.getValue("loginTime")).toLocaleString(
+									return new Date(row.getValue("loginTime")).toLocaleString("de-DE");
-										"de-DE",
-									);
 								},
 							},
 							{
@@ -197,9 +180,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({
 										return <span className="text-success">Online</span>;
 									}
 									const loginTime = new Date(row.original.loginTime).getTime();
-									const logoutTime = new Date(
+									const logoutTime = new Date(row.original.logoutTime).getTime();
-										row.original.logoutTime,
-									).getTime();
 
 									const timeOnline = logoutTime - loginTime;
 
@@ -253,10 +234,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({
 								header: "Station",
 								cell: ({ row }) => {
 									return (
-										<Link
+										<Link className="link link-hover" href={`/admin/station/${row.original.id}`}>
-											className="link link-hover"
-											href={`/admin/station/${row.original.id}`}
-										>
 											{row.original.Station.bosCallsign}
 										</Link>
 									);
@@ -266,9 +244,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({
 								accessorKey: "loginTime",
 								header: "Login",
 								cell: ({ row }) => {
-									return new Date(row.getValue("loginTime")).toLocaleString(
+									return new Date(row.getValue("loginTime")).toLocaleString("de-DE");
-										"de-DE",
-									);
 								},
 							},
 							{
@@ -278,9 +254,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({
 										return <span className="text-success">Online</span>;
 									}
 									const loginTime = new Date(row.original.loginTime).getTime();
-									const logoutTime = new Date(
+									const logoutTime = new Date(row.original.logoutTime).getTime();
-										row.original.logoutTime,
-									).getTime();
 									const timeOnline = logoutTime - loginTime;
 
 									const hours = Math.floor(timeOnline / 1000 / 60 / 60);
@@ -360,19 +334,10 @@ export const UserReports = ({ user }: { user: User }) => {
 								return `${user.firstname} ${user.lastname} (${user.publicId})`;
 							},
 						},
-						{
-							accessorKey: "Reported",
-							header: "Reported",
-							cell: ({ row }) => {
-								const user = row.getValue("Reported") as User;
-								return `${user.firstname} ${user.lastname} (${user.publicId})`;
-							},
-						},
 						{
 							accessorKey: "timestamp",
 							header: "Time",
-							cell: ({ row }) =>
+							cell: ({ row }) => new Date(row.getValue("timestamp")).toLocaleString(),
-								new Date(row.getValue("timestamp")).toLocaleString(),
 						},
 						{
 							accessorKey: "actions",
@@ -411,12 +376,7 @@ interface AdminFormProps {
 	};
 }
 
-export const AdminForm = ({
+export const AdminForm = ({ user, dispoTime, pilotTime, reports }: AdminFormProps) => {
-	user,
-	dispoTime,
-	pilotTime,
-	reports,
-}: AdminFormProps) => {
 	const router = useRouter();
 
 	return (
@@ -495,8 +455,7 @@ export const AdminForm = ({
 					</div>
 					<div className="stat-title">Dispo Zeit</div>
 					<div className="stat-desc text-secondary">
-						{dispoTime.lastLogin &&
+						{dispoTime.lastLogin && new Date(dispoTime.lastLogin).toLocaleString("de-DE")}
-							new Date(dispoTime.lastLogin).toLocaleString("de-DE")}
 					</div>
 				</div>
 				<div className="stat">
@@ -508,8 +467,7 @@ export const AdminForm = ({
 					</div>
 					<div className="stat-title">Pilot Zeit</div>
 					<div className="stat-desc text-secondary">
-						{pilotTime.lastLogin &&
+						{pilotTime.lastLogin && new Date(pilotTime.lastLogin).toLocaleString("de-DE")}
-							new Date(pilotTime.lastLogin).toLocaleString("de-DE")}
 					</div>
 				</div>
 			</div>
@@ -523,12 +481,7 @@ export const AdminForm = ({
 					<div className="stat-figure text-primary">
 						<ExclamationTriangleIcon className="w-8 h-8" />
 					</div>
-					<div
+					<div className={cn("stat-value text-primary", reports.open && "text-warning")}>
-						className={cn(
-							"stat-value text-primary",
-							reports.open && "text-warning",
-						)}
-					>
 						{reports.open}
 					</div>
 					<div className="stat-title">Offen</div>
@@ -539,9 +492,7 @@ export const AdminForm = ({
 					</div>
 					<div className="stat-value text-primary">{reports.total60Days}</div>
 					<div className="stat-title">in den letzten 60 Tagen</div>
-					<div className="stat-desc text-secondary">
+					<div className="stat-desc text-secondary">{reports.total} insgesammt</div>
-						{reports.total} insgesammt
-					</div>
 				</div>
 			</div>
 		</div>

apps/hub/app/(app)/admin/user/layout.tsx

@@ -1,20 +1,19 @@
-import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
-export default async ({ children }: { children: React.ReactNode }) => {
+const AdminUserLayout = async ({ children }: { children: React.ReactNode }) => {
 	const session = await getServerSession();
 
 	if (!session) return <Error title="Nicht eingeloggt" statusCode={401} />;
 
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 
 	if (!user?.permissions.includes("ADMIN_USER"))
 		return <Error title="Keine Berechtigung" statusCode={403} />;
 
 	return <>{children}</>;
 };
+
+AdminUserLayout.displayName = "AdminUserLayout";
+
+export default AdminUserLayout;

apps/hub/app/(app)/events/page.tsx

@@ -6,11 +6,7 @@ import { RocketIcon } from "@radix-ui/react-icons";
 const page = async () => {
 	const session = await getServerSession();
 	if (!session) return null;
-	const user = await prisma.user.findUnique({
+	const user = session.user;
-		where: {
-			id: session.user.id,
-		},
-	});
 	if (!user) return null;
 
 	const events = await prisma.event.findMany({

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

@@ -1,13 +1,6 @@
 "use client";
-import { Error as ErrorComp } from "_components/Error";
-import { ErrorBoundary } from "react-error-boundary";
-import { NextPage } from "next";
 
-const AuthLayout: NextPage<
+const AuthLayout = ({ children }: { children: React.ReactNode }) => (
-	Readonly<{
-		children: React.ReactNode;
-	}>
-> = ({ children }) => (
 	<div
 		className="hero min-h-screen"
 		style={{
@@ -16,30 +9,11 @@ const AuthLayout: NextPage<
 	>
 		<div className="hero-overlay bg-neutral/60"></div>
 		<div className="hero-content text-center ">
-			<ErrorBoundary
+			<div className="max-w-lg">
-				fallbackRender={({ error, resetErrorBoundary }) => {
+				<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
-					console.log(error);
+					{children}
-					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>
-			</ErrorBoundary>
+			</div>
 		</div>
 	</div>
 );

apps/hub/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/hub/app/api/auth/[...nextauth]/auth.ts

@@ -27,7 +27,7 @@ export const options: AuthOptions = {
 			},
 		}),
 	],
-	
+
 	secret: process.env.AUTH_HUB_SECRET,
 	session: {
 		strategy: "jwt",
@@ -62,10 +62,26 @@ export const options: AuthOptions = {
 			}
 			return token;
 		},
-		session: async ({ session, user, token }) => {
+		session: async ({ session, token }) => {
+			const dbUser = await prisma.user.findUnique({
+				where: {
+					id: token?.sub,
+				},
+			});
+			if (!dbUser) {
+				return {
+					...session,
+					user: {
+						name: null,
+						email: null,
+						image: null,
+					},
+					expires: new Date().toISOString(),
+				};
+			}
 			return {
 				...session,
-				user: token,
+				user: dbUser,
 			};
 		},
 	},

apps/hub/app/layout.tsx

@@ -2,6 +2,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { NextAuthSessionProvider } from "./_components/AuthSessionProvider";
 import { getServerSession } from "./api/auth/[...nextauth]/auth";
 import "./globals.css";
+import { CustomErrorBoundary } from "_components/ErrorBoundary";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -24,7 +25,7 @@ const RootLayout = async ({
 		<html lang="en">
 			<NextAuthSessionProvider session={session}>
 				<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-					{children}
+					<CustomErrorBoundary>{children}</CustomErrorBoundary>
 				</body>
 			</NextAuthSessionProvider>
 		</html>

apps/hub/helper/authServices.ts

@@ -3,7 +3,7 @@ export const services = [
 		id: "1",
 		service: "dispatch",
 		name: "Leitstellendisposition",
-		approvedUrls: ["https://dispatch.premiumag.de"],
+		approvedUrls: [process.env.NEXT_PUBLIC_DISPATCH_URL],
 	},
 	{
 		id: "2",

pnpm-lock.yaml

@@ -92,6 +92,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.1.0(react@19.1.0)
+      react-error-boundary:
+        specifier: ^5.0.0
+        version: 5.0.0(react@19.1.0)
       react-hook-form:
         specifier: ^7.54.2
         version: 7.56.4(react@19.1.0)
@@ -195,6 +198,9 @@ importers:
       socket.io:
         specifier: ^4.8.1
         version: 4.8.1
+      tsx:
+        specifier: ^4.19.4
+        version: 4.19.4
     devDependencies:
       '@repo/db':
         specifier: '*'