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>

[wstaelens]

any bugfixes/releases?