Investigate collecting Blazor specific runtime metrics from a Blazor WebAssembly app

[danroth27]

I only seem to be able to collect System.Runtime metrics from my Blazor WebAssembly app. We should investigate and document how to collect Blazor specific metrics too, like render diffs, page navigations, etc.

Repro steps:

• Install .NET 10 RC1 with the wasm-tools workload
• Clone https://github.com/danroth27/BlazorDiagnostics
• Run the app
• Browse to the Counter page
• In the browser dev console run globalThis.getDotnetRuntime(0).collectMetrics({durationSeconds: 5});
• Click on the counter to generate some runtime data
• Open the .nettrace file in VS

Expected result: Microsoft.AspNetCore.Components runtime metrics show up in the trace

Actual result: I only see System.Runtime metrics.

[pavelsavara]

By default we only collect System.Runtime metrics

https://github.com/dotnet/runtime/blob/main/src/mono/browser/runtime/diagnostics/client-commands.ts#L92-L93

I wonder if this would help

globalThis.getDotnetRuntime(0).collectMetrics({ durationSeconds: 5,
    extraProviders:[{
        keywords: [0, 0],
        logLevel: 4,
        provider_name: "System.Diagnostics.Metrics",
        arguments: "SessionId=SHARED;Metrics=Microsoft.AspNetCore.Components.Lifecycle;RefreshInterval=1;MaxTimeSeries=1000;MaxHistograms=10;ClientId=1fd85813-1574-45f8-8432-e38d5ba7cf5b;",
    }]
});

[javiercn]

@guardrex can you add this to the docs if it's not already present?

[guardrex]

We have it generally covered, but I'd like to add the example for this scenario to the article.

https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/webassembly-event-pipe-diagnostics?view=aspnetcore-10.0#how-to-observe-metrics-emmited-by-a-webassembly-app

[pavelsavara]

Please test it first, we don't know that it works

[guardrex]

Well ... for sure Microsoft.AspNetCore.Components.Lifecycle won't work ... "That's not a thing." - David Fowler 😆

[guardrex]

Ok ... I guess Microsoft.AspNetCore.Components.Lifecycle is the "lifecycle meter name." I was expecting a package/assembly name.

[guardrex]

@pavelsavara ... Data is collected, but IDK how to interpret if the command is working for the intended purpose of collecting Counter component data.

[guardrex]

@pavelsavara ... Also, why would the console tell me ...

TypeError: globalThis.getDotnetRuntime is not a function

... on a follow-up test run immediately after the command just worked in the console?

UPDATE: Ok ..... weird! 👽 .... I merely had to clear the console to get the command working again.

[guardrex]

@pavelsavara ... I'll place the PR now and ping you for review.

[pavelsavara]

@pavelsavara ... Data is collected, but IDK how to interpret if the command is working for the intended purpose of collecting Counter component data.

On your picture, the meter name is System.Runtime and you want to see Microsoft.AspNetCore.Components or Microsoft.AspNetCore.Components.Lifecycle there.

See
https://github.com/danroth27/BlazorDiagnostics/blob/7f30cb3823fb02b8ecdf6fb2e20d1a5640e8326a/BlazorDiagnostics/BlazorDiagnostics.Client/Program.cs#L9-L10