server function error handling
I just started to learn start. and I'm trying to figure out how to handle errors, specifically validator and middleware ones. I don't want to have the whole error stack on the client;
const ContactForm = z.object({
name: z.string().min(2, 'Please enter a valid name'),
email: z.string().email('Please enter a valid email'),
message: z.string().min(10, 'Message must contain at least 10 characters')
});
const submit = createServerFn({ method: 'POST' })
.validator(ContactForm)
.middleware([turstileMiddleware])
.handler(async ({ data }) => {
console.log(data, 'hi');
return 'ok';
});
export const Route = createFileRoute('/_nav/contact')({
component: RouteComponent
});
function RouteComponent() {
submit({ data: { token: 'mytoken', name: 'myname', email: 'bademail', message: 'hi' } })
.then((d) => console.log(d))
.catch((d) => console.log(JSON.parse(d.message)));
return <div>Hello "/_nav/contact"!</div>;
}const ContactForm = z.object({
name: z.string().min(2, 'Please enter a valid name'),
email: z.string().email('Please enter a valid email'),
message: z.string().min(10, 'Message must contain at least 10 characters')
});
const submit = createServerFn({ method: 'POST' })
.validator(ContactForm)
.middleware([turstileMiddleware])
.handler(async ({ data }) => {
console.log(data, 'hi');
return 'ok';
});
export const Route = createFileRoute('/_nav/contact')({
component: RouteComponent
});
function RouteComponent() {
submit({ data: { token: 'mytoken', name: 'myname', email: 'bademail', message: 'hi' } })
.then((d) => console.log(d))
.catch((d) => console.log(JSON.parse(d.message)));
return <div>Hello "/_nav/contact"!</div>;
}
