Reject promise in redux-form in fetch catch-block

Question

How does one throw a new SumbmissionError in a .catch-block without getting a unhandled rejection?

This throws a Unhandled Rejection (SubmissionError)

import { SubmissionError } from 'redux-form';

const submit = (data) => {
    console.log(data);

    const config = {
        method: 'GET'
    };

    return fetch('http://www.notAvailable.com/', config)
        .then(response => {
            console.log(response)
        })
        .catch(err => {
            throw new SubmissionError({_error: 'Error'});
        });
}

export default submit;

Answer 1

If you return the promise to the onSubmit config / prop or handleSubmit reduxForm should catch the SubmissionError:

const { createStore, combineReducers } = Redux;
const { Provider } = ReactRedux;
const { reduxForm, SubmissionError, reducer } = ReduxForm; 

const submit = () =>  new Promise((resolve, reject) => {
  setTimeout(() => reject('500'), 100);
}).catch(e => {
  throw new SubmissionError({ _error: 'service error' })
});

const Form = reduxForm({ 
  form: 'example',
  onSubmit: submit
})(props => (
  <form onSubmit={props.handleSubmit}>
    <pre>{JSON.stringify(props, null, 4)}</pre>
    <button type="submit">submit</button>
  </form>
));

const store = createStore(combineReducers({ form: reducer }));

ReactDOM.render((
  <Provider store={store}>
    <Form />
  </Provider>
), document.getElementById('root'));

JSFiddle: https://jsfiddle.net/pariesz/6srugtwr/