question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Internal `submitForm` implementation does not throw errors

See original GitHub issue

🚀 Feature request

Catch errors thrown from onSubmit inside of form/fields components

Current Behavior

Formik Internal implementation of submitForm does not throw any errors. It is not possible to get in catch hook with the following example:

const onSaveButtonClick = async () => {
        // submitForm - formik internal method. It invokes `onSubmit` method
        //which is passed with props to formik
        const { submitForm } = props.formikActions;
        return submitForm()
          .then(promise => {
           // i'm always getting here
          })
          .catch((e: any) => {
           //cant get here
          });
      };

Here is a sandbox exaple

Desired Behavior

Have the ability to catch errors which are thrown from onSubmit method passed to formik as a prop

Suggested Solution

const submitForm = useEventCallback(() => {
    // ...some code here
    return validateFormWithHighPriority().then(
        // ...some code here
          return Promise.resolve(executeSubmit())
            .then(() => {
              if (!!isMounted.current) {
                dispatch({ type: 'SUBMIT_SUCCESS' });
              }
            })
            .catch(_errors => {
              if (!!isMounted.current) {
                dispatch({ type: 'SUBMIT_FAILURE' });
              }
            // THROW ERROR HERE
            });
        // ...some code here
        return;
      }
    );
  }, [executeSubmit, validateFormWithHighPriority]);

Who does this impact? Who is this for?

This is a cool additional feature for all users. In this way, internal submitForm method (which could be used inside <Field /> component ) will completely implement Promise interface.

Describe alternatives you’ve considered

Additional context

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
andrewMuntyancommented, Jun 26, 2019

@slorber I’ll try to make it faster. Check this issue next week. If there is no PR, pls make it happen 😃

1reaction
slorbercommented, Jun 25, 2019

would also expect to work this way and be able to catch submit failures with formik.submitForm().catch()

Read more comments on GitHub >

github_iconTop Results From Across the Web

java - How to handle form submission error without redirecting?
The form is always submitted to server and line throw new WebApplicationException(409); causes error code response. Update: @WouterH's ...
Read more >
Solved: Submit form error Handling - Power Platform Community
I am creating records using submit form. when there is an error on creation .error is throwing as notification type error.
Read more >
How to solve “Submit is not a function” error in JavaScript
Solution 1: Simply rename your button's name to btnSubmit or any other name. Your code will miraculously work. This is because you have...
Read more >
Power Apps Patch Function Error Handling - Matthew Devaney
We can do this by making the following changes to the submit button's OnSelect property. First, we use the Errors function to check...
Read more >
useForm - handleSubmit - React Hook Form
handleSubmit function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found