Angular 和 RxJS - catchError() 不会捕获请求错误

Question

UPDATE: I FOUND THE ISSUE. THE ANSWER IS BELOW

I have the following code in my service class:

public getListById(id:string): Observable<any[]> {
        return this.http.get<any[]>(`${BASE_URL.local}/${id}`).pipe(
            map(obj => obj),
            catchError(error => this.handleError(error))
        )
    }

handleError(error: any): Observable<any> {
        console.log(error)
        this.snackBar.open(
            "Server Error",
            "X"
        )
        return EMPTY;
    }

And the following code in my component:

this.myService.getListById(id).subscribe(
    res => { doSomethingWith(res) },
    error => { 
        this.noRows = true
        console.log(error)
    },
    () => { this.loading = false }
)

When the service calls GET in the Rest address, it is giving a 500 error and I would like do handle it.

But the catchError() function in pipe() , for some reason, doesn't catch the error and only runs the () => { this.loading = false } code inside subscribe() .

What am I doing wrong with this bad RxJs module (seriously, I don't like the way that it works with backend requests) that I can't simply handle a request error?

Thank you.

ANSWER

I found the issue. Another previous developer defined an Error Interceptor that wasn't working as it should.

I deleted the ErrorInterceptor and defined a new one. I also fixed the 'providers' property definition in my app.module.ts , it wasn't referencing the correct ErrorInterceptor class as it should.

Answer 1

That's exactly a sign that the error has been caught by catchError .

handleError returns EMPTY that means to close a stream without an emit. And because the stream has been closed you see this.loading = false .

put debugger before console.log(error) and open developer tools to inspect variables, perhaps this.snackBar.open has an issue.

Answer 2

I know this is different but try to change the behavior like this:

return this.http.get<any[]>(`${BASE_URL.local}/${id}`).pipe(
  catchError(err => {
    this.errorObject = err;
    return throwError(err);
  })
);

public errorObject = null;

by default set the error to null: this.errorObject = null;