Provide more information in error

[istoyneva]

This error is cropping randomly. Adding more info about the "logicalElement" argument that could not be processed would go a long way:

aspnetcore/src/Components/Web.JS/src/Rendering/LogicalElements.ts

Line 313 in 35013f7

throw new Error('Not a valid logical element');

[javiercn]

@istoyneva thanks for contacting us.

Do you have a minimal repro as a public github repository that we could take a look at? Is your app modifying the DOM via JS (though a library or JS interop)?

[istoyneva]

While preparing to answer your questioonquestions, @javiercn, this is a Blazor app and I noticed that it's under aspnetcore. Do we need to move it?

[istoyneva]

Again - this is a Blazor 8 SSR interactive.

There is more errors in the browser console. They're of the type:

The issue is not readily reproducible and we don't have a minimal project that experiences it.

Our code does not modify the DOM using javascript, but we use a third-party control library and I can't say what they're doing.

Could someone provide possible approaches to configure the application to capture more info around the issue? Kinda like to create dumps (client or server) or similar...

Looking at the server application log, the issue always happens after OnInitializedAsync of our main component. During OnInitializedAsync we do initialize control's binding data sources. Markup was such that the controls (in-house components plus multi-select drop downs, date pickers, grid from the third-party library) are rendered as soon as all injected properties are not null:
`
@if (_modelA is not null && _modelB is not null, ...)
{

... combination of our constrols and the third-party controls

}
`

We're trying a different condition now - one that'd disable rendering for a little longer - until after OnInitializedAsync is fully complete.

[javiercn]

@istoyneva thanks for the additional details.

Our code does not modify the DOM using javascript, but we use a third-party control library and I can't say what they're doing.

Is this a public third-party control library? You can check if its loading JS on to the page, and see what that JS is doing.

One way to try and reproduce this, is by (if you are able to) trigger it once (record the steps) and then start removing elements from the page until you can no longer reproduce it.

The other thing you can do is search for the error and put a breakpoint in JS before it happens. You should see the nodes that it is complaining about in the page and see where in the app is happening in the element selector, and from them identify the problematic component

[istoyneva]

Is it possible to suggest where to set the breakpoint?

The issue is always gone on a re-try, so even if we stumble on it, by the time we set the breakpoint and refresh, it'll be gone