A step-by-step guide on integrating browser-side OpenTelemetry tracing from an Angular application into the .NET Aspire Dashboard, a feature newly supported in .NET 9. Covers configuring the Aspire AppHost to include an Angular project, enabling browser telemetry via the DOTNET_DASHBOARD_OTLP_HTTP_ENDPOINT_URL environment variable (which switches from gRPC to Protobuf over HTTP and configures CORS), updating Angular instrumentation to use the OTLP Protobuf exporter, and proxying trace requests through the Angular dev server with proper authentication headers. The result is end-to-end trace visibility from the Angular frontend through to the .NET backend API in the Aspire Dashboard.
Table of contents
OpenTelemetryConfiguring AspireAdd OpenTelemetry instrumentation to AngularConclusion4 Impressions