title: Error handling inside RxJS mergeMap operator
body: <p>When I make a GET request using the Angular HttpClient, I get an observable back and process it within the RxJS operator mergeMap.</p>
  
  <p>Now it happens that again and again a 404 is thrown, which I would like to catch. Finally, no error message should appear in the browser console and the pipe should be processed with the next value of the stream.</p>
  
  <p>Is there a possibility for that? I did not manage it with catchError().</p>
  
  <p>Here is a simplified version of my code:</p>
  
  <pre><code>    ...
      this.service1.getSomeStuff().pipe(
            mergeMap((someStuff) =&gt; {
              return from(stuff);
            }),
            mergeMap((stuff) =&gt; {
              return this.service2.getMoreStuff(stuff.id); // Here I need some error handling, if 404 occurs
            }),
            mergeMap((things) =&gt; {
              return from(things).pipe(
                mergeMap((thing) =&gt; {
                  if (allLocations.some(x =&gt; x.id === metaData.id)) {
                    return this.service2.getMore(thing.id, thing.type, thing.img_ref);
                  }
                }),
                map((thing) =&gt; {
                ...
  </code></pre>
  
  <hr>
  
  <p>UPDATE: Added approach with catchError()</p>
  
  <p>I tried it that way, but the error is not detected and the next mergeMap does not work (IDE does not recognize parameter like <strong><em>thing.id, thing.type, thing.img_ref</em></strong> anymore):</p>
  
  <pre><code>...
  this.service1.getSomeStuff().pipe(
        mergeMap((someStuff) =&gt; {
          return from(stuff);
        }),
        mergeMap((stuff) =&gt; {
          return this.service2.getMoreStuff(stuff.id).pipe(
            catchError(val =&gt; of(`Error`))
          );
        }),
        mergeMap((things) =&gt; {
          return from(things).pipe(
            mergeMap((thing) =&gt; {
              if (allLocations.some(x =&gt; x.id === metaData.id)) {
                return this.service2.getMore(thing.id, thing.type, thing.img_ref);
              }
            }),
            map((thing) =&gt; {
            ...
  </code></pre>