Why is this error not ending up in my Redux Action's Catch?

Question

In this app, I'm using async await to try handle an API call through a couple of functions. As I'm testing the sad path error routing, I'm noticing that the error does not end up in the catch.

The Action which starts the whole process

export const submitBasicDetails = form => async dispatch => {
    try {
        const response = await interstitialHandlerPromise(Actions.SUBMIT_FORM, form); // <- we end up here
        console.log('submitBasicDetails response', response); // <-- we see the error here
        const {id} = response.data;

        dispatch({
            type: Actions.SUBMIT_FORM,
            id
        });

        return response;
    } catch (error) {
        console.log('ACTION', error); // <-- instead of here :()
        dispatch({
            type: Actions.SUBMIT_FORM_FAIL,
            id: null,
            error: 'There was a server error, please try again later.'
        });
    }
};

The form data then hits this interstitialHandlerPromise where we decide which API method to use:

export const interstitialHandlerPromise = (type, data) => {
    const {requestMethod, config} = determineRequestMethod(type);

    const requests = requestMethod(data);

    return new Promise((resolve, reject) =>
        interstitialHandler(requests, config)
            .then(response => resolve(response))
            .catch(error => {
                console.log('intersitial error', error);
                reject(error);
            })
    );
};

Finally the postForm function which is requests that is inside of the function above:

// /test will cause a 500 error since it doesn't exist
export const postForm = async (form, END_POINT = '/api/test') => {
    const resPayload = form.data;
    const resUrl = `${BASE_URL}${V1}${END_POINT}`;

    try {
        const res = await axios.post(resUrl, {...resPayload});

        return {
            res
        };
    } catch (e) {
        console.log('postForm e', e); // <-- This hits because `/test` returns 500
        return new Error(e.message);
    }
};

`postForm` is a promise and is catching the error, so it just returns the whatever the catch is returning — Eric Hasselbring, Aug 13 '19 at 19:07
Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it) in `interstitialHandlerPromise`! — Bergi, Aug 13 '19 at 19:25

score 0 · Accepted Answer · answered Aug 13 '19 at 19:18

Got it! Instead of returning the error, I needed to throw the error.

In the postForm function:

} catch (e) {
    console.log('postInitialLoss e', e);
    throw new Error(e.message);
}

Then in the intersitialHandlerPromise:

export const interstitialHandlerPromise = async (type, data) => {
    const {requestMethod, config} = determineRequestMethod(type);

    const requests = requestMethod(data);

    try {
        const response = await interstitialHandler(requests, config);
        return response;
    } catch(e) {
        throw new Error(e); // <- this gets hit
    }
};

Now finally back in the action we will end up in the catch:

} catch (error) {
    console.log('ACTION (SHOULD GET HERE)!', error); // <-- WE are here! :D
    dispatch({
        type: Actions.SUBMIT_BASIC_DETAILS_FAIL,
        initialLossCreated: false,
        error: 'There was a server error, please try again later.'
    });
}

If all you do is re`throw`ing the error, you just should drop the `try`/`catch` block and let the exception propagate normally. — Bergi, Aug 13 '19 at 19:26

Why is this error not ending up in my Redux Action's Catch?

1 Answers1