title: How can I catch an RxJS error only if it is unhandled
body: <p>I am building an application using RxJS and one of the interesting problems I have come across is how I can implement an operator that will catch errors only when they are unhandled by the rest of the pipeline ahead of it. I'll call my operator <code>catchUnhandledError</code> for now.</p>
  
  <p>The <code>catchError</code> operator is loosely similar (non stream) to</p>
  
  <pre><code>try {
      // stream  
  } catch (err) {
      // catchError handler
      // new stream
  }
  </code></pre>
  
  <p>What I am trying to implement resembles the following</p>
  
  <pre><code>try {
      // stream
  } catch (err) {
      try {
          // original stream
      } catch (err2) {
          // catchUnhandledError handler
          // new stream
      }
  }
  </code></pre>
  
  <p>The key takeaway here is that the new operator only catches errors that other operators do not catch further down the pipeline.</p>
  
  <p>I appreciate that piped operators essentially wrap observables similar to how middleware works in popular application pipelines which means "pushing the pipe to the end" is nonsensical.</p>
  
  <p>My stream (simplified) is created as follows.</p>
  
  <pre><code>combineLatest([ page, filter ]).pipe(
      switchMap(([ page, { search, order }]) =&gt;
          apiQuery(search, order, page).pipe(
              map(/* combine response with filters */),
              catchError(/* ONLY handle http status 422 Unprocessable Entity for validation */),
              catchError(/* ONLY handle http status 409 Conflict for version conflicts *)
          )
      )
  );
  </code></pre>
  
  <p>Where api.query returns:</p>
  
  <pre><code>function errorHandler(errorMessage?: string) {
      return &lt;T&gt;(source: Observable&lt;T&gt;): Observable&lt;T&gt; =&gt; 
          source.pipe(
              /* replace with new catchUnhandledError operator */
              catchError(() =&gt; {
                  /* More complex code than this to log the error */
                  alert('unhandled error');
  
                  return EMPTY;
              })  
          );
  }
  
  function apiQuery(search: string, order: string, page: number) {
      /* uses parameters to generate ajax payload */
      return ajax({
          url: 'url', 
          method: 'GET'
      }).pipe(
          map(r =&gt; r.response as T),
          errorHandler('An error message')
      );
  }
  </code></pre>
  
  <p>The problem is the validation / request specific error handlers never get called because the generic <code>errorHandler</code> takes precedence. A couple of work arounds I will have to use if this is not possible:</p>
  
  <ul>
  <li>Pass everything in the pipe as a parameter / callback (convoluted)</li>
  <li>Map success and errors to a single object then check <code>.success</code> (convoluted)</li>
  <li>Copy and paste the generic <code>errorHandler</code> to every single place I call my api (duplicated)</li>
  </ul>
  
  <p>Does anyone have any ideas that will prevent me from having to have convoluted or duplicated code?</p>