Angular, Http Error blocks any further requests

Question

After an error-response from the server my app does not send any further requests.

I'm sending a request with:

getMachineRules(rules: Array<string>): Observable<RulesResults> {
    return this.http.post<RulesResults>('/rules', { nodes: rules })
      .pipe(
        catchError(this.handleError)
      );
  }

My errorHandler:

  handleError(error) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${JSON.stringify(error.error)}`);
    }
    return throwError('Something bad happened; please try again later.');
  }

And my pipeline looks like this:

  ngAfterViewInit() {
    this.rulesChanged
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.settings.getMachineRules(this.currentRules);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.resultsLength = data.inputs?.length || 0;
          return data;
        }),
        catchError(e => {
          console.log("Error caught");
          this.isLoadingResults = false;
          this.resultsLength = 0;
          return observableOf({ inputs: [] } as RulesResults);
        })
      ).subscribe(
        data => { return this.updateRules(data); },
      );
  }

I can see the "Error caught" message in the console and the method updateRules() seems to work properly even in the error case.

However after a 404-Error-Response the ngAfterViewInit() method is not called anymore. The UI steel reacts on interactions.

what do you mean by "the ngAfterViewInit() method is not called anymore"? like you refresh the browser and it is not called? — ChumiestBucket
– ChumiestBucket, Commented Dec 14, 2020 at 17:09
no, i click a button which should trigger ngAfterViewInit(), but the method is not executed — nik_kobe
– nik_kobe, Commented Dec 14, 2020 at 17:18
the Observable's stream is "dead" after going thru the process the first time. calling the ngAfterViewInit will not re-trigger the this.rulesChanged's Observable stream to start again, i think (though i do not know what this.rulesChanged looks like). — ChumiestBucket
– ChumiestBucket, Commented Dec 14, 2020 at 20:15

Rafi Henig · Accepted Answer · 2020-12-14 18:55:20Z

3

Once an Obsevable is failed there is nothing you could do to make it active again, catchError is used to handle errors by returning a new observable or throwing an error. observableOf({ inputs: [] } as RulesResults) is served as substitute in case the main stream fails, meaning your main Observable will never emit again.

Consider using retry at the end of your pipeline, or optionally have your catchError return the source Observable itself, as demonstrated below:

catchError((error, source) => {
 ....
  return source;
})

Alternately put the catchError operator inside a switchMap so that only the inner stream will fail while the the outer (main) stream will remain active, as below:

ngAfterViewInit() {
  this.rulesChanged
    .pipe(
      startWith({}),
      switchMap(() => {
        this.isLoadingResults = true;
        return this.settings.getMachineRules(this.currentRules).pipe(
          map(data => {
            this.isLoadingResults = false;
            this.resultsLength = data.inputs?.length || 0;
            return data;
          }),
          catchError(e => {
            console.log("Error caught");
            this.isLoadingResults = false;
            this.resultsLength = 0;
            return observableOf({ inputs: [] } as RulesResults);
          })
        )
      })
    ).subscribe(
      data => { return this.updateRules(data); },
    );

edited Dec 14, 2020 at 18:55

answered Dec 14, 2020 at 17:23

Rafi Henig

6,4502 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nik_kobe Over a year ago

Thank you so much for the solution and the explanation! The 2nd solution worked! The 1st one turns the pipe into an endless loop.

Collectives™ on Stack Overflow

Angular, Http Error blocks any further requests

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related