[WebToolsE2E][Aspire][Unstable] An unhandled error has occurred "fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]" when click on any instrument in the Aspire dashboard "Metrics"

[Rita003]

INSTALL STEPS

1. Clean machine: Win11 x64 23h2 ENU
2. Install SDK 8.0.303
3. Install Aspire 8.1.0
4. Apply feed

REPRO STEPS

1. Open CMD, create an Aspire Starter App using following commands:

   dotnet new aspire-starter -o AspireStarterApp
   cd AspireStarterApp/AspireStarterApp.AppHost

2. Dotnet run the project in CMD, and open URL in the browser. dotnet run
3. Click the "Metrics" option on the Aspire dashboard left, and click on any instrument.

Note:

1. This issue is unstable, if you can't reproduce, you can try to click other option first (eg: click the endpoint, Structured, or Traces), then click on the "Metrics" instrument.
2. This issue doesn't repro on Aspire 8.0.2 in recently tests
3. This issue is unstable, you can try clicking Metrics instrument multiple times.
4. After encountering this bug, refresh the page and it can be displayed normally.

ACTUAL The page shows "An unhandled error has occurred. Reload" with some errors in the console. There are some errors in the CMD:

EXPECTED There is no errors occurred when click on any instrument in the Metrics

Error Log

fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '-TokPq2Pv9IIxZmtTVk3osZ9fpL7OJcqGhh3kBUM-C0'.
      Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'replaceChildren')
TypeError: Cannot read properties of null (reading 'replaceChildren')
    at Module.initializeChart (
https://localhost:17167/js/app-metrics.js:11:23)
    at
https://localhost:17167/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (
https://localhost:17167/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (
https://localhost:17167/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (
https://localhost:17167/_framework/blazor.web.js:1:60316)
    at connection.onreceive (
https://localhost:17167/_framework/blazor.web.js:1:53957)
    at i.onmessage (
https://localhost:17167/_framework/blazor.web.js:1:82102)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
         at Aspire.Dashboard.Components.PlotlyChart.OnChartUpdated(List`1 traces, List`1 xValues, List`1 exemplars, Boolean tickUpdate, DateTimeOffset inProgressDataTime) in /_/src/Aspire.Dashboard/Components/Controls/Chart/PlotlyChart.razor.cs:line 78
         at Aspire.Dashboard.Components.Controls.Chart.ChartBase.UpdateChart(Boolean tickUpdate, DateTimeOffset inProgressDataTime) in /_/src/Aspire.Dashboard/Components/Controls/Chart/ChartBase.cs:line 505
         at Aspire.Dashboard.Components.Controls.Chart.ChartBase.OnAfterRenderAsync(Boolean firstRender) in /_/src/Aspire.Dashboard/Components/Controls/Chart/ChartBase.cs:line 93
         at Aspire.Dashboard.Components.PlotlyChart.OnAfterRenderAsync(Boolean firstRender) in /_/src/Aspire.Dashboard/Components/Controls/Chart/PlotlyChart.razor.cs:line 168
         at Microsoft.AspNetCo
```re.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[balachir]

@Rita003 thanks for reporting this issue. Based on your repro steps, I tried various things to try and reproduce this issue using Aspire 8.1 but I'm unable to get the issue to reproduce. For the next time you can get this to reproduce, is it possible to capture a small video of the issue? That might help us narrow down the problem.

[adamint]

@JamesNK how interesting that the element isn't in the document by the time initializeChart is called.

[JamesNK]

Added some safety checks in https://github.com/dotnet/aspire/pull/5031. Retry testing in 8.2 and see whether it is still an issue.