JSException in WebAssemblyRenderer

[hultqvist]

Is your feature request related to a problem? Please describe.

When I'm closing a dialog thus unloading components I'm receiving the error.

@if(Open){
    <MyComponent></MyComponent>
}

This cause the bottom error bar to show up and the error below is shown on the console.

The underlying cause for this error to trigger could very likely be from some code of mine.
Problem is that the error message doesn't let me know where to look.

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unknown edit type: 0
      Error: Unknown edit type: 0
          at e.applyEdits (https://localhost:44347/_framework/blazor.webassembly.js:1:15076)
          at e.updateComponent (https://localhost:44347/_framework/blazor.webassembly.js:1:12948)
          at Object.t.renderBatch (https://localhost:44347/_framework/blazor.webassembly.js:1:1704)
          at Object.window.Blazor._internal.renderBatch (https://localhost:44347/_framework/blazor.webassembly.js:1:34848)
          at _mono_wasm_invoke_js_unmarshalled (https://localhost:44347/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:172151)
          at wasm_invoke_iiiiii (wasm-function[3160]:0x9d403)
          at icall_trampoline_dispatch (wasm-function[5776]:0x1007ce)
          at mono_wasm_interp_to_native_trampoline (wasm-function[4606]:0xcc8da)
          at ves_pinvoke_method (wasm-function[3209]:0x9ee05)
          at interp_exec_method (wasm-function[1120]:0x25b31)
Microsoft.JSInterop.JSException: Unknown edit type: 0
Error: Unknown edit type: 0
    at e.applyEdits (https://localhost:44347/_framework/blazor.webassembly.js:1:15076)
    at e.updateComponent (https://localhost:44347/_framework/blazor.webassembly.js:1:12948)
    at Object.t.renderBatch (https://localhost:44347/_framework/blazor.webassembly.js:1:1704)
    at Object.window.Blazor._internal.renderBatch (https://localhost:44347/_framework/blazor.webassembly.js:1:34848)
    at _mono_wasm_invoke_js_unmarshalled (https://localhost:44347/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:172151)
    at wasm_invoke_iiiiii (wasm-function[3160]:0x9d403)
    at icall_trampoline_dispatch (wasm-function[5776]:0x1007ce)
    at mono_wasm_interp_to_native_trampoline (wasm-function[4606]:0xcc8da)
    at ves_pinvoke_method (wasm-function[3209]:0x9ee05)
    at interp_exec_method (wasm-function[1120]:0x25b31)
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3025730 + 0x00046> in <filename unknown>:0 
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3025650 + 0x00014> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3025558 + 0x0001e> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2d7c110 + 0x000f2> in <filename unknown>:0 

Describe the solution you'd like

I would like the error message to contain information about what part of the whole document RenderTree was being processed when the error occurred.

[javiercn]

@hultqvist thanks for contacting us.

That typically means the error is being thrown while processing the view code, or when you've modified the DOM with JS and it has gotten out of sync from the representation in Blazor.

Can you provide a minimal repro project that showcases the issue?

[hultqvist]

My suggestion is about making the error message more verbose so that I can start tracking down the error without bisecting the whole app.

---

The component being removed did contain an element with contenteditable that was only modified using JS, the blazor model sees it as a constant html string.
But this wasn't the problem, upon removing it the error still remained.

[hultqvist]

I traced the error back to whether an <input> field, inside the parts being removed, was having focus or not when the component was removed.

There was two methods to close the component.

• X inside the component that was triggered using @onclick
• Element outside the component that was triggered using @onmousedown

Both these were calling the same Close method where the data was removed that caused the component to be hidden.

The error showed up when

• Keep focus in the input field and clicking an element using @onmousedown

The error wouldn't show up when

• Clicking the @onclick inside the dialog
• Clicking outside/next to the input field, thus removing focus, before clicking the @onmousedown element.

I then tried to change the outside element to trigger on @onclick.
Now clicking the outside element will not cause the error.
However dragging with the mouse from the input field and releasing on the outside element will trigger the error as the input still has focus when the outside element receives the click event.

I narrowed it down to a the @onfocusout of the sub components input element.
By removing that attribute/binding the crash does not occur.
When removing everything else but the @onfocusout it still crashed.

@code{
        bool focus = false;
        void OnFocusIn() => focus = true;
        void OnFocusOut() => focus = false;
}
<input 
       @onfocusin="OnFocusIn"
       @onfocusout="OnFocusOut" />

[hultqvist]

#21936 is an example I came up with trying to create an example of this bug.
It isn't exactly the type of error I was experiencing in the more complex app.

[mkArtakMSFT]

Thanks @hultqvist.
We still need a repro here to be able to investigate. Please provide a minimal app to demonstrate the issue.

[hultqvist]

I've tried but so far my attempts to copy the relevant parts doesn't trigger the error.

My wish with this feature request is to have some way to dig deeper into the error message.
For example setting some flag that would generate lots of debugging data.
It would make the program very slow but the alternative is to spend hours of guessing.

[hultqvist]

This is the workaround we're using right now.

We have a hidden input element in the document.
Before removing a component we set focus to this input element.

[mkArtakMSFT]

@hultqvist unfortunately we can't investigate this without a small repro project. Things which can be at play in your situation, is potentially a JS library you use, which manipulates the DOM behind the scene. This is simply an idea, not a statement.

[hultqvist]

Here is a repro tested in Blazor 3.2.0

Code

<div><button @onclick="() => Show= true">Show</button></div>

<div>1. Click inside red circle to remove.</div>
<div>2. Click inside input to crash.</div>

@if (Show)
{
    <div style="border:1px solid red; padding: 2em;" @onclick="() => Show=false">
        <input @onfocusout="OnFocusOut" />
    </div>
}
@code{
    public bool Show { get; set; } = true;

    void OnFocusOut()
    {
    }

    void ClickClose()
    {
        Show = false;
    }
}

Console Error message

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '5'.
Parameter name: eventHandlerId
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (:44321/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x2db49e8 + 0x00054> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.DispatchEventAsync (:44321/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo eventFieldInfo, System.EventArgs eventArgs) <0x2db4620 + 0x00078> in <filename unknown>:0 
  at :44321/Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.ProcessNextDeferredEventAsync () <0x2dd2a50 + 0x000a6> in <filename unknown>:0 
    at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1)
    at Object.invokeJSFromDotNet (blazor.webassembly.js:1)
    at _mono_wasm_invoke_js_marshalled (dotnet.3.2.0-rc1.20222.2.js:1)
    at do_icall (:44321/wasm-function[6049]:0x111976)
    at do_icall_wrapper (:44321/wasm-function[1896]:0x52c3e)
    at interp_exec_method (:44321/wasm-function[1120]:0x25a03)
    at interp_runtime_invoke (:44321/wasm-function[5654]:0xf944e)
    at mono_jit_runtime_invoke (:44321/wasm-function[5108]:0xdfbfa)
    at do_runtime_invoke (:44321/wasm-function[1410]:0x3db59)
    at mono_runtime_try_invoke (:44321/wasm-function[418]:0xcfd4)

[mkArtakMSFT]

This is a dupe of #21241