Angular 8 Issue: Absence of _body and Headers in Response

Question

Angular 8 Issue: Absence of _body and Headers in Response

Our back-end code is written in C# within the .NET environment, targeting the 4.6.1 framework. Recently, our front-end was upgraded from Angular 4 to Angular 8. During this upgrade, webpack transitioned from version 2.3 to version 4.41 and typescript from version 2.2 to 3.2.4.

Despite these changes, the core code itself has remained unchanged.

C#:

public override Task OnAuthorizationAsync(HttpActionContext actionContext, CancellationToken cancellationToken)
{
    var reject = false;
    var principal = actionContext.RequestContext.Principal as ClaimsPrincipal;

    if (principal == null || !principal.Identity.IsAuthenticated || reject) {
        actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Unauthorized,
            new { error = "Unauthorized request for Impersonate Mode" },
            actionContext.ControllerContext.Configuration.Formatters.JsonFormatter);
        return Task.FromResult<object>(null);
    }

    return Task.FromResult<object>(null);
}

Typescript:

actionErrorResponseHandler(response: Response) {
    if(response.status === 401){
        if(response.text().includes("Impersonate")){
            this.displayText = ImpersonateRejectText;
        }
        this.show();
    }
}

(EDIT) Usage example:

setupPopUpModal(modalHeader: string, displayText: string){
    this.accountService.accountShowPopUpModal()
    .pipe(catchError((response: Response) => this.rejectModal.actionErrorResponseHandler(response)))
    .subscribe((result: string) => {
        if(result == "Done"){
            this.modalHeader = modalHeader;
            this.displayText = displayText;
            this.messageBoxModal.show();
        }            
    })
}

Previously, everything was functioning correctly. However, after the upgrade, an error message stating "e.text is not a function" started appearing.

Upon inspecting Chrome's developer tools, the response prior to the upgrade looked like this:

https://i.sstatic.net/Cu3Ve.png

And post-upgrade, it looked like this:

https://i.sstatic.net/SIbKH.png

The issue stems from the reference to the .text() function attempting to retrieve the body as a string, which no longer exists. The desired message can now be found in e.error instead of response.error, with Angular/Typescript syntax differing on how to access it.

I suspect that I need to approach building and parsing the response differently, but I have been unable to locate relevant documentation on this topic. Any assistance would be greatly appreciated.

angular typescript httpresponse

Answer 1

Answer №1

Could the previous version of Angular have been before 4.3?

In Angular 4.3, there was a change in the way regular HTTP requests are made from "Http" to "HttpClient". The main difference is that you only receive the (json) response body as a result, rather than the entire response object. If the request is unsuccessful (except for a 401 error), it will throw an error.

To handle this error, you need to catch it and manage it appropriately. One common approach is using RxJs to handle the response, which would transform your code like this:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( (result) => response = result);

If a 400 error occurs in the backend call, the regular subscription won't run, leaving response empty. One solution is to manage the error within the subscribe function:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( 
  (result) => response = result,
  (errorCase) => this.handleTheError(errorCase)
);

private handleTheError(errorCase:ttpErrorResponse):void {
  if(response.status === 401){
    if(response.text().includes("Impersonate")){
      this.displayText = ImpersonateRejectText;
      return
    }
  }
  throw Error('Unexpected Backend Response');
}

Alternatively, you can handle errors within the stream using catchError:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').pipe(
  catchError( (errorCase:ttpErrorResponse) => // Handle the error )
).subscribe( 
  (result) => response = result
);

The advantage of using "catchError" is that you can gracefully handle expected errors by returning a valid value, which will be processed by the subscribe function as if it were a successful response. If the error cannot be managed gracefully, you can still throw it:

return throwError(errorCase);

Subsequently, you can handle the error in the subscribe function.

Answer 2

Could the previous version of Angular have been before 4.3?

In Angular 4.3, there was a change in the way regular HTTP requests are made from "Http" to "HttpClient". The main difference is that you only receive the (json) response body as a result, rather than the entire response object. If the request is unsuccessful (except for a 401 error), it will throw an error.

To handle this error, you need to catch it and manage it appropriately. One common approach is using RxJs to handle the response, which would transform your code like this:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( (result) => response = result);

If a 400 error occurs in the backend call, the regular subscription won't run, leaving response empty. One solution is to manage the error within the subscribe function:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( 
  (result) => response = result,
  (errorCase) => this.handleTheError(errorCase)
);

private handleTheError(errorCase:ttpErrorResponse):void {
  if(response.status === 401){
    if(response.text().includes("Impersonate")){
      this.displayText = ImpersonateRejectText;
      return
    }
  }
  throw Error('Unexpected Backend Response');
}

Alternatively, you can handle errors within the stream using catchError:

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').pipe(
  catchError( (errorCase:ttpErrorResponse) => // Handle the error )
).subscribe( 
  (result) => response = result
);

The advantage of using "catchError" is that you can gracefully handle expected errors by returning a valid value, which will be processed by the subscribe function as if it were a successful response. If the error cannot be managed gracefully, you can still throw it:

return throwError(errorCase);

Subsequently, you can handle the error in the subscribe function.

Angular 8 Issue: Absence of _body and Headers in Response

Answer №1

Similar questions

Contrasting between betting text and console error logging in Angular

Encountering an error with loading in Angular may require a suitable loader

"Error: The React TypeScript variable has been declared but remains

Error encountered when attempting to insert data into a PostgreSQL database using Node.js and Sequelize

Creating an interface that features a function capable of accepting its own type and interacting with other interface implementations

Learn the process of invoking Firebase Functions through AngularFire

Issue: The code is throwing an error "TypeError: Cannot read property 'push' of undefined" in the JavaScript engine "Hermes

What is the best way to retrieve a property with a period in the method name in JavaScript?

What is the reason for my Firestore listener consistently retrieving data from the server despite having offline persistence enabled?

Utilizing Angular to Handle Undefined Variables in String Interpolation

Tips for showing nested array values in Angular 8

What is the necessity of Angular reflect polyfill for JIT mode?

Issue: Unrecognized element type in next.js while starting development server

Definition for intersecting types

transformed an Angular 2 web application into a sleek and functional mobile application

What is the best way to update my list after deleting an item using promises?

Encountering the issue of receiving "undefined" in node.js after submitting data from an Angular form

Tips for accessing and modifying local files in Angular 2

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

Getting started with html2canvas: A beginner's guide