Standalone WebAssembly

Register in Program.cs

The host kind is detected: no ASP.NET Core hosting in the container and a browser underneath means WebAssembly, so the .NET pipeline runs here and exports with the browser's own fetch. The same exporters are handed to the browser script, unless an exporter sets IncludeInBrowser = false.

using Bit.Belemetry;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

builder.Services.AddBitBelemetryServices(options =>
{
    options.ServiceName = "MyApp";
    options.Environment = builder.HostEnvironment.Environment;

    options.AddOtlpExporter(o =>
    {
        o.Endpoint = new Uri("https://otel.example.com");
        o.Protocol = BelemetryOtlpProtocol.HttpProtobuf;
    });

    options.Traces.Sources.Add("MyApp*");
    options.Metrics.Meters.Add("MyApp");
});

await builder.Build().RunAsync();

The initializer in App.razor

<BelemetryInitializer /> imports the script, starts it with the configuration from Program.cs, and connects it to .NET: consent and the session are shared, and the unload flush is wired up. Place it once, next to the router.

@* App.razor *@
<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
</Router>

<BelemetryInitializer />

The optional script tag

Adding the module to index.html makes the browser download it in parallel with the .NET runtime instead of after it, and puts window.BitBelemetry on the page before Blazor starts. The script itself starts when <BelemetryInitializer /> hands it the configuration.

<!-- wwwroot/index.html -->
<head>
    ...
    <script type="module" src="_content/Bit.Belemetry/bit-belemetry.js"></script>
</head>

Endpoints and CORS

Everything is exported from the page's origin to the collector's, so the receiver has to allow the app's origin. For the OpenTelemetry Collector that is cors.allowed_origins on the OTLP HTTP receiver; for the .NET Aspire dashboard, DASHBOARD__OTLP__CORS__ALLOWEDORIGINS.

What runs where

HTTP calls made with .NET's HttpClient are traced by the .NET pipeline (the System.Net.Http source is on by default) and already carry a traceparent; the script sees that header and leaves those requests alone, so each call is recorded once.

API