title: How to handle multiple errors from different async pipes in angular?
body: <p>I have 2 <code>mat-select</code> that each one of them uses <code>async</code> pipe in my component:</p>
  <pre><code>
      &lt;div class=&quot;flex-col&quot;&gt;
          &lt;mat-label&gt;Issue Desc
          &lt;/mat-label&gt;
          &lt;mat-form-field&gt;
              &lt;mat-select [(value)]=&quot;model.issue_Desc&quot; 
                  [(ngModel)]=&quot;model.issue_Desc&quot;
                  name=&quot;issue_Desc&quot; required&gt;
                  &lt;mat-option *ngFor=&quot;let issues of (this.IssueObs$ | async)&quot; 
                      [value]=&quot;issues.issueDesc&quot;&gt;
                      {{issues.issueDesc}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flex-col&quot;&gt;
          &lt;mat-label&gt;Area Desc&lt;/mat-label&gt;
          &lt;mat-form-field&gt;
              &lt;mat-select [(value)]=&quot;model.area_Desc&quot; 
                          [(ngModel)]=&quot;model.area_Desc&quot;
                  name=&quot;area_Desc&quot; required&gt;
                  &lt;mat-option *ngFor=&quot;let area of (this.AreaObs$ | async )&quot; 
                          [value]=&quot;area.areaDesc&quot;&gt;
                      {{area.areaDesc}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Whenever the JWT token expires on my website it returns two <code>401 Unauthorized</code> errors upon loading the component, which causes trouble for me when sending the user back to the login screen with a &quot;Session Ended&quot; toaster message because I am getting a duplicate message of it when being handled in my interceptor.</p>
  <p>Here is my interceptor code:</p>
  <pre><code>    intercept(request: HttpRequest&lt;unknown&gt;, next: HttpHandler): 
              Observable&lt;HttpEvent&lt;unknown&gt;&gt; {
          return next.handle(request).pipe(
              timeout(10000),
              catchError(error =&gt; {
                  if (error) {
                      switch (error.status) {             
                          case 401: 
                              if (error.error == null) { 
                                  //Goes here when token expires
  
                                  this.toastr.info(&quot;Session has ended!&quot;)
                                  //&lt;&lt;---- Gets executed twice
                
                                  this.accountService.logout();
                              }
                              else {
                                  this.toastr.error(error.error)
                              }
  
                              this.dialogRef.closeAll();
                              this.router.navigateByUrl('')
  
                              break;
                      }
                  }
                  return throwError(error);
              })
          );
      }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/tGnUd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGnUd.png" alt="The 2 errors from different async pipes" /></a></p>
  <p><a href="https://i.stack.imgur.com/1gudI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1gudI.png" alt="The 2 Duplicate &quot;Session ended&quot; messages from different async pipes" /></a></p>
  <p>How do I handle these errors to only display one message when there is more than one error happened from <code>async</code> pipe?</p>
  <p>Any help is appreciated, Thanks in advance.</p>