How to handle `UnhandledPromiseRejectionWarning` when using Observable.from() and catching error in the Observable

Question

I am using redux-observable together with isomorphic-fetch to handle http requests in my React app. I am favouring this combination over using rxjs' ajax because I am testing with Jest - which runs tests in Node.js- and want to intercept http requests with nock. See this related question: Use fetch instead of ajax with redux-observable.

So here is the problem: I get an UnhandledPromiseRejectionWarning together with a scary: DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. because I am not catching my promise rejections directly but rather leave that to the Observable:

// apiModule.js
import fetch from 'isomorphic-fetch'

const api = {
  getSomething: () => {
    const request = fetch('http://some-api/')
      .then(res => catchError(res)) // throwing an Error here if not response.ok
      .then(res => res.json())

    return Observable.from(request)
  }
}

Then in the epic:

// myReduxModule.js
import {api} from './apiModule.js'

const getSomethingEpic = action$ =>
  action$
    .ofType(GET_SOMETHING)
    .mergeMap(action =>
      api
        .getSomething()
        .map(response => getSomethingSucceeded(response))
        .catch(error => logError(error)) // error is handled here!
    )

So the promise rejection is handled in the Observable but not directly!

Any suggestions how to avoid the warning (and a possible future terminate with non-zero exit code) in this scenario?

score 6 · Accepted Answer · answered Jun 08 '17 at 09:19

From now on, every time you have a promise and you call the then, you must also implement the catch. Also in your tests.

 const request = fetch('http://some-api/')
      .then(res => catchError(res))
      .then(res => res.json())
      .catch(err => catchError(res)) // <= here you should implement the catch

How to handle `UnhandledPromiseRejectionWarning` when using Observable.from() and catching error in the Observable

1 Answers1