Improving DX and typing for programmatic errors via setErrorMap

[kusiewicz]

Hi everyone! I have a question about the best practice for handling programmatic, server-side errors.

The Goal:
I want to display a server error from a useMutation (tanstack) onError callback on the form. The most direct way seems to be form.setErrorMap.

The Problem & The Workaround:
When in onError I call form.setErrorMap({ onSubmit: { form: [err.message], fields: {} } }), I've noticed that TypeScript can't correctly infer the type for state.errorMap.onSubmit unless I explicitly add a placeholder validator.

Without the placeholder, this code:

<form.Subscribe selector={(state) => state.errorMap.onSubmit}>
  {(error) => {
    // TS Error: `error` is typed as `never`
    return error?.map((errMsg) => <p>{errMsg}</p>);
  }}
</form.Subscribe>

...throws the error Property 'map' does not exist on type 'never'.

I understand this happens because the errorMap type is inferred entirely from the validators object provided to useForm. If the onSubmit key isn't in validators, TypeScript correctly assumes state.errorMap.onSubmit doesn't exist.

The working solution is to add a placeholder validator, like this:

const form = useForm({
  // ...
  validators: {
    onChange: zodValidator(MySchema),
    // This placeholder is added only to satisfy TypeScript
    onSubmit: () => [],
  },
});

My question is: Is this the intended, idiomatic way to handle this scenario or am I missing something?

If so, maybe it may be improved somehow, maybe the type of setErrorMap be enhanced to allow setting errors for keys not present in validators, or maybe somthing like root. in RHF?

It its not possible at all - sorry, but I've just glanced at the source code.