title: Handle exception in rxjs ajax.map call
body: <p>I've created an epic based off the "<a href="https://jsbin.com/jopuza/10/edit?html,css,js,output" rel="nofollow noreferrer">fetch user demo</a>" on the <a href="https://redux-observable.js.org/" rel="nofollow noreferrer">redux-observable website</a>.</p>
  
  <p>I'm just wondering how I can add error handling to the ajax request. My attempt:</p>
  
  <pre><code>const fetchCategoriesEpic = action$ =&gt;
    action$.ofType(FETCH_CATEGORIES)
      .mergeMap(() =&gt;
        ajax.getJSON(`http://localhost:4000/categories`)
          .map(
            response =&gt; fetchCategoriesFulfilled(response),
            error =&gt; console.log(error)
          )
      )
  </code></pre>
  
  <p>I'm testing while the API i'm calling is down to test error handling. Still getting this in the console and the app crashes:</p>
  
  <blockquote>
    <p>ExceptionsManager.js:71 Unhandled JS Exception: ajax error 0</p>
  </blockquote>
  
  <p>If <a href="https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/getjson.md" rel="nofollow noreferrer">this is the official docs</a> then do I get rid of map and do subscribe instead?</p>
  
  <p>I changed it to this:</p>
  
  <pre><code>import 'rxjs/add/operator/catch'
  
  const fetchCategoriesEpic = action$ =&gt;
    action$.ofType(FETCH_CATEGORIES)
      .mergeMap(() =&gt;
        ajax.getJSON(`http://localhost:4000/categories`)
          .map(
            response =&gt; fetchCategoriesFulfilled(response)
          ).catch( err =&gt; console.log(err))
      )
  </code></pre>
  
  <p>But got:</p>
  
  <blockquote>
    <p>You provided undefined where a stream was expected. You can provide an
    obserable, promise, array or iterable</p>
  </blockquote>
  
  <p>changed to (as per Jay Phelps's answer <a href="https://github.com/ReactiveX/rxjs/issues/2059" rel="nofollow noreferrer">here</a>):</p>
  
  <pre><code>const fetchCategoriesEpic = action$ =&gt;
    action$.ofType(FETCH_CATEGORIES)
      .mergeMap(() =&gt;
        ajax.getJSON(`http://localhost:4000/categories`)
          .map(response =&gt; fetchCategoriesFulfilled(response))
          .catch( err =&gt; Observable.of(err.xhr.response))
      )
  </code></pre>
  
  <p>got:</p>
  
  <blockquote>
    <p>Actions must be plain objects. Use custom middleware for async actions</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>