Microsoft.JSInterop.JSExceptions

[reiluke]

Describe the bug I have a lot of users, 500 to 1000, most of the errors are from the remaining js focustrap and clearbodystyles()

To Reproduce users with latency

Expected behavior Errors should be catched

Hosting Model (is this issue happening with a certain hosting model?): Blazor Server

* Focus Trap Error Error Message

Category: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer EventId: 100 SpanId: 9b1eaeeead7b99b9 TraceId: 6aa5234348c5edb2828d13e8d85a11e6 ParentId: 0000000000000000 RequestId: 800000a0-0000-ed00-b63f-84710c7967bb RequestPath: /_blazor TransportConnectionId: CUuTHUwBBRVTtVeO9svnUA

Unhandled exception rendering component: Unable to focus an invalid element. Error: Unable to focus an invalid element. at Object.focus (https://beta.goplayasia.com/_framework/blazor.server.js:1:28236) at https://beta.goplayasia.com/_framework/blazor.server.js:1:3501 at new Promise () at kt.beginInvokeJSFromDotNet (https://beta.goplayasia.com/_framework/blazor.server.js:1:3475) at https://beta.goplayasia.com/_framework/blazor.server.js:1:72077 at Array.forEach () at kt._invokeClientMethod (https://beta.goplayasia.com/_framework/blazor.server.js:1:72063) at kt._processIncomingData (https://beta.goplayasia.com/_framework/blazor.server.js:1:70105) at connection.onreceive (https://beta.goplayasia.com/_framework/blazor.server.js:1:64508) at o.onmessage (https://beta.goplayasia.com/_framework/blazor.server.js:1:48842)

Exception: Microsoft.JSInterop.JSException: Unable to focus an invalid element. Error: Unable to focus an invalid element. at Object.focus (https://beta.goplayasia.com/_framework/blazor.server.js:1:28236) at https://beta.goplayasia.com/_framework/blazor.server.js:1:3501 at new Promise () at kt.beginInvokeJSFromDotNet (https://beta.goplayasia.com/_framework/blazor.server.js:1:3475) at https://beta.goplayasia.com/_framework/blazor.server.js:1:72077 at Array.forEach () at kt._invokeClientMethod (https://beta.goplayasia.com/_framework/blazor.server.js:1:72063) at kt._processIncomingData (https://beta.goplayasia.com/_framework/blazor.server.js:1:70105) at connection.onreceive (https://beta.goplayasia.com/_framework/blazor.server.js:1:64508) at o.onmessage (https://beta.goplayasia.com/_framework/blazor.server.js:1:48842) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Blazored.Modal.FocusTrap.SetFocus() at Blazored.Modal.BlazoredModalInstance.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

ClearBodyStyles

Category: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost EventId: 111 SpanId: b5095904117d08bf TraceId: ba518961950692688e7e9f242cff2129 ParentId: 0000000000000000 RequestId: 8000063d-0018-ed00-b63f-84710c7967bb RequestPath: /_blazor TransportConnectionId: GoiJmRfTMCgWVpR6CfTYUA

Unhandled exception in circuit '3pePvcJ2y_-BfMDXnCIhwD8MOQ6j0psd4I5VPE-JpwI'.

Exception: System.Threading.Tasks.TaskCanceledException: A task was canceled. at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args) at Blazored.Modal.BlazoredModal.ClearBodyStyles() at Blazored.Modal.BlazoredModal.CancelModals(Object sender, LocationChangedEventArgs e) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state) at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state) --- End of stack trace from previous location --- at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

[thepigeonfighter]

Just adding a +1 to this issue. Encountering similar issues on WASM.

[chrissainty]

@thepigeonfighter I've deleted your last post because of the zip file. If you want to share code, please make a repo and link to it. Random zip files just can't be trusted.

[thepigeonfighter]

Fair enough! I just created a WASM project and added MainLayout2.razor and changed the FetchData page to use that layout. I added the CascadingBlazoredModal tag to MainLayout.razor. I then updated Index.razor to the following

@page "/"

<button @onclick="ShowModal">Show Modal</button>
<a href="/fetchData" >Go to Fetch Data</a>
<button @onclick="HandleGoTo">Go to Fetch Data Force Reload</button>
@code{
    [Inject]
    private IModalService _modal { get; set; }
    [Inject]
    private NavigationManager _nav{ get; set; }

    private void ShowModal()
    {
        _modal.Show<Counter>();
    }
    private void HandleGoTo()
    {
        _nav.NavigateTo("/fetchdata", true);
    }
}

So, for me, the exception only occurs when doing a client-side navigation to the page with the different layout.

[FelipeCostaGualberto]

I get this error when I don't put the CascadingBlazoredModal in the correct place, outer the Router element in the App.razor.

[thepigeonfighter]

I get this error when I don't put the CascadingBlazoredModal in the correct place, outer the Router element in the App.razor.

I did have the CascadingBlazoredModal inside my Router component instead of vice versa, I'll switch and see if that makes a difference.

[thepigeonfighter]

Just an update for anyone else, this has indeed seemed to fix the random errors I was receiving, but as a note, if you are using Telerik components that require a root component you will want to put the cascading modal inside the TelerikRootComponent like this:

<TelerikRootComponent>
    <CascadingBlazoredModal Size="ModalSize.Automatic" Position="ModalPosition.Middle">

        <Router AppAssembly="@typeof(Program).Assembly">
              @*other code*@
        </Router>
    </CascadingBlazoredModal>
</TelerikRootComponent>