Update Alert: Problem Solved. Solution Provided Below
In my service class, I have the following code snippet:
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 in my component, here is the code snippet:
this.myService.getListById(id).subscribe(
res => { doSomethingWith(res) },
error => {
this.noRows = true
console.log(error)
},
() => { this.loading = false }
)
Upon encountering a 500 error while calling GET on the Rest API address, I wanted to handle it effectively.
However, the catchError() method within the pipe() was failing to catch the error and only executing the
() => { this.loading = false }subscribe().
I am struggling with understanding why the RxJs module is not allowing me to easily manage request errors when dealing with backend operations.
Any insight or guidance on what may be impeding my ability to elegantly handle request errors would be greatly appreciated.
Thank you for your assistance.
Solution Discovered:
The root cause was traced back to an Error Interceptor implemented by a previous developer that was malfunctioning.
To resolve the issue, I removed the problematic ErrorInterceptor and created a new one. Additionally, I corrected the 'providers' property configuration in my app.module.ts, rectifying the erroneous reference to the ErrorInterceptor class.