How to handle & type errors throw in a server function?

[depsimon]

Total beginner with TanStack here.

I was trying to setup a basic form in a Start project, and was wondering what's the best way to gracefully handle errors thrown by the server function.

I want to start the simplest way possible, and then upgrade to the TanStack Form validation on the server + client later. But I guess this is more of a general question on how to deal with errors thrown from a server function.

When I throw json({ message: "Invalid form data" }, { status: 400 });

I can catch it in the client, but the error is not typed. When I log it, I see this output:

{"message":"Request failed with status 400","body":{"message":"Invalid form data"}}

Is there a way to infer the type of the error based on the server function return type? Or whats the recommended way to handle these?

Here's an example page:

import { useForm } from '@tanstack/react-form';
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn, json } from '@tanstack/start';

const handleForm = createServerFn({ method: "POST" })
  .validator((data: unknown) => {
    console.log('data', data)
    if (!(data instanceof FormData)) {
      throw json({ message: "Invalid form data" }, { status: 400 });
    }
    const first_name = data.get("first_name");
    const last_name = data.get("last_name");
    const email = data.get("email");

    if (!first_name || !last_name || !email) {
      throw json({ message: "All fields are required" }, { status: 422 });
    }

    return {
      first_name: first_name.toString(),
      last_name: last_name.toString(),
      email: email.toString(),
    };
  })
  .handler(async ({ data }) => {
    console.log("data", data);

    return "Form has validated successfully";
  });

export const Route = createFileRoute('/form')({
  component: FormPage,
})

function FormPage() {
  const form = useForm({
    onSubmit: async ({ value }) => {
      console.log('data', value)

      try {
        const response = await handleForm({ data: value });
        console.log(response);
        alert("Success!")
      } catch (e: unknown) {
        console.log("error", e?.message);
        console.error(e);
      }
    },
  })

  return (
    <div className="p-2">
      <h3>Form!!!</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}>
        <input name="first_name" placeholder="First Name" />
        <input name="last_name" placeholder="Last Name" />
        <input name="email" placeholder="Email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

[sagikazarmark]

I'm surprised this isn't covered better in the documentation. I'm looking for a solution to this as well.