How to handle server errors?

[hvolschenk]

Reading through the documentation,
there does not seem to be an example of how to handle it when a form submission API calls fail.

If this is at the top of the React component:

const form = useAppForm({
	defaultValues: { /* ... */ },
	formId: "formId",
	onSubmit: async ({ formApi, value }) => {
		try {
			await callAnExternalAPI({ difficulty: value.difficulty });
			navigate({ to: `/the/page/after/success` });
		} catch (error) {
			// What is supposed to happen here?
		}
	},
});

What are we supposed to do where the comment is, which:

• Displays a global error in the component.
• Does not disable the submit button, or gives the developer the choice.
• (Potentially) gives the developer the option to inject field errors back into the form.

There are some other discussions that are (Semi) related:

• onServer errors being cleared very aggressively #1297
• TanStack Form with Server Actions: displaying server-generated errors for a specific field #1446
• Passing external validation errors into the form - is there a neater way? #1181
• Method to set both form-level and field-level error message - likely by extending form.setErrorMap() #1141
• Is it possible to receive field errors from onSubmit failure responses? #623