Each time I click submit order, I get the error "An unhandled exception has occurred. See browser dev tools for details. Reload"

Kevin Ear 20

I am following this Microsoft Learn doc to build a pizza shop and started noticing this error after following this doc https://learn.microsoft.com/en-us/training/modules/blazor-build-rich-interactive-components/3-exercise-use-javascript-libraries-blazor-apps

When I open up dev tools, I see the error "Unchecked runtime.lastError: The page keeping the extension port is moved into back/forward cache, so the message channel is closed."

To try and debug this, I cleared the entire cache.

What am I doing wrong? I followed the doc code by code.

Kevin Ear 20 Reputation points

2024-09-11T03:00:31.78+00:00

Another error I see is "blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State."

I am not sure what that means. It was working fine last week. Not much cosw has changed.
Kevin Ear 20 Reputation points

2024-09-11T03:15:20.3133333+00:00

The end goal is to submit the order and then expect a live update of the order status. Like the bottom of the image in this Microsoft learn doc https://learn.microsoft.com/en-us/training/modules/blazor-build-rich-interactive-components/3-exercise-use-javascript-libraries-blazor-apps
JasonPan - MSFT 5,906 Reputation points Microsoft Vendor

2024-09-11T06:33:17.5+00:00

Hi @Kevin Ear,

It's a System.Text.Json.JsonException . Please share Checkout.razor code and I need to check line 130.

And you also can set a breakpoint and check the json data format.

Best Regards

Jason

Kevin Ear 20

@page "/checkout"
@using BlazingPizza.Services
@inject OrderState OrderState
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
@implements IDisposable

@* <div class="top-bar">
<a class="logo" href="">
<img src="img/logo.svg" />
</a>

<a href="" class="nav-tab active">
<img src="img/pizza-slice.svg" />
<div>Get Pizza</div>
</a>

<a href="myorders" class="nav-tab">
<img src="img/bike.svg" />
<div>My orders</div>
</a>

</div> *@

@* <div class="top-bar">
<a class="logo" href="">
<img src="img/logo.svg" />
</a>

<NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
<img src="img/pizza-slice.svg" />
<div>Get Pizza</div>
</NavLink>

<NavLink href="myorders" class="nav-tab">
<img src="img/bike.svg" />
<div>My Orders</div>
</NavLink>
</div> *@

@*
<div class="main">
<div class="checkout-cols">
<div class="checkout-order-details">
<h4>Review order</h4>
@foreach (var pizza in Order.Pizzas)
{
<p>
<strong>
@(pizza.Size)"
@pizza.Special.Name
(£@pizza.GetFormattedTotalPrice())
</strong>
</p>
}

<p>
<strong>
Total price:
£@Order.GetFormattedTotalPrice()
</strong>
</p>
</div>
</div>

<button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
Place order
</button>
</div> *@

<div class="main">
    
    <EditForm EditContext=editContext OnValidSubmit=PlaceOrder>
        <div class="checkout-cols">
            <div class="checkout-order-details">
                <h4>Review order</h4>
                <OrderReview Order="Order" />
            </div>

            <div class="checkout-delivery-address">
                <h4>Deliver to...</h4>
                @if (isError)
                {
                    <div class="alert alert-danger">Please enter a name and phone number.</div>
                }
                <AddressEditor Address="Order.DeliveryAddress" />
            </div>
        </div>

        <button class="checkout-button btn btn-warning" type="Submit" disabled=@isError>
            Place order
        </button>
    @* <ValidationSummary /> *@
    <DataAnnotationsValidator />
    </EditForm>
</div>

@code {


    private EditContext editContext;

    bool isError = false;
    Order Order => OrderState.Order;

    protected void ShowError()
    {
        isError = true;
    }

    protected override void OnInitialized()
    {
        editContext = new(Order.DeliveryAddress);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        isError = !editContext.Validate();
        StateHasChanged();
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
    async Task PlaceOrder()
    {
        var response = await HttpClient.PostAsJsonAsync(NavigationManager.BaseUri + "orders", OrderState.Order);
        var newOrderId = await response.Content.ReadFromJsonAsync<int>();
        OrderState.ResetOrder();
        NavigationManager.NavigateTo($"myorders/{newOrderId}");
    }

}

JasonPan - MSFT 5,906 Reputation points Microsoft Vendor

2024-09-12T06:38:01.36+00:00

Hi @Kevin Ear,

There is no @using BlazingPizza.Services in official repo, so could you share more details about your project, if you could provide a brand new sample project which can reproduce the issue, we can fix the issue as soon as possible.

Best Regards

Jason

1 answer

JasonPan - MSFT 5,906 Reputation points Microsoft Vendor

2024-09-13T06:41:50.8233333+00:00
Hi @Kevin Ear,

The problem happens after clicking the submit button, so we can set the breakpoint on this line.

var response = await HttpClient.PostAsJsonAsync(NavigationManager.BaseUri + "orders", OrderState.Order);

And we can clearly see the 500 error, then we can find the post orders method and add try...catch to check the details.

try { await _db.SaveChangesAsync(); } catch (Exception ex) { Console.WriteLine(ex.Message); throw; }

For this issue, finally I found that the Address table is missing MobileNumber, State Columns in database.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Jason
Please sign in to rate this answer.
Kevin Ear 20 Reputation points

2024-09-17T23:10:43.2733333+00:00

Hi, which Address table are you referring to? Which database?

JasonPan - MSFT 5,906 Reputation points Microsoft Vendor

2024-09-18T01:10:54.4633333+00:00

Hi @Kevin Ear,

You are using SQLite in your project, please search it which name is pizza.db . You can try to open it and verify it.

Best Regards

Jason
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Each time I click submit order, I get the error "An unhandled exception has occurred. See browser dev tools for details. Reload"

1 answer

Your answer