Unpredictable No element is currently associated with component {ComponentId}

[vertonghenb]

Edited to remove the false-positives

Reproducable : https://github.com/aspnet/Blazor/issues/1412#issuecomment-439267547

Using Blazor Server Side
From time to time Blazor throws the following error:
No element is currently associated with component {ComponentId}

The error is always thrown on the first load after a StateHasChanged, if you hard refresh the page the error doesn't happen anymore.

• Is there a way to see which component has which id?
• Is this a known issue?

For me this is quite vague and it happends for no certain reason, only from time to time.

[SteveSandersonMS]

This isn't a known issue, so if you have any way to reproduce it, we'd definitely want to fix it.

I can't really take any action on this right now because I've never seen this happen so have no clue about what might cause it. It's possibly something unique to your app, but we'd know more if there was a repro.

If you remove a surrounding <div> from the page, the error is gone.

Can you clarify this point? Is there some code sample you could post that shows it with the <div> that seemingly causes this problem?

[SteveSandersonMS]

Thanks for confirming!

It sounds like this is not a bug, but if you have a code sample to share that triggers the error, I could give a more precise answer.

[vertonghenb]

Issue is actually still unresolved, on unpredictable intervals I get the following error message:

Uncaught Error: No element is currently associated with component 944
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)

I wonder if it's possible to debug this sort of stuff. because I currently have no idea what component has the id 944

Codebase is pretty large, but I can do a VS Live Share if you'd like.

[vertonghenb]

[danroth27]

@vertonghenb For us to investigate we're going to need steps to reproduce the issue. Is there a way you can trim down your app to just the code that causes the problem?

[vertonghenb]

@danroth27 I'd love to give some reproduction steps but unfortunately I have no idea how to reproduce the issue, sometimes the error hardly shows up, sometimes it does more frequently. It happends after an async (await) load of data and navigating to another component the components takes a delegate functions Func<string, int, Task<List<T>>> as parameter. The issue is logged to get some knowledge of how to get a "dump" to see where the issue is thrown (in which component or function).

[danroth27]

@SteveSandersonMS Might this be related at all to dotnet/blazor#1651?

[SteveSandersonMS]

@danroth27 I don't think so.

This issue implies that somehow it's possible to re-render a component after it's already been disposed (or that the initial attempt to add the component failed on the JS side, though I don't see how). That shouldn't be possible, and we have a test to back this up (that after disposal, re-render attempts will be skipped), but apparently there is some unanticipated timing-based way of doing that. If we had a repro I'm sure it would be quick to track down, but without one it's difficult to even start looking.

[vertonghenb]

@SteveSandersonMS I invited you to the Repository where the App is hosted, since the error is all over the place, I can't pin-point it. At a certain point I even changed every async code with sync.(not anymore though) then the error doesn't show up anymore so I believe it's related to async and timing. The instructions to reproduce the error are in the readme of the repo.

[vertonghenb]

@SteveSandersonMS , related to dotnet/blazor#1666 ?

[vertonghenb]

@SteveSandersonMS @danroth27
Using the 0.7.0-preview release:
Well I can say, something changed in 0.7.0-preview. After the 0.7.0 release it now happends for all the components that should be rendered (it used to be only 1 error message, now there are plenty), the issue occurs on the OnInitAsync function which is basically a async Task to return a List<T>.

Task<List<T>> GetIndexAsync(string searchTerm, int take = 50);

When the code is not async, the error never occurs, so I'm pretty confident it's a timing issue.

Code that triggers this:

@page "/customers"
@using Ecocolors.Domain.Models.Stakeholders
@inject ICustomerManager CustomerManager
@inject IFormHandler FormHandler

<MPage Title="Klanten" Icon=@EIcon.EC_Customer>
    <Actions>
        <MButton Icon=@EIcon.LA_Plus State=@EState.Success OnClick=@((e) =>FormHandler.ShowCreateForm<Forms.Mutate>()) />
    </Actions>
    <Body>
        <MPortlet >
            <Content>
                <MToolBar SearchTerm="@_searchTerm" OnChanged="@OnSearchTermChange"/>
                <MTable TItem="Customer" Items="@_customers" IsLoading="@_isLoading">
                    <Header>
                        <th>Actief</th>
                        <th>Nummer</th>
                        <th>BTW Nr.</th>
                        <th>Naam</th>
                        <th>Adres</th>
                    </Header>
                    <Row Context="customer">
                        <td><MEnabledBadge IsEnabled=@customer.Enabled /></td>
                        <td>@customer.Sequence</td>
                        <td>@customer.VATNumber</td>
                        <td><MLink Url=@($"customers/{customer.Id}") Text=@customer.Name /></td>
                        <td>@customer.Headquarter?.Address?.DisplayName</td>
                    </Row>
                </MTable>
            </Content>
        </MPortlet>
    </Body>
</MPage>

@functions{
    private IReadOnlyList<Customer> _customers = new List<Customer>();
    private bool _isLoading = true;
    private string _searchTerm = string.Empty;
    private int _amount = 50;
    protected async override Task OnInitAsync()
    {
        _customers = await CustomerManager.GetIndexAsync(_searchTerm);
        _isLoading = false;
    }
    private async Task OnSearchTermChange(string term)
    {
        if (_isLoading)
            return;
        _isLoading = true;
        _searchTerm = term;
        StateHasChanged();
        _customers = await CustomerManager.GetIndexAsync(_searchTerm, _amount);
        _isLoading = false;
        StateHasChanged();
    }
}

On The Server:

Ecocolors.Server> System.AggregateException: One or more errors occurred. (Error: No element is currently associated with component 166) ---> Microsoft.AspNetCore.Blazor.Browser.Rendering.RemoteRendererException: Error: No element is currently associated with component 166
Ecocolors.Server>    --- End of inner exception stack trace ---
Ecocolors.Server> ---> (Inner Exception #0) Microsoft.AspNetCore.Blazor.Browser.Rendering.RemoteRendererException: Error: No element is currently associated with component 166<---
[... a few dozen more.]

On The Client:

blazor.server.js:38 Uncaught Error: No element is currently associated with component 536
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.373 blazor.server.js:38 Uncaught Error: No element is currently associated with component 537
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.503 blazor.server.js:38 Uncaught Error: No element is currently associated with component 536
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.504 blazor.server.js:38 Uncaught Error: No element is currently associated with component 538
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.504 blazor.server.js:38 Uncaught Error: No element is currently associated with component 539
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.504 blazor.server.js:38 Uncaught Error: No element is currently associated with component 540
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
03:26:22.504 blazor.server.js:38 Uncaught Error: No element is currently associated with component 541
    at e.updateComponent (blazor.server.js:23)
    at Object.t.renderBatch (blazor.server.js:16)
    at e.<anonymous> (blazor.server.js:38)
    at blazor.server.js:16
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (blazor.server.js:16)
    at e.processIncomingData (blazor.server.js:16)
    at e.connection.onreceive (blazor.server.js:16)
    at WebSocket.i.onmessage (blazor.server.js:16)
[... a few dozen more.]