Kindly disregard the variable names and formatting alterations I've made.
I've been attempting to incorporate RxJS error handling for an observable that triggers an action (user click) and then sends the request object from our form to execute an HTTP call, as demonstrated below.
Problem: When I send a request (from a form) on our website that doesn't exist in the backend, it fails and returns an error (which is good!), BUT if I try to submit a correct request after the failed attempt, the application just hangs and loads without any response.
serivce.ts file
sendRequest$ = this.exampleRatingSubjectAction$.pipe(switchMap(exampleRequest => this.http.post<exampleresponse>(this.PCFUrl + '/example',exampleRequest).pipe(
catchError(this.handleError)
)),
tap(data => console.log(data)),
);
sendExampleRequestEconomy$ = this.exampleSubjectActionEconomy$.pipe(switchMap(exampleRequest=> this.http.post<exampleresponse>(this.PCFUrl + '/example',exampleRequest)
.pipe(
catchError(this.handleError)
)),
tap(data => console.log(data)),
);
private handleError(err: HttpErrorResponse): Observable<never> {
// in a real world app, we may send the server to some remote logging infrastructure
//instead of just logging it to the console
let errorMessage: string;
if (err.error instanceof ErrorEvent) {
// A client-side or network error occured. Handle it accordingly
errorMessage = `An error occured: ${err.error.message}`;
} else {
// The backend returned an unsuccessful response code.
// the resposne body may contain clues as to what went wrong,
errorMessage = `Backend returned code ${err.status}: ${err.message}`;
}
console.error(err);
return throwError(errorMessage);
}
component code:
exampleResponsePriority$ = this.dataService.sendExampleRequest$
.pipe(
map(data => this.exampleResponsePriority = data),
tap(data => {
this.showPageLoader = false;
this.calculatorService.checkMinOrDeficitRate(data);
}),
catchError( err => {
this.showPageLoader = false;
// await this.presentAlert(err);
this.errorMessageSubject.next(err);
console.log("priority")
return EMPTY;
}));
exampleResponseEconomy$ = this.dataService.sendExampleRequestEconomy$
.pipe(
map(data => this.exampleResponseEconomy = data),
catchError( err => {
this.showPageLoader = false;
// await this.presentAlert(err);
this.errorMessageSubject.next(err);
console.log("economy")
return EMPTY;
}));
My only speculation is that our action stream has already been updated with a request object on the first click, so when the backend response is a 500 error, it might be stuck and not allowing for a resubmit?
I've attempted to modify the action stream upon a failed request, but couldn't achieve the desired result.
I believe I'm just a few lines of code away!
Any assistance would be greatly appreciated.