React: Rxjs/Redux-Observable IE exception thrown but not caught

[sandy0201]

Hi,

I have some code for an epic. When I get a 401 error, it is supposed to call a callback function and return an Observable stream which will pop up an error modal. This works in all browsers, except for IE (Internet Explorer).

This is the error I get:
[https://i.stack.imgur.com/WiIrv.png](error screenshot)

Versions of relevant dependencies I am using:

• react: 16.4.1
• react-dom: 16.4.1
• react-redux: 5.0.6
• redux: 3.7.2
• redux-observable: 0.17.0
• redux-thunk: 2.2.0
• rxjs: 5.5.6

Here's the snippet:

export const epic = (action$) =>
     action$.ofType(SUBMIT)
        .mergeMap(action => {
            return Observable.ajax({
                url: `${Config.rootUrl}/${Config.apiContext.registration}/${Config.apiVersion}${Config.apiUri.captureField}`,
                method: 'POST',
                crossDomain: true,
                headers: {
                    ...Config.headers,
                    Authorization: `Bearer ${sessionStorage.getItem('token')}`,
                    'Correlation-Id': getUuid(),
                },
                body: {
                    saId: action.payload.args.field.replace(/[\s]/g, ''),
                },
            })
                .map((response) => {
                    action.payload.callback(response);

                    return {
                        type: CAPTURE,
                        payload: response,
                    };
                })
                .catch(({ xhr }) => {
                    // IE does not come in here at all when 401 error occurs, but works with error 400, 500, etc.
                    action.payload.callback(xhr);

                    return Observable.of(errorHelper(ERROR, xhr));
                });
        });

What's weird is that IE does not run the catch statement (as commented in code) at all when 401 error occurs, but it does when other errors 400, 500, etc. occur.

How can I debug this?

[benlesh]

Hi @sandy0201, you might want to try the latest version of Rx, or if you can't get to 6, try the latest version of 5.5. There were some fixes to the ajax function that might affect you.

cc @jayphelps

[myklt]

Hi @sandy0201, are you sure that you get JSON in case of 401? If not, it may be related to this issue: #3138

[sandy0201]

Hi @benlesh , thank you for your response. Will try it out.

Hi @myklt , I think that might be the issue, for 401 error, XML gets returned from API. Let me try figure it out and see if that is the issue. Thank you.

[Agraphie]

It seems like I have the same problem (but even without redux-observable). I can reproduce the error like this

 of("This is not the greatest song in the world").pipe(mergeMap(q =>
        ajax({
            url: `http://localhost:7643/login`,
            method: "POST",
            body: "This is just a tribute"
        }).pipe(
            tap(e => console.log(e)),
            catchError(err => of(err))
        ))
    ).subscribe(m => console.log(m), e => console.log(e))

On Firefox I get "ajax error" while on Edge and Chrome I get "You provided an invalid object where a stream was expected..."

[Agraphie]

It seems like that in the class subscribeTo result && typeof result[Symbol_observable] === 'function' evaluates to false in Chrome but to true in Firefox. Because result[Symbol_observable] is undefined in Chrome but function observable_1.observable() subscribeTo.js:15 in Firefox- I'm not very experienced, but could be the error somewhere there?

[Agraphie]

I have to back down from this. I had import 'rxjs' at the top of my index.js. After removing that line everything works fine now in all browsers. I don't know why this could cause the issue, but if anyone knows me, please tell me :)

[MartinJHammer]

Thanks to @Agraphie I could dig into our code and confirm that result && typeof result[Symbol_observable] === 'function' is the culprit (as far as I understand it).

I have made a question on stack overflow where I detail my findings. Maybe those can help finding a solution?

[MartinJHammer]

Ok, I'm back with an update.

In my case, the error wasn't with RxJs after all (surprise! ...not). My error was the way I registered epics with redux-observable. The project I'm working on needs to lazy load some modules and their epics. The way I do that somehow messes with the observables... I have tried to follow this guide, but I have likely screwed up somewhere...

I'll return when I have figured out the correct way to do it.

[cartant]

Closing this as whether or not the OP's issue was resolved after this is not clear and subsequent comments don't appear to relate to the raise issue.