how to get the error data when using responsetype as arrayBuffer for post method using angular13

Question

i am using angular13, based on output i am rendering the data as pdf using the responseType as arrayBuffer. but when there is error, i cannot get the error message but in the network i am able to see the error message, but not able to get that under the response.

ts:

  postArrayBuffer(
    url: string,
    formData: FormData,
    queryParams: HttpParams = new HttpParams(),
    headerFiles: HttpHeadersType
  ): Observable<any> {
    this.spinner.show();
    return this.http
      .post(`${environment.serverUrl}${url}`, formData, {
        params: queryParams,
        responseType: 'arraybuffer',
      })
      .pipe(
        map((result: any) => {
          return result;
        })
      )
      .pipe(map(this.handleGetResponse.bind(this)))
      .pipe(catchError(this.handleError.bind(this)));
  }

  private handleError(error: HttpErrorResponse): Observable<any> {
    if (error.status === 401) {
      // this.router.navigate(['/auth']);
    } else if (error.status == 0) {
      this.toastService.show('Unable to reach server, please contact admin', {
        classname: 'toast align-items-center text-white bg-danger border-0',
        delay: 3000,
        show: false,
      });
    } else if (error.status && error.error.error) {
      this.toastService.show(error.error.message ? error.error.message : error.error.error, {
        classname: 'toast align-items-center text-white bg-danger border-0',
        delay: 3000,
        show: false,
      });
    }
    this.spinner.hide();
    return throwError(error);
  }

Component level api:

  postChasePreview(data: ChaseUpdateRequest, files: File): Observable<any> {
    let formData: FormData = new FormData();
    for (var i = 0; i < data.attachedFiles.length; i++) {
      formData.append('attachedFiles', data.attachedFiles[i]);
    }
    formData.append('workChaseUpdateType', data.workChaseUpdateType);
    formData.append('documentOrientation', data.documentOrientation);
    formData.append('sendFaxManually', JSON.stringify(data.sendFaxManually));
    formData.append('faxCoverSheetNotes', data.faxCoverSheetNotes);
    formData.append('chaseIdsList', data.chaseIdsList);
    formData.append('comments', data.comments);
    formData.append('measureSheets', data.tempmeasureSheets);
    formData.append('assignedFaxSheets', data.assignedFaxSheets);
    const queryParams = new HttpParams();
    return this.apiService.postArrayBuffer(
      `${this.chase}/update/chase-update/preview`,
      formData,
      queryParams,
      HttpHeadersType.file
    );
  }

Ts method:

  showPdf(data: any | null | undefined, file: any) {
    this.service.pdf(data, file).subscribe(
      (pdf: any) => {
        let blob = new Blob([pdf], { type: 'application/pdf' });
        this.pdfFrame.nativeElement.src = URL.createObjectURL(blob);
      },
      (error: any) => {
        console.log(error,"error)
        });
      }
    );
  }

but i need to get this message in error:

Answer 1

I do the following to rethrow Blob errors and handle them as 'normal' errors

$somestream.pipe(
    // Handle and rethrow errors which are seen as blobs by angular.
    catchError((err: any) => {
        return this.convertPossibleBlobError(err);
    }),
    //handle the actual error, show a message or something
    catchError((err: any) => {
        alert('oh no');
    })




private convertPossibleBlobError(err: any): Observable<any> {
    let $error = of(err);

    if (err?.error instanceof Blob) {
        // get blob text and convert to error
        $error = HttpResponseInterceptor.convertBlobToHttpError(err);
    }

    return $error.pipe(
        switchMap(x => throwError(x))
    );
}

private static convertBlobToHttpError(err: any): Observable<HttpErrorResponse> {
    return from(err.error.text()).pipe(map(errorText => new HttpErrorResponse({
      error: errorText,
      headers: err.headers,
      status: err.status,
      statusText: err.statusText,
      url: err.url
    })));
}