How do I resolve Unhandled exception rendering component: Response status code does not indicate success: 404 (Not Found)?

Question

I have an API call from a Blazor page. If the ApplicationID is found, it displays correctly. If the ApplicationID is not found, it throws an error in the Chrome browser console and never returns from the call.

Server:

Below, I can always get a response. If I return Ok, it works; if I return NotFound, then Chrome throws the "Unhandled exception rendering component: Response status code does not indicate success: 404 (Not Found)" and the web page stops working.

[ApiController]
[Route("api/biographicdata/{applicationid}")]
public class BiographicDataController : ControllerBase
{

    private readonly IMediator _mediator;

    public BiographicDataController(IMediator mediator)
    {
        _mediator = mediator;
    }
    [HttpGet]
    public async Task<IActionResult> Get([FromRoute] long applicationid)
    {
        var response = await _mediator.Send(new GetBiographicData.Request { ApplicationID = applicationid });
        if (string.IsNullOrEmpty(response.ErrorMessage))
        {
            return Ok(response);
        }
        else
        {
            return NotFound(response);
        }
    }

    public async Task<BiographicData> Handle(Request request, CancellationToken cancellationToken)
    {
        var result = await _db.Applications.Include(a => a.Applicant).Where(a => a.ApplicationId == request.ApplicationID)
            .Select(x => new BiographicData
            {
                ApplicantId = x.ApplicantId,
            }).FirstOrDefaultAsync(cancellationToken);
        if (result == null)
        {
            result = new BiographicData()
            {
                ErrorMessage = $"The requested Application ID {request.ApplicationID} was not found.",
            };
        }
        return result;
    }

}

Blazer:

This code all seems to work fine, but if the appid is not found the code never gets the result from GetFromJsonAsync.

protected override async Task OnInitializedAsync()
{
    AppState.UpdateApplicationID(this, appid);
    AppState.UpdateHelpURL(this, "Biographic_Information");
    var client = await _factory.CreateClientAsync();
    var result = await client.GetFromJsonAsync<BiographicData>($"api/biographicdata/{appid}");
    if (string.IsNullOrEmpty(result.ErrorMessage))
    {
      // snip
    }
}

How do I correctly return from the server if data is not found?

Answer 1

The Try/Catch block suggested by Qing did not work. The Blazor code did not catch the exception.

My solution was to only return the OK response:

[HttpGet]
public async Task<IActionResult> Get([FromRoute] long applicationid)
{
    var response = await _mediator.Send(new GetBiographicData.Request { ApplicationID = applicationid });
    return Ok(response);
}

The Blazor code now checks the result and handles any error.