Page crashes after some time

[MarvinKlein1508]

Describe the bug

We have implemented ChartJs within a blazor page. When we go to the page everything works fine. Now if we leave the tab open for x minutes/hours, the website crashes and we get an error message.

I don't got this behaviour in Firefox yet, only in Chrome.

Which Blazor project type is your bug related to?

• Server-Side

Which charts does this bug apply to?

<Chart Config="_chartConfig" @ref="_chart" />

To Reproduce

Steps to reproduce the behavior: We are using ChartJs v 2.0.2. We implemented the chart in this way: <Chart Config="_chartConfig" @ref="_chart" />

InitChartData() is called in OnParametersSetAsync()

Now keep the page open. It can take up to a few few minutes or hours until the page crashes.

Additional context / logging

Add any additional context about the problem here.

Category: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost
EventId: 111
SpanId: 155a6ee05355f14b
TraceId: 7ba32bda0dc0df4e8fc029139ced18f9
ParentId: 0000000000000000
RequestId: 800001cb-000a-f800-b63f-84710c7967bb
RequestPath: /_blazor
TransportConnectionId: MIPBcXk0NMVBF9fEKt-Z5w

Unhandled exception in circuit 'WPZDgZ09abqTNY91AXwwP7xZwcfpPAlEnyN229qjEuw'.

Exception: 
Microsoft.JSInterop.JSException: Could not find a chart with the given id. 568bdcd0-6079-42a7-86bf-c5e66f502a2a
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at ChartJs.Blazor.Chart.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Code example

Please provide full code examples below where possible to make it easier for the developers to check your issues.
Please also add the working JavaScript equivalent so we can see what you were trying to achieve.

protected override async Task OnParametersSetAsync()
{
	if (CustomerId > 0)
	{
		_customer = await Kunde.GetKundeAsync(Kundennummer.ToString());
		if (_customer is not null)
		{
			/* More Stuff is happening here */

			Umsatzdaten = new Dictionary<int, Jahresumsatz>();
			for (int i = 0; i < UmsatzJahre; i++)
			{
				if(!Umsatzdaten.ContainsKey(i))
				{
					Umsatzdaten.Add(i, await customerService.GetCustomerDataAsync(_customer.KUND_A_NR, DateTime.Now.Year - i));
				}
			}

			InitChartData();
		}
		else
		{
			/* More Stuff is happening here */
		}
	}
}

private void InitChartData()
{

	_chartConfig = new LineConfig
	{
		Options = new LineOptions
		{
			Responsive = true,
			Title = new OptionsTitle
			{
				Display = true,
				Text = $"Umsatz der letzten {UmsatzJahre} Jahre"


			}
		}
	};

	_chartConfig.Data.Labels.Clear();
	_chartConfig.Data.Datasets.Clear();

	for (int i = 1; i <= 12; i++)
	{
		_chartConfig.Data.Labels.Add(System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i));
	}

	for (int i = 0; i < UmsatzJahre; i++)
	{
		string lbl = (DateTime.Now.Year - i).ToString();
		if (Umsatzdaten.ContainsKey(i))
		{
			IDataset<decimal> tmpDs = new LineDataset<decimal>(Umsatzdaten[i].ToIEnumerable())
			{
				Label = lbl,
				BackgroundColor = ColorUtil.FromDrawingColor(ChartHelper.GetColor(i)),
				BorderColor = ColorUtil.FromDrawingColor(ChartHelper.GetColor(i)),
				Fill = FillingMode.Disabled,
			};
			_chartConfig.Data.Datasets.Add(tmpDs);
		}
	}
}

[pgrimstrup]

I have the same issue on a page that refreshes the displayed data every 10 seconds.

I just had a quick look at the base chart class and it appears to use an ID from the Config for the chart component. Since the Config is being recreated, a new ID is being generated. This means that Blazor cannot locate the original chart component to check for changes in the DOM.

Workaround: Do not recreate the Config instance within the InitChartData() method. Create an instance in the Page Initialize() method, and then update the properties, such as Options. You will need to keep the original Config instance so the ID doesn't change.

Possible Fix: Allow the ID to be specified in the Config constructor, or make the ID property read/write.

Note that this means that all sample code where this technique is being used will need to be changed as well.

Edit: Alternatively, just move the CanvasId into the Chart component. I have submitted a PR with this.