Error boundary

apps/hub/app/(auth)/register/_components/Register.tsx

@@ -9,8 +9,10 @@ import { useState } from "react";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../../_components/ui/Button";
+import { useErrorBoundary } from "react-error-boundary";
 
 export const Register = () => {
+	const { showBoundary } = useErrorBoundary();
 	const schema = z
 		.object({
 			email: z.string().email({
@@ -48,20 +50,24 @@ export const Register = () => {
 		<form
 			className="card-body"
 			onSubmit={form.handleSubmit(async () => {
-				setIsLoading(true);
-				const values = form.getValues();
-				const user = await register({
-					email: form.getValues("email"),
-					password: form.getValues("password"),
-					firstname: form.getValues("firstname"),
-					lastname: form.getValues("lastname"),
-				});
-				await signIn("credentials", {
-					callbackUrl: "/",
-					email: user.email,
-					password: values.password,
-				});
-				setIsLoading(false);
+				try {
+					setIsLoading(true);
+					const values = form.getValues();
+					const user = await register({
+						email: form.getValues("email"),
+						password: form.getValues("password"),
+						firstname: form.getValues("firstname"),
+						lastname: form.getValues("lastname"),
+					});
+					await signIn("credentials", {
+						callbackUrl: "/",
+						email: user.email,
+						password: values.password,
+					});
+					setIsLoading(false);
+				} catch (error) {
+					showBoundary(error);
+				}
 			})}
 		>
 			<h1 className="text-3xl font-bold">Registrierung</h1>