Blazor Rendering Bug

Hey, i have a dynamic Line Charts, which add a Datapoint ervery second. My Problem is, that at some point, the application crashes, when the Chart is re-rendering, somemites it takes more or less time. Here is the Error message.

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Collection was modified; enumeration operation may not execute.
      System.InvalidOperationException: Collection was modified; enumeration operation may not execute.
         at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
         at System.Collections.Generic.List`1.Enumerator.MoveNext()
         at Radzen.Blazor.Rendering.Markers`1.BuildRenderTree(RenderTreeBuilder __builder)
         at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'ZqYGFNtGl3fN67EQprc7TtLm6bTk1DNfRUOpqxgDQJQ'.
      System.InvalidOperationException: Collection was modified; enumeration operation may not execute.
         at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
         at System.Collections.Generic.List`1.Enumerator.MoveNext()
         at Radzen.Blazor.Rendering.Markers`1.BuildRenderTree(RenderTreeBuilder __builder)
         at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]

´´´

How can we reproduce this exception?

if you have an dynamicly generated chart and resize your Browser or hover over the Series to look at the tooltips when the chart is rendering its possible to get that error.

Can you provide a minimal reproduction that we can test with? If you can't you can attach the source code to your application and see why the the exception occurs.

heres the chart


<div>
    <RadzenChart @ref="myChart" id="lineChart">
        <RadzenLineSeries Data="viewmodell.MeasureItems" Title="Auslastung in %" CategoryProperty="Time" LineType="LineType.Solid" ValueProperty="Percentage">
            <RadzenLegend Visible="false" />
        </RadzenLineSeries>
        <RadzenChartTooltipOptions Visible="@(!viewmodell.IsChartRunning)" />
        <RadzenValueAxis Min="0" Max="100" Step="10">
            <RadzenGridLines Visible="true" />
        </RadzenValueAxis>
        <RadzenCategoryAxis Visible="false">
        </RadzenCategoryAxis>
    </RadzenChart>
</div>

this void is called when a property changed.


   private async void ViemodelPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        await InvokeAsync(() =>
        {
            try
            {
                myChart.Reload();
                StateHasChanged();
            }
            catch (Exception disposed)
            {
                //Todoo: log für fehler
            }
        });

    }

and here is the List for the Data

  public List<MeasureItem> MeasureItems 
        { get 
            {
                return measureItems;
            } 
            set
            {
                measureItems = value;
            }
        }

When there List has many items and you hover over the Tooltips or resize the window of your Browser the Chart will re render.

I cant show the whole source code here

Unfortunately without a complete reproduction we can't do much. Try attaching the Radzen.Blazor source code to see why the exception happens.

How can I attache the source code ?

Check how this is done in the sample application.

I think have allready attached it?

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <RootNamespace>edge_cantraficSimulator</RootNamespace>
    <UserSecretsId>670bbdd1-166e-4ad3-9c44-abd6b73f977b</UserSecretsId>
    <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <WarningLevel>0</WarningLevel>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="bunit.web" Version="1.2.49" />
    <PackageReference Include="log4net" Version="2.0.12" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="5.0.11" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.11">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.11.1" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="5.0.2" />
    <PackageReference Include="MudBlazor" Version="5.1.5" />
    <PackageReference Include="MudBlazor.Markdown" Version="0.0.5" />
    <PackageReference Include="MudBlazor.ThemeManager" Version="1.0.5" />
    <PackageReference Include="Plotly.Blazor" Version="2.3.1" />
    <PackageReference Include="Radzen.Blazor" Version="3.11.9" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="Tests\" />
  </ItemGroup>

</Project>

I mean to attach the Radzen.Blazor source code so you can debug the exception.