Nswag/Angular display API error message in error event

Question

First of All I was using the CQRS architecture for the back-end API and using NSWAG as an API connection; that generates API Endpoints in service proxy for the front-end Angular.

I did simple validation for my POST API, while testing the created API the result was different in DevTools.

In Network tab the validation that i expected was occured however in Console tab the result is different; As a matter of fact that result is i need.

Here's my problem. In detail with image

code for API call

     saveLocationType(createLocationTypeCommand){
    this.tenantService.createLocationType(createLocationTypeCommand).subscribe(result => {
   // Do Something
    }, error => {
      console.log(error); 
    })
  }

This is the validation result coming from my API in Network Tab that was correct.

This is my problem in Console the result here must be the same in Network Tab.

I believe the result in console was coming from service proxy since that's the one generates/formatting the APIs for the front-end.

Is there a way to configure the generated service proxy of NSWAG? or is there other way to show the error message in Console tab same in Network Tab?

Marc Kenneth Lomio · Accepted Answer · 2020-10-26T13:22:33.690

I solved my problem using these reference:

Snippet in C# Web API that i implemented to fixed my problem

  [HttpPost("setup/locationType", Name = "createLocationType")]
        [ProducesResponseType((int)HttpStatusCode.OK)]
        [ProducesResponseType(typeof(ValidationProblemDetails), (int)HttpStatusCode.BadRequest)]
        public async Task<IActionResult> CreateLocationTypeAsync([FromBody] CreateLocationTypeCommand command)
        {
            try
            {
                var commandResult = await _mediator.Send(command);

                if (!commandResult)
                {
                    return BadRequest();
                }

                return Ok();
            }
            catch(Exception ex)
            {
                var problemDetails = new ValidationProblemDetails
                {
                    Status = (int)HttpStatusCode.BadRequest,
                    Type = "",
                    Title = "Create Location Type",
                    Detail = ex.Message,
                    Instance = HttpContext.Request.Path
                };

                return new ObjectResult(problemDetails)
                {
                    ContentTypes = { "application/problem+json" },
                    StatusCode = (int)HttpStatusCode.BadRequest,
                };
            }

        }

Thanks!

score 0 · Answer 2 · answered Oct 26 '20 at 09:56

If you use the angular http client, try to use the responseType text option.

return this.http.post(url,body, {responseType: 'text'}).subscribe()

The client tries to handle the response as responseType: 'json' as default. He tries to parse this response as a json and fails and raises this error.

More infos about non Json responsebodies you can find here: https://angular.io/guide/http#requesting-non-json-data

Nswag/Angular display API error message in error event

2 Answers2