angular: HttpClient should allow different responseTypes for success response and error response

A year later with Angular 6 still an issue. In my opinion this is a bug, not a feature.

Hello in 2023 😀 With Angular 15. Still the same stuff

Hello in 2024… Angular 17… still having this issue. 😅

My workaround is to add an interceptor with:

return next.handle(request).pipe(
      catchError((err: HttpErrorResponse) => {
        if (request.responseType === 'blob' && err.error instanceof Blob) {
          return from(Promise.resolve(err).then(async x => { throw new HttpErrorResponse({ error: JSON.parse(await x.error.text()), headers: x.headers, status: x.status, statusText: x.statusText, url: x.url ?? undefined })}));
        }
        return throwError(err);
      }),

Hello in 2022. This is still a problem, 5 years later…

@trotyl See this example. Spring @RestController handler method.

@GetMapping(
		path = "/export/xls",
		produces = MediaType.APPLICATION_OCTET_STREAM
)
public ResponseEntity<Resource> exportXls() {
	final var file = ....;
	final var httpHeaders = new HttpHeaders();
	httpHeaders.add(
			HttpHeaders.CONTENT_DISPOSITION,
			"attachment; filename=\"" + file.getName() + "\""
	);

	return ResponseEntity.ok()
	                     .headers(httpHeaders)
	                     .body(new FileSystemResource(file));
}

This returns a Blob object, basically. Then, the Angular HttpClient part.

return this.httpClient
	.get(url, { observe: 'response', responseType: 'blob' })
	.pipe(catchError(e => handleError(e)))

This works if the request is successful. However, in case of exception thrown from the Spring handler method, the body is set to Blob.

The Spring ExceptionHandler is pretty standard, and should produce a JSON body.

@ResponseStatus(HttpStatus.BAD_REQUEST)
Result<Void> handleBadRequest(final Exception exception) {
	logger.error(exception.getMessage(), exception);
	return new Result<>(1, exception.getMessage());
}

Hey peps ✌️ I also ran into the same issue yesterday.

My app is requesting a ZIP from the API, but receives JSON in case of an error. I was wondering if responseType could be conditional based on the Content-Type of the response.

type ResponseType = 'arraybuffer' | 'blob' | 'json' | 'text'
{
  responseType: ResponseType | {[key: string]: ResponseType}
}

get<T>(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    context?: HttpContext;
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
    };
    reportProgress?: boolean;
    responseType: {[key: string]: ResponseType},
    withCredentials?: boolean;
}): Observable<T>;

The requesting code would look something like this:

this.http.get('{url}', {
  responseType: {
    'application/json': 'json',
    'application/zip': 'arraybuffer',
    '*/*': 'text',
  },
})

For me, I use a synchronous way to convert Blob to json. I wrote a post about it here: https://stackoverflow.com/questions/48500822/how-to-handle-error-for-response-type-blob-in-httprequest/70977054#70977054

This is how it works:

//service class
public doGetCall(): void {
    this.httpClient.get('/my-endpoint', {observe: 'body', responseType: 'blob'}).subscribe(
        () => console.log('200 OK'),
        (error: HttpErrorResponse) => {
            const errorJson = JSON.parse(this.blobToString(error.error));
            ...
        });
}

private blobToString(blob): string {
    const url = URL.createObjectURL(blob);
    xmlRequest = new XMLHttpRequest();
    xmlRequest.open('GET', url, false);
    xmlRequest.send();
    URL.revokeObjectURL(url);
    return xmlRequest.responseText;
}

// test case
it('test error case', () => {
    const response = new Blob([JSON.stringify({error-msg: 'get call failed'})]);

    myService.doGetCall();

    const req = httpTestingController.expectOne('/my-endpoint');
    expect(req.request.method).toBe('GET');
    req.flush(response, {status: 500, statusText: ''});
    ... // expect statements here
});

The parsed errorJson in the error clause will now contain {error-msg: 'get call failed'}.