Proposal: Document setting up OTEL with Blazor WebAssembly

[marshalhayes]

The existing documentation for enabling browser telemetry uses JavaScript. While this works, it may be simpler for those using Blazor WebAssembly to use the .NET OTEL packages.

---

How to add OTEL to Blazor WebAssembly

1. Add the OTEL packages to the WebAssembly project

     <ItemGroup>
       <PackageReference Include="OpenTelemetry" Version="1.14.0" />
       <PackageReference Include="OpenTelemetry.Api" Version="1.14.0" />
       <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.14.0" />
     </ItemGroup>

2. Configure OTEL in a client component

   @using OpenTelemetry
   @using OpenTelemetry.Resources
   @using OpenTelemetry.Trace
   @using System.Diagnostics
   
   <button type="button" @onclick="Trace">Trace</button>
   
   @code {
       private void Trace()
       {
           var resourceBuilder = ResourceBuilder.CreateDefault()
               .AddService("blazor-otel");
   
           using var otel = Sdk.CreateTracerProviderBuilder()
               .SetResourceBuilder(resourceBuilder)
               .AddSource("ui")
               .AddOtlpExporter(options =>
               {
                   options.Endpoint = new Uri("https://localhost:21036");
                   options.ExportProcessorType = ExportProcessorType.Simple;
               })
               .Build();
   
           using var source = new ActivitySource("ui");
           using (var activity = source.StartActivity("trace-click", ActivityKind.Client))
           {
               activity?.AddEvent(new ActivityEvent("Trace button click"));
           }
       }
   }

[marshalhayes]

The actual docs will likely include more information. The above is just an example of what I did to quickly test if this would even work.

[IEvangelist]

Hey @marshalhayes - what are your thoughts on this? #51

[marshalhayes]

Hey, thanks for taking a look at this so quickly!

This may prove to be more difficult than I thought. I think I got really lucky with the example I used.

A few notes (things I missed):

• We should set the protocol to OtlpExportProtocol.HttpProtobuf. The default looks like it's OtlpExportProtocol.Grpc which isn't supported in browsers.
• I'm curious of the use of Environment.GetEnvironmentVariable(...) here. Is that used for components that are using interactive auto render modes (rendered first on the server)? Maybe it would be simpler to just set the otlp exporter http endpoint in the WebAssembly project's appsettings.
• Should we also explicitly set the headers here as well? I'm not sure if WebAssembly projects make use of Aspire's service defaults like normal projects do. How would the API key get set client side, for example?