Angular，RxJS主题问题

Question

I am building a custom error handler for my Angular application that handles the error and then adds an error to a list to show to the user. The error handler works as expected; it catches the error, uses the Angular Injector , gets an instance of the service needed to add the error to a list, and adds it to the list. That service should then use the Rxjs Subject.next() function to send that list to all who have subscribed to the list. This is where the weirdness happens.

For background information, I have a button set up that makes an HTTP call to an invalid URL, just so an error is created on demand and can be caught by the application.

The first time you click the button, an error comes in, it is caught and sent to the service, but it doesn't show on the page (looping over that list to output them in a component). The second time you click the button, an error does show on the screen. Same with the third and fourth, but there is always one less alert on the screen than in the array.

Then, when you remove an alert from the array the first time, it is definitely removed but you can't tell because that extra alert finally shows. Subsequent clicks remove the other alerts.

Now let's go back to adding alerts to the array. The first time you click the button, nothing happens on the screen, but if you console.log the array you can see that it has added an item to the array. Click it again and an alert shows on the screen.

So it seems like each click is actually emitting, or passing, the array one time behind what you expect, if that makes sense. I'm not sure why this is happening. This should be pretty straight forward. Any help would be greatly appreciated.

You can see the working example on StackBlitz here .

Answer 1

After many trying i have figure why your actual code is not working. Is because your ErrorHandler catch all Exception inside Angular. and you keep remind instead of let angular propagate this exception where she have to be manage.

Example of what i try to explain

So i have replace your ErrorHandler by HttpInterceptor :

import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor,HttpHandler, HttpRequest, HttpEvent,HttpErrorResponse } from '@angular/common/http';
import { Observable,empty, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { AlertToasterService } from '../alert-toaster/alert-toaster.service';

@Injectable()
export class ErrorHandlerService implements HttpInterceptor {

  constructor(private alertToasterService: AlertToasterService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request)
      .pipe(catchError((err: HttpErrorResponse) => {
        let errorMessage= 'An unknown error occurred.';
        if (err.error instanceof Error) {
          // A client-side or network error occurred. Handle it accordingly.
           errorMessage = err.error.message;
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          errorMessage = err.message;
        }

        this.alertToasterService.addAlertToList({
            level: 'danger',
            message: errorMessage,
            dismissible: true
          });

        return throwError(err);
      }));
  }
}

And add reference on my app.module :

  { 
      provide: HTTP_INTERCEPTORS, 
      useClass: ErrorHandlerService, 
      multi: true 
  },

Online sample

Not relevant to your question but you can also check how i have change app-alert-toaster to manage onPush strategy and only Observable async pipe inside html side.