fix: System.ArgumentException: The renderer does not have a component with ID 48. in Blazor Web App template

[frindler]

🐛 Bug Report

When the stream render update on the Weather page of the FluentUI template is pushed, the template crashes.

💻 Repro or Code Sample

• dotnet new fluentblazor -o FluentUIBlazorTest

• Add @using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons to _Imports.razor as per Upgrade Guide for v4.11.0.

• cd FluentUIBlazorTest && dotnet run.

Then go to the Weather page on the app running in the browser.

🤔 Expected Behavior

After the "Loading..." disappears, it is replaced with the weather forecast data.

😯 Current Behavior

Crashes. It shows:

System.ArgumentException: The renderer does not have a component with ID 48.
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetRequiredComponentState(Int32 componentId)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetComponentState(Int32 componentId)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.GetComponentDepth(Int32 componentId)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.SendBatchAsStreamingUpdate(RenderBatch& renderBatch, TextWriter writer)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.UpdateDisplayAsync(RenderBatch& renderBatch)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.HandleException(Exception exception)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderHandle.Render(RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.HandleException(Exception exception)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.HandleExceptionViaErrorBoundary(Exception error, ComponentState errorSourceOrNull)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<WaitForQuiescence>g__ProcessAsynchronousWork|54_0()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.WaitForQuiescence()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.SendStreamingUpdatesAsync(HttpContext httpContext, Task untilTaskCompleted, TextWriter writer)

🌍 Your Environment

• OS & Device: macOS
• Browser: Google Chrome
• .NET and Fluent UI Blazor library Version: .NET 9, FluentUI Blazor 4.11.0+a6773274

[vnbaaij]

You should use the v4.11 templates to generate your starting point

[frindler]

Thanks - you are right, I did use the 4.10.4 templates (because that's what I got from dotnet new install Microsoft.FluentUI.AspNetCore.Templates), but they restored 4.11.0-beta.1 FluentUI packages... If I manually downgrade the packages to 4.10.4, then it works. I'll try again when I get the new templates.

[frindler]

Tried it with v4.11.0 templates and NuGet package (which are now available). Still breaks as described.

[vnbaaij]

Hmm, there seems to be an issue with using the DataGrid with SSR and StreamRendering.

You can make it work by changing line 26 to:

private IQueryable<WeatherForecast>? forecasts = Enumerable.Empty<WeatherForecast>().AsQueryable();

I'm investigating it further.

why?

[vnbaaij]

why?

What are you trying to accomplish with this comment? This is not helping or contributing in any way.

[vnbaaij]

Based on what I've seen at dotnet/aspnetcore#51749, the IQueryable does not work great with the StreamRendering.
Our DataGrid (which is based on QuickGrid and mentioned in the other issue) needs an IQueryable to work. I tried the suggested fix from the other issue but it did not lead to the loading text being shown. This has to do with the fact that the DataGrid has it's own loading state as well.
With the code below, we can use this internal loading state to show the Loading in the grid itself instead of using the if..else construct from the standard template. I'll change the template to use this code.

@page "/weather"
@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

<!-- This age is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
<FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" >
    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start" />
    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center" />
    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center" />
    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End" />
</FluentDataGrid>

@code {
    private IQueryable<WeatherForecast>? forecasts;

    protected override async Task OnInitializedAsync()
    {

        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).AsQueryable();
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    } 
}

Which gives you:

You can see the StreamRendering is actually working as when you set it to false, the page will just not display until the TaskDelay has passed