title: How to catch @ngrx/effects errors properly?
body: <p>I know this question has been asked several times, but keep in mind my specific issue, because I couldn't find anything that solves it properly. </p>
  
  <p>I have an <code>effect</code> that should perform multiple HTTP requests in a specific order - call 1, call 2, call 3. I want to be able to catch <em>any error</em> that is being thrown throughout the chain. I want to keep the structure of the <code>rxjs</code> operators as flat as possible to avoid nested spaghetti code.</p>
  
  <p>Here's sample code:</p>
  
  <pre><code>getMockDataEffect$ = createEffect(
      () =&gt; this.actions$.pipe(
        ofType(ApiGetMockData),
        concatMap(() =&gt; {
          return this.mockApi.mock1().pipe(
            concatMap(() =&gt; {
              return this.mockApi.mock2();
            }),
            concatMap(() =&gt; {
              return this.mockApi.mock3();
            }),
            map(res =&gt; ApiSuccess({ data: res })),
            catchError(error =&gt; of(ApiError({ error }))),
          )
        }
        )
      )
    )
  </code></pre>
  
  <p>In the example given above, if an error occurs in <code>mock2</code> or <code>mock3</code>, it would be successfully caught. However, if one occurs in <code>mock1</code>, the error won't be caught at all.</p>
  
  <p>My question is: how do I structure my effect in such a way that my <code>catchError</code> operator would catch any error occurring in <code>mock1</code>, <code>mock2</code> or <code>mock3</code>, <em>without completing the effect's observable</em>? Meaning, if an error occurs, I should be able to dispatch the action and run the effect successfully after that.</p>
  
  <p>Here's a <a href="https://stackblitz.com/edit/ngrx-effects-example-kqtjop" rel="nofollow noreferrer">StackBlitz demo</a>.</p>