Wrapping useForm for a "global" handleSubmit of sorts

[jasonlewis]

I'm wanting to implement a way to easily handle some shared logic between a lot of forms (mainly handling potential server errors/validation) with less overhead and boilerplate in each form.

What I've been playing with is essentially providing a useForm wrapper in userland that more or less looks like this (removed some things for brevity):

export function useForm({ validationSchema }) {
  const form = useVeeValidateForm({ validationSchema })

  return {
    handleSubmit: (cb) =>
      form.handleSubmit(async (payload, context) => {
        try {
          await cb(payload, context)
        } catch (error) {
          // handle server errors, etc.
        }
      }),
  }
}

I guess my concern here is that this isn't a good way to go about it so I'm just after any insight as to whether this approach could have any drawbacks. Any other suggestions on how to achieve this sort of error handling?