Errors are being swallowed again, due to #3227

[miracle2k]

What is the current behavior?

If my form's onSubmit handler returns a promise, and the onSubmit handler is passed as a form option, than the promise returned is rejected, that rejection is swallowed and I never see the error.

What is the expected behavior?

The error thrown is passed up to the browser console.

Sandbox Link

https://codesandbox.io/s/5w7Gmk6Z

Note how pressing Submit logs no error.

What's your environment?

Using 7.0.2.

Other information

Possibly related to #3179.

I tried to debug this and I believe the problem is listenToSubmit: https://github.com/erikras/redux-form/blob/171ed689cf998774c39bcd435d73dd8228cb7e02/src/createReduxForm.js#L657

It seems this was introduced recently in #3227, because before that submitFailed was throwing the error.

[Roman-Maksimov]

The problem with the #3227 (issue #1297) was about that the handleSubmit method mustn't throw any errors as it doesn't handle the errors anyhow. As a result the uncaught error appears and falls down the rest of the JS.
Don't know why do you want to have the uncaught error in your case (seems you used to integrate the bug into your logic).
If you need to catch the error, there is a onSubmitFailed method:

export default reduxForm({
  form: 'submitValidation', // a unique identifier for this form
  onSubmit: async () => {
      throw "test";
  },
  onSubmitFail: (errors, dispatch, submitError, props) => {
    console.log(submitError);
  }
})(SubmitValidationForm);

[miracle2k]

I don't want the error. It's a bug in my onSubmit logic (say I call a relay mutation but the import is wrong and the function undefined).As it stands, I don't have any indication that something is wrong, and I don't see an error it a stack trace, so I don't know where the problem is precisely. In my code I actually call handleSubmit myself and the fact that I can get error values back just like a successful return value is an added complication, but not the main issue .I think onSubmitFail might be a workaround, but I don't know that we shouldn't view it as a bug that such errors are swallowed out of the box. 

[10xjs]

@erikras @Roman-Maksimov I'm with @miracle2k on this. It's very misleading to consumers of redux-form to be converting any error rejected from the onSubmit to a resolved promise.

As a solution to #1297 - this a far worse compromise.

[minznerjosh]

The worst manifestation of this change is that, when using the imperative submit() API, the Promise returned by submit() will now fulfill with a rejection value, if a promise returned by onSubmit() rejects:

let Form = function Form(props) {
  const { handleSubmit } = props;

  return <form onSubmit={handleSubmit} />;
}
Form = reduxForm({ form: 'MyForm' })(Form);

let myForm = null; // will be a ref to <Form />

<Form
  ref={form => { myForm = form; }}
  onSubmit={() => Promise.reject(new Error('Bad news'))}
/>



// Now I'll imperatively submit the form:
myForm.submit().then((value) => { // handle fulfillment
  // This gets called with `new Error('Bad news')` ☹️
}, (reason) => { // handle rejection
  // This never gets called!
});

This behavior is at odds with the docs for the submit() method which states:

Submits the form. [You'd never have guessed that, right?] Returns a promise that will be resolved when the form is submitted successfully, or rejected if the submission fails.

[10xjs]

For anyone looking for a temporary solution, it's possible to patch this behavior by wrapping reduxForm.

import {reduxForm, SubmissionError} from 'redux-form';

export function safeReduxForm(config, ...args) {
  return reduxForm({
    ...config,
    onSubmitFail: (error, dispatch, submitError, props) => {
      // Mirror the default logic of redux-form `handleSubmit` and don't
      // re-throw SubmissionError instances.
      // see: github.com/erikras/redux-form/blob/v7.0.4/src/handleSubmit.js#L69
      if (
        submitError && !(
          submitError instanceof SubmissionError &&
          submitError.errors
        )
      ) {
        if (config.onSubmitFail) {
          config.onSubmitFail(error, dispatch, submitError, props);
        } else {
          throw submitError;
        }
      }
      return error;
    },
  }, ...args);
}

Use as normal:

const WrappedComponent = safeReduxForm({form: 'form-name'})(FormComponent);

[erikras]

Published fix in v7.2.1.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.