Getting "An unhandled exception has occurred" message when working on the Blazor app in Use pages, routing, and layouts to improve Blazor navigation module

Question

I have been working on the Blazor app in Use pages, routing, and layouts to improve Blazor navigation module and every time I try to load the browser page, the pizza cards show up for a second and then disappear and I get a message that says "An unhandled exception has occurred. See browser dev tools for details." at the bottom of the screen. This is what it says in the terminal when this happens:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]

  Unhandled exception in circuit '0CciHfPJhjV-mLa48M9fpbvzCM_pfUhyb0hN-Xse5y0'.

  System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.

   ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.

     at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)

     at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)

     at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)

     at System.Text.Json.Utf8JsonReader.ReadSingleSegment()

     at System.Text.Json.Utf8JsonReader.Read()

     at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)

     --- End of inner exception stack trace ---

     at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)

     at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)

     at System.Text.Json.JsonSerializer.ReadCore[TValue](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)

     at System.Text.Json.JsonSerializer.ReadCore[TValue](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase)

     at System.Text.Json.JsonSerializer.ContinueDeserialize[TValue](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonConverter converter, JsonSerializerOptions options)

     at System.Text.Json.JsonSerializer.ReadAllAsync[TValue](Stream utf8Json, JsonTypeInfo jsonTypeInfo, CancellationToken cancellationToken)

     at System.Net.Http.Json.HttpContentJsonExtensions.ReadFromJsonAsyncCore[T](HttpContent content, Encoding sourceEncoding, JsonSerializerOptions options, CancellationToken cancellationToken)

     at System.Net.Http.Json.HttpClientJsonExtensions.GetFromJsonAsyncCore[T](Task`1 taskResponse, JsonSerializerOptions options, CancellationToken cancellationToken)

     at BlazingPizza.Pages.Index.OnInitializedAsync() in /workspaces/mslearn-blazor-navigation/Pages/Index.razor:line 88

     at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

     at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

How do I resolve this? I got this same error when working on the "Interact with Blazor web apps" module.

Answer 1

Hi Mara McConnell,

Thank you for reaching out to Microsoft Q & A forum 

The error arises when Blazor expects JSON data but receives HTML, typically due to an incorrect API request or endpoint. 

1.Check the API Response: Open the browser's Developer Tools (F12), navigate to the Network tab, and inspect the response from the API request to ensure it's returning valid JSON rather than HTML (such as error pages). 

2.Verify the API URL: Double-check the URL in your HttpClient request to ensure it's correct. An incorrect endpoint might return an HTML error page instead of the expected JSON data. 

3.Add Error Handling: Wrap your HttpClient call in a try-catch block to handle any errors that may occur during the request. For example: 

try
{
    var pizzas = await HttpClient.GetFromJsonAsync<List<Pizza>>("api/pizzas");
}
catch (Exception ex)
{
    Console.WriteLine($"Error: {ex.Message}");
}

4.Check API Logic: Ensure the API is serving valid JSON responses and is not returning HTML (e.g., avoid 404 or 500 error pages). 

5.Test the Endpoint: Use tools like Swagger to directly test the API endpoint and confirm that it returns valid JSON data. 

Please feel free to contact us if you have any additional questions.     

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.