angular: HttpClient - HttpErrorResponse not json but blob

I created this interceptor as a temporary solution until this one is fixed:

@Injectable()
export class BlobErrorHttpInterceptor implements HttpInterceptor {
    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError(err => {
                if (err instanceof HttpErrorResponse && err.error instanceof Blob && err.error.type === "application/json") {
                    // https://github.com/angular/angular/issues/19888
                    // When request of type Blob, the error is also in Blob instead of object of the json data
                    return new Promise<any>((resolve, reject) => {
                        let reader = new FileReader();
                        reader.onload = (e: Event) => {
                            try {
                                const errmsg = JSON.parse((<any>e.target).result);
                                reject(new HttpErrorResponse({
                                    error: errmsg,
                                    headers: err.headers,
                                    status: err.status,
                                    statusText: err.statusText,
                                    url: err.url
                                }));
                            } catch (e) {
                                console.log(e);
                                reject(err);
                            }
                        };
                        reader.onerror = (e) => {
                            console.log(e);
                            reject(err);
                        };
                        reader.readAsText(err.error);
                    });
                }
                return _throw(err);
            })
        );
    }
}

Here’s what I did to handle json errors with a blob response type:

  private handleError(err: HttpErrorResponse): void {
    if ('application/json' === err.headers.get('Content-Type')) {
      const reader = new FileReader();
      reader.addEventListener('loadend', (e) => {
        console.log(JSON.parse(e.srcElement['result']));
      });
      reader.readAsText(err.error);
    } else {
      console.log('not json');
    }
  }

So, if it puts server returned body into HttpErrorResponse.error then it feels like it should obey servers content-type header describing that same body.

I really like this idea. Since HttpErrorResponse.error is typed as any already, it makes sense that it would depend on the server’s Content-Type for the response.

I’ll look into implementing this.

JaapMosselman wrote:

I created this interceptor as a temporary solution until this one is fixed: …

I’m posting an updated version using rxjs v6.3.3 (_throw is now throwError), plus all the needed imports.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class BlobErrorHttpInterceptor implements HttpInterceptor {
    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError(err => {
                if (err instanceof HttpErrorResponse && err.error instanceof Blob && err.error.type === "application/json") {
                    // https://github.com/angular/angular/issues/19888
                    // When request of type Blob, the error is also in Blob instead of object of the json data
                    return new Promise<any>((resolve, reject) => {
                        let reader = new FileReader();
                        reader.onload = (e: Event) => {
                            try {
                                const errmsg = JSON.parse((<any>e.target).result);
                                reject(new HttpErrorResponse({
                                    error: errmsg,
                                    headers: err.headers,
                                    status: err.status,
                                    statusText: err.statusText,
                                    url: err.url
                                }));
                            } catch (e) {
                                reject(err);
                            }
                        };
                        reader.onerror = (e) => {
                            reject(err);
                        };
                        reader.readAsText(err.error);
                    });
                }
                return throwError(err);
            })
        );
    }
}

Is there for now a simple workaround to get the json from the blob?

Is it correct that i’m still having difficulties receiving plain text using Angular 10

using (something like): const options = { responseType: ‘text’ as ‘json’, // !!! ??? headers };

return this.http.get(url, options);

I have tried several combinations of get<type> and responseType: ‘text’

(I have not tried any of the workarounds mentioned above …)

@marcosdimitrio do you have a synchronous version for this? I mean reading the Blob synchronously.

Hello,

The same problem with all responType !== 'json' whether it is text, blob or arraybuffer.

For example:

    return this.http
      .get(URL, { observe: 'response', responseType: 'arraybuffer', params })
      .pipe(
       ...

In my case I’ve a 401 Unthorized as response status, the response body will be casted to the requested responseType (an ArrayBeffer) so my RefreshToken interceptor is wating for an object (json) but got an arrayBeffer instead.

As a workaround in my interceptor:

    let clonedError = { ...error };

    if (error.error instanceof ArrayBuffer) {
      const decodedString = String.fromCharCode.apply(null, new Uint8Array(error.error));
      clonedError.error = JSON.parse(decodedString);
    }

    const newError = new HttpErrorResponse(clonedError);

which is the same workaround proposed above but for an arraybuffer, and we shoud do the same for text.

I think in case of an error, angular should only try to parse it as a json regardless of the requested responseType.

You can read blob as text and then convert it to json.