fix: read aggregate and error cause bubbles

app/components/Error.tsx

@@ -8,11 +8,34 @@ interface Props {
 	type?: 'full' | 'embedded';
 }
 
+
+function getMessage(error: Error | unknown) {
+	if (!(error instanceof Error)) {
+		return "An unknown error occurred";
+	}
+
+	let rootError = error;
+
+	// Traverse the error chain to find the root cause
+	if (error.cause) {
+		rootError = error.cause;
+		while (rootError.cause) {
+			rootError = rootError.cause;
+		}
+	}
+
+	// If we are aggregate, concat into a single message
+	if (rootError instanceof AggregateError) {
+		return rootError.errors.map((error) => error.message).join('\n');
+	}
+
+	return rootError.message;
+}
+
 export function ErrorPopup({ type = 'full' }: Props) {
 	const error = useRouteError();
 	const routing = isRouteErrorResponse(error);
-	const message =
+	const message = getMessage(error);
-		error instanceof Error ? error.message : 'An unexpected error occurred';
 
 	return (
 		<div