Get the full http response in case of an error

Question

In angular documentation they stated that you have to specify observe: "response" on the provided options to get the full http response, which I did here:

constructor(private service: new () => T,
  private http: HttpClient,
  private httpErrorHandler: HttpErrorHandlerService,
){ 
    this._handleError = this.httpErrorHandler.createHandleError(this.service.name);
}
private _handleError: HandleError;
//...other code
delete(resourceNameOrId: number | string): Observable<HttpErrorResponse>{
    return this.http.delete<T>(this._url + resourceNameOrId, {
      observe: "response"
    }).pipe(
      catchError(this._handleError(`delete`, null))
    );
  }

The handleError function is defined in this service:

export type HandleError = <T> (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable<T>;

@Injectable({
  providedIn: 'root'
})
export class HttpErrorHandlerService {

  constructor(private errorService: ErrorService, private modalService: NzModalService) { }

  createHandleError = (serviceName = '') => <T> (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);

  handleError<T> (serviceName = '', operation = 'operation', result = {} as T ){
    return (error: HttpErrorResponse): Observable<T> => {
      const message = (error.error instanceof ErrorEvent) ? error.error.message: `{error code: ${error.status}, body: "${error.message}"}`;
      this.errorService.errorMessage = `${serviceName} -> ${operation} failed.\n Message: ${message}`;
      console.error(this.errorService.errorMessage);
      return of(result);
    }
  }
}

And this is an example of how I call my service delete function in a component:

this.service.delete(nom).subscribe(data => {
  if(!this.errorService.errorMessage){
    this.notificationService.success("Suppression", "L'enregistrement a été supprimée !");
  }
});

But specifying the observe: "response" didn't work in my case, and the error: HttpErrorResponse only returns the error message and not the full response :

I have tried solutions in this thread : Angular 4.3.3 HttpClient : How get value from the header of a response? which didn't work for me, and the provided solution was to define the observe option.

How can I solve this ?

Update:

The the observe option only works when the delete http request returns a 200 code as shown in screenshot below, but when there is a 404 response status the response object in this case is null, and in the handleError function the response body is the only thing I can access to.

I tried to replicate your problem in a stackblitz but I get the full error response as the HttpErrorResponse, as it should be: https://stackblitz.com/edit/angular-hh4x4z I'm not really sure what your problem is. Please provide a stackblitz yourself that showcases your error and the problem you have! — frido, Jan 29 '19 at 12:32

Code_maniac · Answer 1 · 2019-01-29T11:14:08.333

0

If you want the HttpErrorResponse object inside your catchError, try to get it inside the block after the api call is completed, something like this:

delete(resourceNameOrId: number | string): Observable<HttpErrorResponse>{
    return this.http.delete<T>(this._url + resourceNameOrId)
 .pipe(
      catchError((error:any)=>{
           console.log(error);//error is the HttpErrorResponse object returned
           return this._handleError(`delete`, null)
      })
    );
  }

edited Jan 29 '19 at 11:14

answered Jan 29 '19 at 05:35

Code_maniac

270
1
4
16

Actually this code will generate the following error : `[ts] Argument of type '(error: any) => void' is not assignable to parameter of type '(err: any, caught: Observable>) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>'.` – Renaud is Not Bill Gates Jan 29 '19 at 10:54
Can you try returning an ErrorObservable inside your handleError method? return ErrorObservable.create(result); – Code_maniac Jan 29 '19 at 11:18
Do you mean `return throwError(result)` ? because in Angular 6 there is no `ErrorObservable` – Renaud is Not Bill Gates Jan 29 '19 at 12:09
Yeah. Try that. – Code_maniac Jan 29 '19 at 12:28

mihan oktavian · Accepted Answer · 2019-01-29T15:07:21.233

Is it fit to you to intercept the HttpClient hook via Interceptor? Try something Like this: Create an Interceptor:

@Injectable()
export class FinalInterceptor implements HttpInterceptor {

constructor(private errorHandlerService: HttpErrorHandlerService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(req).pipe(
        tap((event: HttpEvent<any>) => {
            if (event instanceof  HttpErrorResponse) {
              this.errorHandlerService.handleError(event);
            }
        }));
  }
}

AppModule:

providers: [
    ...
    { provide: HTTP_INTERCEPTORS, useClass: FinalInterceptor, multi: true },
  ],

so in my handler service on http errors i've got next console.log.

i suppose this is exactly what you looking for

Thanks, actually the problem was that in the application someone created an intercepter that catchs the error and only sends the message xD ! — Renaud is Not Bill Gates, Feb 01 '19 at 11:47

Get the full http response in case of an error

Update:

2 Answers2