I'm trying to create a error handler for a Blazor App.I've reviewed the offical instruiction on Microsoft Learn
Here is my MainLayout
@inherits LayoutComponentBase<FluentLayout><FluentHeader> -----</FluentHeader><FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%"><NavMenu /><FluentBodyContent Class="body-content"><div class="content"> @Body</div></FluentBodyContent></FluentStack><FluentFooter><a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a><FluentSpacer /><a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a></FluentFooter></FluentLayout><article class="content"><ErrorBoundary @ref="errorBoundary"><ChildContent> @Body</ChildContent><ErrorContent><p class="errorUI">😈 A rotten gremlin got us. Sorry!</p></ErrorContent></ErrorBoundary></article>@code { private ErrorBoundary? errorBoundary; protected override void OnParametersSet() { errorBoundary?.Recover(); }}I enabled the detailed error, I can see the error log in the console but can't display the ErrorBoundary component in the page.
blazor.web.js:1 [2024-07-09T11:14:01.582Z] Error:System.InvalidOperationException: Current count is too big! atWeb.Host.Components.Pages.Counter.IncrementCount() inWeb\Components\Pages\Counter.razor:line22 atMicrosoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[T](MulticastDelegatedelegate, T arg) atMicrosoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItemcallback, Object arg) atMicrosoft.AspNetCore.Components.EventCallback`1.InvokeAsync(TValuearg) atMicrosoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(MouseEventArgse) in /_/src/Core/Components/Button/FluentButton.razor.cs:line 217
atMicrosoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Tasktask) atMicrosoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(TasktaskToHandle, ComponentState owningComponentState)