Skip to content

Page crashes after some time #180

Open
@MarvinKlein1508

Description

@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);
		}
	}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions