From 28889dc2376488c893de04835723bb9dd079e7ed Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Feb 2026 20:46:45 +0000
Subject: [PATCH 01/10] Initial plan


From 23efef3ae16d59af09666184596cefe3628c8465 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Feb 2026 20:53:46 +0000
Subject: [PATCH 02/10] Add Blazor WASM telemetry section and post-deployment
 telemetry docs

Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
---
 .../config/sidebar/dashboard.topics.ts        |   4 +
 .../dashboard/enable-browser-telemetry.mdx    | 137 +++++++++++++
 .../dashboard/telemetry-after-deployment.mdx  | 190 ++++++++++++++++++
 3 files changed, 331 insertions(+)
 create mode 100644 src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx

diff --git a/src/frontend/config/sidebar/dashboard.topics.ts b/src/frontend/config/sidebar/dashboard.topics.ts
index 45f5f773e..53316000b 100644
--- a/src/frontend/config/sidebar/dashboard.topics.ts
+++ b/src/frontend/config/sidebar/dashboard.topics.ts
@@ -221,5 +221,9 @@ export const dashboardTopics: StarlightSidebarTopicsUserConfig = {
       },
       slug: 'dashboard/microsoft-collected-dashboard-telemetry',
     },
+    {
+      label: 'Telemetry after deployment',
+      slug: 'dashboard/telemetry-after-deployment',
+    },
   ],
 };
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
index ede8144ac..8b2b5d225 100644
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
@@ -306,7 +306,144 @@ The bundling and minification of the JavaScript code is beyond the scope of this
 
 For the complete working example of how to configure the JavaScript OTEL SDK to send telemetry to the dashboard, see the [browser telemetry sample](https://github.com/dotnet/aspire/tree/main/playground/BrowserTelemetry).
 
+## Blazor WebAssembly integration
+
+Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime compiled to WebAssembly. Like other browser apps, Blazor WASM apps use the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the Aspire dashboard via JavaScript interop. The dashboard configuration for [OTLP HTTP](#otlp-configuration) and [CORS](#cors-configuration) described earlier in this article applies to Blazor WASM apps as well.
+
+### Provide OTEL configuration to the browser
+
+Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through an API endpoint on the server:
+
+```csharp title="C# — Program.cs (Server)"
+app.MapGet("/api/telemetry-config", () => new
+{
+    Endpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") ?? string.Empty,
+    Headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty,
+    ResourceAttributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES") ?? string.Empty
+})
+.AllowAnonymous();
+```
+
+<Aside type="caution">
+This approach exposes the OTLP API key to the browser in the HTTP response. For environments where the API key must remain secret, use an [authenticated OTEL proxy](#authenticated-otel-proxy) instead. In production, consider adding authentication or authorization to restrict access to this endpoint.
+</Aside>
+
+### Initialize OTEL from a Blazor component
+
+In the Blazor WASM app, call the JavaScript `initializeTelemetry` function using `IJSRuntime` after the component has rendered. Add the [JavaScript OTEL SDK initialization code](#example-browser-telemetry-code) to a JavaScript file bundled with your app, then call it from a Razor component:
+
+```razor title="Razor — TelemetryInitializer.razor (Client)"
+@inject IJSRuntime JS
+@inject HttpClient Http
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var config = await Http.GetFromJsonAsync<TelemetryConfig>("/api/telemetry-config");
+            if (config is { Endpoint.Length: > 0 })
+            {
+                await JS.InvokeVoidAsync(
+                    "initializeTelemetry",
+                    config.Endpoint,
+                    config.Headers,
+                    config.ResourceAttributes);
+            }
+        }
+    }
+
+    private sealed record TelemetryConfig(
+        string Endpoint,
+        string Headers,
+        string ResourceAttributes);
+}
+```
+
+Include this component in your `App.razor` or another top-level component so that telemetry is initialized when the app loads.
+
+### Backend-to-frontend trace correlation
+
+To correlate browser spans with server-side traces, include the current trace context in the server-rendered HTML. When the Blazor WASM app is hosted within a server-rendered page (such as a Blazor Web App with prerendering), the server can write the `traceparent` meta tag during prerender:
+
+```razor title="Razor — App.razor (Server prerender)"
+@using System.Diagnostics
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    @if (Activity.Current is { } currentActivity)
+    {
+        <meta name="traceparent" content="@currentActivity.Id" />
+    }
+    <!-- Other elements omitted for brevity... -->
+</head>
+```
+
+The JavaScript OTEL SDK reads this `traceparent` value automatically when `DocumentLoadInstrumentation` is registered, linking the browser spans to the originating server trace.
+
+### Authenticated OTEL proxy
+
+When the Aspire dashboard's OTLP API key must not be exposed to the browser, route telemetry through a server-side proxy endpoint. The browser sends telemetry to the proxy, and the proxy forwards it to the dashboard with the API key included as a server-side secret:
+
+```csharp title="C# — Program.cs (Server proxy endpoint)"
+// Register an HttpClient for the OTEL proxy
+builder.Services.AddHttpClient("otel-proxy");
+
+// ...
+
+app.MapPost("/api/telemetry/{**path}", async (
+    string path,
+    HttpContext context,
+    IHttpClientFactory httpClientFactory) =>
+{
+    var dashboardEndpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT");
+    if (string.IsNullOrEmpty(dashboardEndpoint))
+    {
+        return Results.NotFound();
+    }
+
+    var client = httpClientFactory.CreateClient("otel-proxy");
+
+    // Copy OTLP API key from server environment to forwarded request
+    var headersEnv = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty;
+    foreach (var header in headersEnv.Split(',', StringSplitOptions.RemoveEmptyEntries))
+    {
+        var parts = header.Split('=', 2);
+        if (parts.Length == 2)
+        {
+            client.DefaultRequestHeaders.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
+        }
+    }
+
+    using var requestBody = new StreamContent(context.Request.Body);
+    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
+        .Parse(context.Request.ContentType ?? "application/x-protobuf");
+
+    var response = await client.PostAsync(
+        $"{dashboardEndpoint.TrimEnd('/')}/{path}",
+        requestBody);
+
+    context.Response.StatusCode = (int)response.StatusCode;
+    await response.Content.CopyToAsync(context.Response.Body);
+    return Results.Empty;
+});
+```
+
+Configure the JavaScript OTEL SDK in the Blazor WASM app to point to the proxy endpoint instead of the dashboard directly:
+
+```javascript title="JavaScript — telemetry.js (Client)"
+export function initializeTelemetry(resourceAttributes) {
+    const otlpOptions = {
+        url: '/api/telemetry/v1/traces'  // Proxy endpoint, same origin - no CORS needed
+    };
+    // ... rest of SDK initialization
+}
+```
+
+This pattern eliminates the need for CORS configuration on the dashboard because the browser communicates only with the same-origin server. The API key stays on the server and is never visible to the browser.
+
 ## See also
 
 - [Aspire dashboard configuration](/dashboard/configuration/)
 - [Standalone Aspire dashboard](/dashboard/standalone/)
+- [Telemetry after deployment](/dashboard/telemetry-after-deployment/)
diff --git a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
new file mode 100644
index 000000000..3eecfdf64
--- /dev/null
+++ b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
@@ -0,0 +1,190 @@
+---
+title: Telemetry after deployment
+description: Understand how telemetry and the Aspire dashboard work after you deploy your app, and how to configure production-grade observability.
+---
+
+import { Aside, Steps } from '@astrojs/starlight/components';
+import LearnMore from '@components/LearnMore.astro';
+
+The Aspire dashboard is designed for local development and short-term diagnostics. It stores telemetry in memory, which means telemetry is lost when the dashboard restarts and there are built-in limits on how much data it retains. After deploying your app to a production environment, you need to configure a persistent telemetry backend.
+
+This article explains what changes when you deploy your app, how to configure production telemetry with Azure Monitor, and how to access the Aspire dashboard if it's included in your deployment.
+
+## Development vs. production telemetry
+
+During development, Aspire automatically starts the dashboard and configures your app's OTEL environment variables to send telemetry to it. This works well for local diagnostics but is not suitable for production for the following reasons:
+
+| | Aspire dashboard | Production telemetry backend |
+|---|---|---|
+| **Storage** | In-memory only | Persistent (database, cloud service) |
+| **Retention** | Lost on restart | Configurable (days, months, indefinitely) |
+| **Telemetry limits** | Default 10,000 log entries, 10,000 traces | Configurable or unlimited |
+| **Access** | Local or private | Secured, multi-user |
+| **Alerting** | None | Configurable alerts and dashboards |
+
+After deploying, configure your app to send telemetry to a persistent backend. Azure Monitor with Application Insights is the recommended production telemetry solution for Azure-hosted apps.
+
+## Configure Azure Monitor for production telemetry
+
+[Azure Monitor](https://learn.microsoft.com/azure/azure-monitor/overview) collects, analyzes, and responds to telemetry data from your cloud applications. Aspire has built-in support for Azure Application Insights, which is the Azure Monitor feature for application telemetry.
+
+### Add Application Insights to your AppHost
+
+Add the Application Insights resource to your AppHost project:
+
+```csharp title="C# — AppHost.cs"
+var builder = DistributedApplication.CreateBuilder(args);
+
+var insights = builder.AddAzureApplicationInsights("app-insights");
+
+builder.AddProject<Projects.MyApp_ApiService>("apiservice")
+    .WithReference(insights);
+
+builder.AddProject<Projects.MyApp_Web>("webfrontend")
+    .WithReference(insights)
+    .WithExternalHttpEndpoints();
+
+builder.Build().Run();
+```
+
+When you reference Application Insights, Aspire automatically configures the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable for each service. The `Microsoft.Extensions.Azure` OTEL integration reads this variable and sends telemetry to Application Insights.
+
+<Aside type="note">
+The Application Insights resource provisions an Azure Application Insights component. Provisioning requires an active Azure subscription. When running locally, telemetry is sent to the Aspire dashboard as usual unless a real connection string is present.
+</Aside>
+
+### Use OpenTelemetry with Azure Monitor
+
+Add the [📦 Azure.Monitor.OpenTelemetry.AspNetCore](https://www.nuget.org/packages/Azure.Monitor.OpenTelemetry.AspNetCore) package to each service project to enable OTEL-based export to Azure Monitor:
+
+```csharp title="C# — Program.cs (service)"
+var builder = WebApplication.CreateBuilder(args);
+
+builder.AddServiceDefaults();
+
+// Add Azure Monitor OTEL export when connection string is available
+builder.Services.AddOpenTelemetry()
+    .UseAzureMonitor();
+```
+
+Aspire's service defaults already configure OpenTelemetry. The `UseAzureMonitor()` call adds Azure Monitor as an additional exporter. When the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable is set (which Aspire does automatically when the resource is referenced), telemetry flows to Azure Monitor.
+
+<LearnMore>
+For more information, see [Azure Monitor OpenTelemetry documentation](https://learn.microsoft.com/azure/azure-monitor/app/opentelemetry-enable).
+</LearnMore>
+
+## Troubleshoot missing logs after deployment
+
+If some or all logs don't appear in your telemetry backend after deployment, check the following common causes.
+
+### OTEL environment variables not set
+
+Verify that the OTEL environment variables are correctly set in your deployed containers. When deploying to Azure Container Apps, Aspire sets these variables automatically when you use `WithReference` for Application Insights or when the OTEL endpoint is configured.
+
+Check for these environment variables in your deployed container:
+
+- `OTEL_EXPORTER_OTLP_ENDPOINT`: The OTLP endpoint receiving telemetry.
+- `OTEL_EXPORTER_OTLP_HEADERS`: Headers including the API key (if required).
+- `APPLICATIONINSIGHTS_CONNECTION_STRING`: Application Insights connection string (when using Azure Monitor).
+
+For Azure Container Apps deployments, verify variables in the [Azure Portal](https://portal.azure.com) by navigating to your Container App → **Containers** → **Environment variables**.
+
+### Telemetry not exported from the app
+
+Verify that your app is configured to export telemetry. All service projects should call `AddServiceDefaults()` in their `Program.cs`, which sets up OpenTelemetry:
+
+```csharp title="C# — Program.cs"
+var builder = WebApplication.CreateBuilder(args);
+
+// This configures OpenTelemetry with logging, metrics, and tracing
+builder.AddServiceDefaults();
+```
+
+If you're not using Aspire service defaults, ensure your app is configured with the OpenTelemetry SDK and an appropriate exporter.
+
+### Telemetry sampled out
+
+The OpenTelemetry SDK may sample traces, meaning not every request produces a trace. By default, Aspire's service defaults configure 100% sampling for development. In production, check your sampling configuration.
+
+### Transport protocol mismatch
+
+The Aspire dashboard supports both gRPC OTLP (port 18889) and HTTP OTLP (port 18890). Most cloud-hosted OTLP endpoints require HTTP. Verify that the protocol in `OTEL_EXPORTER_OTLP_PROTOCOL` matches the endpoint:
+
+- Use `grpc` for the Aspire dashboard's gRPC OTLP endpoint.
+- Use `http/protobuf` for HTTP OTLP endpoints (required for browser apps and many cloud services).
+
+## Dashboard access after deployment
+
+When you deploy an Aspire app to Azure Container Apps using `aspire deploy`, the Aspire dashboard is included as a container app in your deployment. This gives you a familiar UI for viewing telemetry from your deployed app.
+
+<Aside type="caution">
+The deployed Aspire dashboard stores telemetry in memory. Telemetry is lost each time the dashboard container restarts. For persistent telemetry, configure Azure Monitor in addition to the dashboard.
+</Aside>
+
+### Find the dashboard URL
+
+After a successful `aspire deploy`, the dashboard URL is included in the deployment output. It typically appears as a Container App URL, for example:
+
+```plaintext data-disable-copy
+Dashboard URL: https://aspire-dashboard.wonderfulcoast-abc12345.eastus.azurecontainerapps.io
+```
+
+You can also find the URL in the [Azure Portal](https://portal.azure.com) by navigating to your resource group, locating the Container App named `aspire-dashboard` (or similar), and finding its **Application URL** on the Overview page.
+
+### Authenticate with the login token
+
+The deployed dashboard requires a login token, just like the standalone dashboard. The token is displayed in the dashboard container's logs.
+
+<Steps>
+
+1. In the Azure Portal, navigate to your `aspire-dashboard` Container App.
+
+2. Select **Monitoring** → **Log stream** from the left navigation.
+
+3. Look for a log line containing `login?t=`, for example:
+
+    ```plaintext data-disable-copy
+    Login to the dashboard at https://aspire-dashboard.example.com/login?t=abc123...
+    ```
+
+4. Copy the token value (the part after `t=`) and use it to log in at the dashboard URL.
+
+</Steps>
+
+### Configure a fixed login token
+
+By default, the dashboard generates a new token each time it starts. To set a fixed token, configure the `Dashboard:Frontend:BrowserToken` setting using an environment variable:
+
+```csharp title="C# — AppHost.cs"
+var dashboard = builder.AddAzureContainerAppEnvironment("aspire-env")
+    .WithDashboard();
+```
+
+Or set the environment variable directly on the dashboard container app after deployment using the Azure CLI:
+
+```azurecli title="Azure CLI — Set dashboard token"
+az containerapp update \
+  --name aspire-dashboard \
+  --resource-group my-resource-group \
+  --set-env-vars "DASHBOARD__FRONTEND__BROWSERTOKEN=my-secret-token"
+```
+
+<Aside type="caution">
+Use a secure, randomly generated token. Anyone with the token can view sensitive telemetry data including environment variables, connection strings, and runtime data from your app.
+</Aside>
+
+### Use OpenID Connect authentication
+
+For team access to the deployed dashboard, configure OpenID Connect (OIDC) authentication instead of browser token auth. This allows multiple users to log in with their organizational identity provider.
+
+<LearnMore>
+For more information on configuring OIDC, see [Aspire dashboard configuration: Frontend](/dashboard/configuration/#frontend).
+</LearnMore>
+
+## See also
+
+- [Aspire dashboard configuration](/dashboard/configuration/)
+- [Aspire dashboard security considerations](/dashboard/security-considerations/)
+- [Enable browser telemetry](/dashboard/enable-browser-telemetry/)
+- [Deploy using the Aspire CLI](/deployment/azure/aca-deployment-aspire-cli/)
+- [Azure Monitor OpenTelemetry documentation](https://learn.microsoft.com/azure/azure-monitor/app/opentelemetry-enable)

From a88f5f8cb23e9e208d0d368e1b689e977e979f18 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 23 Feb 2026 17:15:10 +0000
Subject: [PATCH 03/10] Fix doc-tester issues: remove fictional API, fix
 package attribution, improve URL guidance

Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
---
 .../dashboard/telemetry-after-deployment.mdx  | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
index 3eecfdf64..7baf645e7 100644
--- a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
+++ b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
@@ -47,7 +47,7 @@ builder.AddProject<Projects.MyApp_Web>("webfrontend")
 builder.Build().Run();
 ```
 
-When you reference Application Insights, Aspire automatically configures the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable for each service. The `Microsoft.Extensions.Azure` OTEL integration reads this variable and sends telemetry to Application Insights.
+When you reference Application Insights, Aspire automatically configures the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable for each service. The `Azure.Monitor.OpenTelemetry.AspNetCore` package (via `UseAzureMonitor()`) reads this variable and sends telemetry to Application Insights.
 
 <Aside type="note">
 The Application Insights resource provisions an Azure Application Insights component. Provisioning requires an active Azure subscription. When running locally, telemetry is sent to the Aspire dashboard as usual unless a real connection string is present.
@@ -123,13 +123,19 @@ The deployed Aspire dashboard stores telemetry in memory. Telemetry is lost each
 
 ### Find the dashboard URL
 
-After a successful `aspire deploy`, the dashboard URL is included in the deployment output. It typically appears as a Container App URL, for example:
+After a successful `aspire deploy`, the deployment output includes URLs for your deployed resources. Look for a Container App named `aspire-dashboard` (or similar) in the output. The exact format varies depending on the environment name you configured.
 
-```plaintext data-disable-copy
-Dashboard URL: https://aspire-dashboard.wonderfulcoast-abc12345.eastus.azurecontainerapps.io
-```
+You can also find the URL in the [Azure Portal](https://portal.azure.com) by navigating to your resource group, locating the Container App for the Aspire dashboard, and finding its **Application URL** on the Overview page.
+
+Alternatively, use the Azure CLI:
 
-You can also find the URL in the [Azure Portal](https://portal.azure.com) by navigating to your resource group, locating the Container App named `aspire-dashboard` (or similar), and finding its **Application URL** on the Overview page.
+```azurecli title="Azure CLI — Get dashboard URL"
+az containerapp show \
+  --name aspire-dashboard \
+  --resource-group my-resource-group \
+  --query properties.configuration.ingress.fqdn \
+  --output tsv
+```
 
 ### Authenticate with the login token
 
@@ -153,14 +159,7 @@ The deployed dashboard requires a login token, just like the standalone dashboar
 
 ### Configure a fixed login token
 
-By default, the dashboard generates a new token each time it starts. To set a fixed token, configure the `Dashboard:Frontend:BrowserToken` setting using an environment variable:
-
-```csharp title="C# — AppHost.cs"
-var dashboard = builder.AddAzureContainerAppEnvironment("aspire-env")
-    .WithDashboard();
-```
-
-Or set the environment variable directly on the dashboard container app after deployment using the Azure CLI:
+By default, the dashboard generates a new token each time it starts. To set a fixed token, configure the `Dashboard:Frontend:BrowserToken` setting on the dashboard container app after deployment using the Azure CLI:
 
 ```azurecli title="Azure CLI — Set dashboard token"
 az containerapp update \

From a44b51035e390c2e68198286aaf39cef7bfc327d Mon Sep 17 00:00:00 2001
From: David Pine <david.pine@microsoft.com>
Date: Fri, 6 Mar 2026 07:27:41 -0600
Subject: [PATCH 04/10] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../config/sidebar/dashboard.topics.ts        | 19 +++++++++++++++++++
 .../dashboard/enable-browser-telemetry.mdx    |  7 ++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/frontend/config/sidebar/dashboard.topics.ts b/src/frontend/config/sidebar/dashboard.topics.ts
index 53316000b..d245b447f 100644
--- a/src/frontend/config/sidebar/dashboard.topics.ts
+++ b/src/frontend/config/sidebar/dashboard.topics.ts
@@ -223,6 +223,25 @@ export const dashboardTopics: StarlightSidebarTopicsUserConfig = {
     },
     {
       label: 'Telemetry after deployment',
+      translations: {
+        da: 'Telemetri efter implementering',
+        de: 'Telemetrie nach der Bereitstellung',
+        en: 'Telemetry after deployment',
+        es: 'Telemetría después de la implementación',
+        fr: 'Télémétrie après le déploiement',
+        hi: 'परिनियोजन के बाद टेलीमेट्री',
+        id: 'Telemetri setelah penerapan',
+        it: 'Telemetria dopo la distribuzione',
+        ja: 'デプロイ後のテレメトリ',
+        ko: '배포 후 텔레메트리',
+        pt: 'Telemetria após a implantação',
+        'pt-BR': 'Telemetria após a implantação',
+        'pt-PT': 'Telemetria após a implementação',
+        ru: 'Телеметрия после развертывания',
+        tr: 'Dağıtımdan sonra telemetri',
+        uk: 'Телеметрія після розгортання',
+        'zh-CN': '部署后的遥测',
+      },
       slug: 'dashboard/telemetry-after-deployment',
     },
   ],
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
index 8b2b5d225..916555d96 100644
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
@@ -315,13 +315,14 @@ Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime
 Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through an API endpoint on the server:
 
 ```csharp title="C# — Program.cs (Server)"
-app.MapGet("/api/telemetry-config", () => new
+using Microsoft.AspNetCore.Authorization;
+
+app.MapGet("/api/telemetry-config", [Authorize] () => new
 {
     Endpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") ?? string.Empty,
     Headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty,
     ResourceAttributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES") ?? string.Empty
-})
-.AllowAnonymous();
+});
 ```
 
 <Aside type="caution">

From 2fdf287f36e499a9a4a6ca55fe39b11c81371924 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 16:00:47 +0000
Subject: [PATCH 05/10] Apply @alistairmatthews review suggestions: wording,
 proxy fix, and phrasing improvements

Co-authored-by: alistairmatthews <41286777+alistairmatthews@users.noreply.github.com>
---
 .../dashboard/enable-browser-telemetry.mdx    | 25 +++++++++++--------
 .../dashboard/telemetry-after-deployment.mdx  | 24 +++++++++---------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
index 916555d96..2c04b6257 100644
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
@@ -365,7 +365,7 @@ Include this component in your `App.razor` or another top-level component so tha
 
 ### Backend-to-frontend trace correlation
 
-To correlate browser spans with server-side traces, include the current trace context in the server-rendered HTML. When the Blazor WASM app is hosted within a server-rendered page (such as a Blazor Web App with prerendering), the server can write the `traceparent` meta tag during prerender:
+To correlate browser spans with server-side traces, include the current trace context in the server-rendered HTML. When the Blazor WASM app is hosted within a server-rendered page, such as a Blazor Web App with prerendering, the server can write the `traceparent` meta tag during prerender:
 
 ```razor title="Razor — App.razor (Server prerender)"
 @using System.Diagnostics
@@ -405,24 +405,29 @@ app.MapPost("/api/telemetry/{**path}", async (
 
     var client = httpClientFactory.CreateClient("otel-proxy");
 
-    // Copy OTLP API key from server environment to forwarded request
+    using var requestBody = new StreamContent(context.Request.Body);
+    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
+        .Parse(context.Request.ContentType ?? "application/x-protobuf");
+
+    using var request = new HttpRequestMessage(
+        HttpMethod.Post,
+        $"{dashboardEndpoint.TrimEnd('/')}/{path}")
+    {
+        Content = requestBody
+    };
+
+    // Copy OTLP API key from server environment to the forwarded request
     var headersEnv = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty;
     foreach (var header in headersEnv.Split(',', StringSplitOptions.RemoveEmptyEntries))
     {
         var parts = header.Split('=', 2);
         if (parts.Length == 2)
         {
-            client.DefaultRequestHeaders.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
+            request.Headers.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
         }
     }
 
-    using var requestBody = new StreamContent(context.Request.Body);
-    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
-        .Parse(context.Request.ContentType ?? "application/x-protobuf");
-
-    var response = await client.PostAsync(
-        $"{dashboardEndpoint.TrimEnd('/')}/{path}",
-        requestBody);
+    var response = await client.SendAsync(request);
 
     context.Response.StatusCode = (int)response.StatusCode;
     await response.Content.CopyToAsync(context.Response.Body);
diff --git a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
index 7baf645e7..3712d87bf 100644
--- a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
+++ b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
@@ -10,7 +10,7 @@ The Aspire dashboard is designed for local development and short-term diagnostic
 
 This article explains what changes when you deploy your app, how to configure production telemetry with Azure Monitor, and how to access the Aspire dashboard if it's included in your deployment.
 
-## Development vs. production telemetry
+## Development versus production telemetry
 
 During development, Aspire automatically starts the dashboard and configures your app's OTEL environment variables to send telemetry to it. This works well for local diagnostics but is not suitable for production for the following reasons:
 
@@ -47,7 +47,7 @@ builder.AddProject<Projects.MyApp_Web>("webfrontend")
 builder.Build().Run();
 ```
 
-When you reference Application Insights, Aspire automatically configures the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable for each service. The `Azure.Monitor.OpenTelemetry.AspNetCore` package (via `UseAzureMonitor()`) reads this variable and sends telemetry to Application Insights.
+When you reference Application Insights, Aspire automatically configures the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable for each service. The `Azure.Monitor.OpenTelemetry.AspNetCore` package uses the `UseAzureMonitor()` method to read this variable and send telemetry to Application Insights.
 
 <Aside type="note">
 The Application Insights resource provisions an Azure Application Insights component. Provisioning requires an active Azure subscription. When running locally, telemetry is sent to the Aspire dashboard as usual unless a real connection string is present.
@@ -67,7 +67,7 @@ builder.Services.AddOpenTelemetry()
     .UseAzureMonitor();
 ```
 
-Aspire's service defaults already configure OpenTelemetry. The `UseAzureMonitor()` call adds Azure Monitor as an additional exporter. When the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable is set (which Aspire does automatically when the resource is referenced), telemetry flows to Azure Monitor.
+Aspire's service defaults already configure OpenTelemetry. The `UseAzureMonitor()` call adds Azure Monitor as an additional exporter. When the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable is set, which Aspire does automatically when you reference the resource, telemetry flows to Azure Monitor.
 
 <LearnMore>
 For more information, see [Azure Monitor OpenTelemetry documentation](https://learn.microsoft.com/azure/azure-monitor/app/opentelemetry-enable).
@@ -79,15 +79,15 @@ If some or all logs don't appear in your telemetry backend after deployment, che
 
 ### OTEL environment variables not set
 
-Verify that the OTEL environment variables are correctly set in your deployed containers. When deploying to Azure Container Apps, Aspire sets these variables automatically when you use `WithReference` for Application Insights or when the OTEL endpoint is configured.
+Verify that the OTEL environment variables are correctly set in your deployed containers. When deploying to Azure Container Apps, Aspire sets these variables automatically when you use `WithReference` for Application Insights or when you configure the OTEL endpoint.
 
 Check for these environment variables in your deployed container:
 
 - `OTEL_EXPORTER_OTLP_ENDPOINT`: The OTLP endpoint receiving telemetry.
-- `OTEL_EXPORTER_OTLP_HEADERS`: Headers including the API key (if required).
-- `APPLICATIONINSIGHTS_CONNECTION_STRING`: Application Insights connection string (when using Azure Monitor).
+- `OTEL_EXPORTER_OTLP_HEADERS`: Headers including the API key, if required.
+- `APPLICATIONINSIGHTS_CONNECTION_STRING`: Application Insights connection string, when using Azure Monitor.
 
-For Azure Container Apps deployments, verify variables in the [Azure Portal](https://portal.azure.com) by navigating to your Container App → **Containers** → **Environment variables**.
+For Azure Container Apps deployments, verify variables in the [Azure Portal](https://portal.azure.com) by navigating to your Container app → **Containers** → **Environment variables**.
 
 ### Telemetry not exported from the app
 
@@ -102,9 +102,9 @@ builder.AddServiceDefaults();
 
 If you're not using Aspire service defaults, ensure your app is configured with the OpenTelemetry SDK and an appropriate exporter.
 
-### Telemetry sampled out
+### Telemetry sampling missed an event
 
-The OpenTelemetry SDK may sample traces, meaning not every request produces a trace. By default, Aspire's service defaults configure 100% sampling for development. In production, check your sampling configuration.
+To ensure that the OpenTelemetry SDK doesn't flood logs with too much data, you can configure it to sample a proportion of traces, so that not every request produces a trace. By default, Aspire's service defaults configure 100% sampling for development. In production, check your sampling configuration.
 
 ### Transport protocol mismatch
 
@@ -123,9 +123,9 @@ The deployed Aspire dashboard stores telemetry in memory. Telemetry is lost each
 
 ### Find the dashboard URL
 
-After a successful `aspire deploy`, the deployment output includes URLs for your deployed resources. Look for a Container App named `aspire-dashboard` (or similar) in the output. The exact format varies depending on the environment name you configured.
+After a successful `aspire deploy`, the deployment output includes URLs for your deployed resources. Look for a Container App named `aspire-dashboard` or similar in the output. The exact format varies depending on the environment name you configured.
 
-You can also find the URL in the [Azure Portal](https://portal.azure.com) by navigating to your resource group, locating the Container App for the Aspire dashboard, and finding its **Application URL** on the Overview page.
+You can also find the URL in the [Azure Portal](https://portal.azure.com) by navigating to your resource group, locating the Container App for the Aspire dashboard, and finding its **Application URL** on the **Overview** page.
 
 Alternatively, use the Azure CLI:
 
@@ -174,7 +174,7 @@ Use a secure, randomly generated token. Anyone with the token can view sensitive
 
 ### Use OpenID Connect authentication
 
-For team access to the deployed dashboard, configure OpenID Connect (OIDC) authentication instead of browser token auth. This allows multiple users to log in with their organizational identity provider.
+For team access to the deployed dashboard, configure OpenID Connect (OIDC) authentication instead of browser token authentication. This allows multiple users to log in with their organizational identity provider.
 
 <LearnMore>
 For more information on configuring OIDC, see [Aspire dashboard configuration: Frontend](/dashboard/configuration/#frontend).

From 3aa68ca89c94e4198a2f0a035f01236c13382e04 Mon Sep 17 00:00:00 2001
From: AJ Matthews <alistair.matthews@civica.co.uk>
Date: Wed, 25 Mar 2026 14:40:42 +0000
Subject: [PATCH 06/10] Specified trivy.v0.35.0 to resolve security scan check
 failure.

---
 .github/workflows/security-scan.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/security-scan.yml b/.github/workflows/security-scan.yml
index 7c0ad6c7b..b55204abc 100644
--- a/.github/workflows/security-scan.yml
+++ b/.github/workflows/security-scan.yml
@@ -46,7 +46,7 @@ jobs:
       continue-on-error: true
 
     - name: Trivy filesystem vulnerability scan (SARIF)
-      uses: aquasecurity/trivy-action@0.24.0
+      uses: aquasecurity/trivy-action@0.35.0
       with:
         scan-type: fs
         format: sarif

From aaa9d61b8e055f6a4e40802461243bb6ef4360b4 Mon Sep 17 00:00:00 2001
From: Alistair Matthews <alistair.matthews@civica.co.uk>
Date: Wed, 8 Apr 2026 14:39:55 +0100
Subject: [PATCH 07/10] Update
 src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx

Co-authored-by: David Pine <david.pine@microsoft.com>
---
 .../content/docs/dashboard/enable-browser-telemetry.mdx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
index cff623b62..5ca8902a5 100644
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
@@ -317,11 +317,11 @@ Blazor WASM apps can't read server-side environment variables directly. When the
 ```csharp title="C# — Program.cs (Server)"
 using Microsoft.AspNetCore.Authorization;
 
-app.MapGet("/api/telemetry-config", [Authorize] () => new
+app.MapGet("/api/telemetry-config", [Authorize] (IConfiguration config) => new
 {
-    Endpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") ?? string.Empty,
-    Headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty,
-    ResourceAttributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES") ?? string.Empty
+    Endpoint = config.GetValue<string>("OTEL_EXPORTER_OTLP_ENDPOINT", ""),
+    Headers = config.GetValue<string>("OTEL_EXPORTER_OTLP_HEADERS", ""),
+    ResourceAttributes = config.GetValue<string>("OTEL_RESOURCE_ATTRIBUTES", "")
 });
 ```
 

From b5e26e64b4696b6deceade1088ff217ed8663fad Mon Sep 17 00:00:00 2001
From: Alistair Matthews <alistair.matthews@civica.co.uk>
Date: Wed, 8 Apr 2026 14:40:22 +0100
Subject: [PATCH 08/10] Update
 src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx

Co-authored-by: David Pine <david.pine@microsoft.com>
---
 .../src/content/docs/dashboard/telemetry-after-deployment.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
index 3712d87bf..64fe3d1dd 100644
--- a/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
+++ b/src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx
@@ -129,7 +129,7 @@ You can also find the URL in the [Azure Portal](https://portal.azure.com) by nav
 
 Alternatively, use the Azure CLI:
 
-```azurecli title="Azure CLI — Get dashboard URL"
+```bash title="Azure CLI — Get dashboard URL"
 az containerapp show \
   --name aspire-dashboard \
   --resource-group my-resource-group \

From 2edce45315772c07699edf92102f35d41530baac Mon Sep 17 00:00:00 2001
From: AJ Matthews <alistair.matthews@civica.co.uk>
Date: Wed, 8 Apr 2026 16:23:24 +0100
Subject: [PATCH 09/10] Split the browser telemetry doc into three,
 implementing feedback from @JamesNK.

---
 .../config/sidebar/dashboard.topics.ts        |  15 +-
 .../dashboard/enable-browser-telemetry.mdx    | 455 ------------------
 .../blazor-webassembly.mdx                    | 155 ++++++
 .../browser-app-configuration.mdx             | 152 ++++++
 .../enable-browser-telemetry/index.mdx        | 191 ++++++++
 5 files changed, 512 insertions(+), 456 deletions(-)
 delete mode 100644 src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
 create mode 100644 src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
 create mode 100644 src/frontend/src/content/docs/dashboard/enable-browser-telemetry/browser-app-configuration.mdx
 create mode 100644 src/frontend/src/content/docs/dashboard/enable-browser-telemetry/index.mdx

diff --git a/src/frontend/config/sidebar/dashboard.topics.ts b/src/frontend/config/sidebar/dashboard.topics.ts
index 87aaf11fe..90f98e5bb 100644
--- a/src/frontend/config/sidebar/dashboard.topics.ts
+++ b/src/frontend/config/sidebar/dashboard.topics.ts
@@ -219,7 +219,20 @@ export const dashboardTopics: StarlightSidebarTopicsUserConfig = {
         uk: 'Увімкнути телеметрію браузера',
         'zh-CN': '启用浏览器遥测',
       },
-      slug: 'dashboard/enable-browser-telemetry',
+      items: [
+        {
+          label: 'Overview',
+          slug: 'dashboard/enable-browser-telemetry',
+        },
+        {
+          label: 'Browser app configuration',
+          slug: 'dashboard/enable-browser-telemetry/browser-app-configuration',
+        },
+        {
+          label: 'Blazor WebAssembly integration',
+          slug: 'dashboard/enable-browser-telemetry/blazor-webassembly',
+        },
+      ],
     },
     {
       label: 'Microsoft telemetry',
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
deleted file mode 100644
index cff623b62..000000000
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx
+++ /dev/null
@@ -1,455 +0,0 @@
----
-title: Enable browser telemetry
-description: Learn how to enable browser telemetry in the Aspire dashboard.
----
-
-import LearnMore from '@components/LearnMore.astro';
-import { Aside } from '@astrojs/starlight/components';
-import OsAwareTabs from '@components/OsAwareTabs.astro';
-
-The Aspire dashboard can be configured to receive telemetry sent from browser apps. This feature is useful for monitoring client-side performance and user interactions. Browser telemetry requires additional dashboard configuration and that the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) is added to the browser apps.
-
-This article discusses how to enable browser telemetry in the Aspire dashboard.
-
-## Dashboard configuration
-
-Browser telemetry requires the dashboard to enable these features:
-
-- OTLP HTTP endpoint. This endpoint is used by the dashboard to receive telemetry from browser apps.
-- Cross-origin resource sharing (CORS). CORS allows browser apps to make requests to the dashboard.
-
-### OTLP configuration
-
-The Aspire dashboard receives telemetry through OTLP endpoints. [HTTP OTLP endpoints](https://opentelemetry.io/docs/specs/otlp/#otlphttp) and gRPC OTLP endpoints are supported by the dashboard. Browser apps must use HTTP OLTP to send telemetry to the dashboard because browser apps don't support gRPC.
-
-To configure the gPRC or HTTP endpoints, specify the following environment variables:
-
-- `ASPIRE_DASHBOARD_OTLP_ENDPOINT_URL`: The gRPC endpoint to which the dashboard connects for its data.
-- `ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL`: The HTTP endpoint to which the dashboard connects for its data.
-
-Configuration of the HTTP OTLP endpoint depends on whether the dashboard is started by the AppHost or is run standalone.
-
-#### Configure OTLP HTTP with AppHost
-
-If the dashboard and your app are started by the AppHost, the dashboard OTLP endpoints are configured in the AppHost's _launchSettings.json_ file.
-
-Consider the following example _launchSettings.json_ file:
-
-```json title="JSON — launchSettings.json" {12,25}
-{
-  "$schema": "http://json.schemastore.org/launchsettings.json",
-  "profiles": {
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "https://localhost:15887;http://localhost:15888",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development",
-        "DOTNET_ENVIRONMENT": "Development",
-        "ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "https://localhost:16175",
-        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:17037",
-        "ASPIRE_SHOW_DASHBOARD_RESOURCES": "true"
-      }
-    },
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "http://localhost:15888",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development",
-        "DOTNET_ENVIRONMENT": "Development",
-        "ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "http://localhost:16175",
-        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:17037",
-        "ASPIRE_SHOW_DASHBOARD_RESOURCES": "true",
-        "ASPIRE_ALLOW_UNSECURED_TRANSPORT": "true"
-      }
-    },
-    "generate-manifest": {
-      "commandName": "Project",
-      "launchBrowser": true,
-      "dotnetRunMessages": true,
-      "commandLineArgs": "--publisher manifest --output-path aspire-manifest.json",
-      "applicationUrl": "http://localhost:15888",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development",
-        "DOTNET_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}
-```
-
-The preceding launch settings JSON file configures all profiles to include the `ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL` environment variable.
-
-#### Configure OTLP HTTP with standalone dashboard
-
-If the dashboard is used standalone, without the rest of Aspire, the OTLP HTTP endpoint is enabled by default on port `18890`. However, the port must be mapped when the dashboard container is started:
-
-<OsAwareTabs syncKey="terminal">
-<div slot="unix">
-
-```bash
-docker run --rm -it -d \
-    -p 18888:18888 \
-    -p 4317:18889 \
-    -p 4318:18890 \
-    --name aspire-dashboard \
-    mcr.microsoft.com/dotnet/aspire-dashboard:latest
-```
-
-</div>
-<div slot="windows">
-
-```powershell
-docker run --rm -it -d `
-    -p 18888:18888 `
-    -p 4317:18889 `
-    -p 4318:18890 `
-    --name aspire-dashboard `
-    mcr.microsoft.com/dotnet/aspire-dashboard:latest
-```
-
-</div>
-</OsAwareTabs>
-
-The preceding command runs the dashboard container and maps gRPC OTLP to port `4317` and HTTP OTLP to port `4318`.
-
-### CORS configuration
-
-By default, browser apps are restricted from making cross domain API calls. This impacts sending telemetry to the dashboard because the dashboard and the browser app are always on different domains. Configuring CORS in the Aspire dashboard removes the restriction.
-
-If the dashboard and your app are started by the AppHost, no CORS configuration is required. Aspire automatically configures the dashboard to allow all resource origins.
-
-If the dashboard is used standlone then CORS must be configured manually. The domain used to view the browser app must be configured as an allowed origin by specifing the `DASHBOARD__OTLP__CORS__ALLOWEDORIGINS` environment variable when the dashboard container is started.
-
-<OsAwareTabs syncKey="terminal">
-<div slot="unix">
-
-```bash
-docker run --rm -it -d \
-    -p 18888:18888 \
-    -p 4317:18889 \
-    -p 4318:18890 \
-    -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=https://localhost:8080 \
-    --name aspire-dashboard \
-    mcr.microsoft.com/dotnet/aspire-dashboard:latest
-```
-
-</div>
-<div slot="windows">
-
-```powershell
-docker run --rm -it -d `
-    -p 18888:18888 `
-    -p 4317:18889 `
-    -p 4318:18890 `
-    -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=https://localhost:8080 `
-    --name aspire-dashboard `
-    mcr.microsoft.com/dotnet/aspire-dashboard:latest
-```
-
-</div>
-</OsAwareTabs>
-
-The preceding command runs the dashboard container and configures `https://localhost:8080` as an allowed origin. That means a browser app that is accessed using `https://localhost:8080` has permission to send the dashboard telemetry.
-
-Multiple origins can be allowed with a comma separated value. Or all origins can be allowed with the `*` wildcard. For example, `DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=*`.
-
-<LearnMore>
-For more information, see [Aspire dashboard configuration: OTLP CORS](configuration#otlp-cors).
-</LearnMore>
-
-### OTLP endpoint security
-
-Dashboard OTLP endpoints can be secured with API key authentication. When enabled, HTTP OTLP requests to the dashboard must include the API key as the `x-otlp-api-key` header. By default a new API key is generated each time the dashboard is run.
-
-API key authentication is automatically enabled when the dashboard is run from the AppHost. Dashboard authentication can be disabled by setting `ASPIRE_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS` to `true` in the AppHost's _launchSettings.json_ file.
-
-OTLP endpoints are unsecured by default in the standalone dashboard.
-
-## Browser app configuration
-
-A browser app uses the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the dashboard. Successfully sending telemetry to the dashboard requires the SDK to be correctly configured.
-
-### OTLP exporter
-
-OTLP exporters must be included in the browser app and configured with the SDK. For example, exporting distributed tracing with OTLP uses the [@opentelemetry/exporter-trace-otlp-proto](https://www.npmjs.com/package/@opentelemetry/exporter-trace-otlp-proto) package.
-
-When OTLP is added to the SDK, OTLP options must be specified. OTLP options includes:
-
-- `url`: The address that HTTP OTLP requests are made to. The address should be the dashboard HTTP OTLP endpoint and the path to the OTLP HTTP API. For example, `https://localhost:4318/v1/traces` for the trace OTLP exporter. If the browser app is launched by the AppHost then the HTTP OTLP endpoint is available from the `OTEL_EXPORTER_OTLP_ENDPOINT` environment variable.
-
-- `headers`: The headers sent with requests. If OTLP endpoint API key authentication is enabled the `x-otlp-api-key` header must be sent with OTLP requests. If the browser app is launched by the AppHost then the API key is available from the `OTEL_EXPORTER_OTLP_HEADERS` environment variable.
-
-### Browser metadata
-
-When a browser app is configured to collect distributed traces, the browser app can set the trace parent a browser's spans using the `meta` element in the HTML. The value of the `name="traceparent"` meta element should correspond to the current trace.
-
-In a .NET app, for example, the trace parent value would likely be assigned from the `Activity.Current` and passing its `Activity.Id` value as the `content`. For example, consider the following Razor code:
-
-```razor
-<head>
-    @if (Activity.Current is { } currentActivity)
-    {
-        <meta name="traceparent" content="@currentActivity.Id" />
-    }
-    <!-- Other elements omitted for brevity... -->
-</head>
-```
-
-The preceding code sets the `traceparent` meta element to the current activity ID.
-
-## Example browser telemetry code
-
-The following JavaScript code demonstrates the initialization of the OpenTelemetry JavaScript SDK and the sending of telemetry data to the dashboard:
-
-```javascript
-import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
-import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
-import { resourceFromAttributes } from '@opentelemetry/resources';
-import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-
-export function initializeTelemetry(otlpUrl, headers, resourceAttributes) {
-    const otlpOptions = {
-        url: `${otlpUrl}/v1/traces`,
-        headers: parseDelimitedValues(headers)
-    };
-
-    const attributes = parseDelimitedValues(resourceAttributes);
-    attributes[SemanticResourceAttributes.SERVICE_NAME] = 'browser';
-
-    const provider = new WebTracerProvider({
-        resource: resourceFromAttributes(attributes),
-    });
-    provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
-    provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter(otlpOptions)));
-
-    provider.register({
-        // Prefer ZoneContextManager: supports asynchronous operations
-        contextManager: new ZoneContextManager(),
-    });
-
-    // Registering instrumentations
-    registerInstrumentations({
-        instrumentations: [new DocumentLoadInstrumentation()],
-    });
-}
-
-function parseDelimitedValues(s) {
-    const headers = s.split(','); // Split by comma
-    const result = {};
-
-    headers.forEach(header => {
-        const [key, value] = header.split('='); // Split by equal sign
-        result[key.trim()] = value.trim(); // Add to the object, trimming spaces
-    });
-
-    return result;
-}
-```
-
-The preceding JavaScript code defines an `initializeTelemetry` function that expects the OTLP endpoint URL, the headers, and the resource attributes. These parameters are provided by the consuming browser app that pulls them from the environment variables set by the app host. Consider the following Razor code:
-
-```razor {32-39}
-@using System.Diagnostics
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - BrowserTelemetry</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
-
-    @if (Activity.Current is { } currentActivity)
-    {
-        <meta name="traceparent" content="@currentActivity.Id" />
-    }
-</head>
-<body>
-    <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-            <div class="container">
-                <a class="navbar-brand" asp-area="" asp-page="/Index">BrowserTelemetry</a>
-            </div>
-        </nav>
-    </header>
-    <div class="container">
-        <main role="main" class="pb-3">
-            @RenderBody()
-        </main>
-    </div>
-    @await RenderSectionAsync("Scripts", required: false)
-    <script src="scripts/bundle.js"></script>
-    @if (Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") is { Length: > 0 } endpointUrl)
-    {
-        var headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS");
-        var attributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES");
-        <script>
-            BrowserTelemetry.initializeTelemetry('@endpointUrl', '@headers', '@attributes');
-        </script>
-    }
-</body>
-</html>
-```
-
-<Aside type="tip">
-The bundling and minification of the JavaScript code is beyond the scope of this article.
-</Aside>
-
-For the complete working example of how to configure the JavaScript OTEL SDK to send telemetry to the dashboard, see the [browser telemetry sample](https://github.com/microsoft/aspire/tree/main/playground/BrowserTelemetry).
-
-## Blazor WebAssembly integration
-
-Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime compiled to WebAssembly. Like other browser apps, Blazor WASM apps use the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the Aspire dashboard via JavaScript interop. The dashboard configuration for [OTLP HTTP](#otlp-configuration) and [CORS](#cors-configuration) described earlier in this article applies to Blazor WASM apps as well.
-
-### Provide OTEL configuration to the browser
-
-Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through an API endpoint on the server:
-
-```csharp title="C# — Program.cs (Server)"
-using Microsoft.AspNetCore.Authorization;
-
-app.MapGet("/api/telemetry-config", [Authorize] () => new
-{
-    Endpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") ?? string.Empty,
-    Headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty,
-    ResourceAttributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES") ?? string.Empty
-});
-```
-
-<Aside type="caution">
-This approach exposes the OTLP API key to the browser in the HTTP response. For environments where the API key must remain secret, use an [authenticated OTEL proxy](#authenticated-otel-proxy) instead. In production, consider adding authentication or authorization to restrict access to this endpoint.
-</Aside>
-
-### Initialize OTEL from a Blazor component
-
-In the Blazor WASM app, call the JavaScript `initializeTelemetry` function using `IJSRuntime` after the component has rendered. Add the [JavaScript OTEL SDK initialization code](#example-browser-telemetry-code) to a JavaScript file bundled with your app, then call it from a Razor component:
-
-```razor title="Razor — TelemetryInitializer.razor (Client)"
-@inject IJSRuntime JS
-@inject HttpClient Http
-
-@code {
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            var config = await Http.GetFromJsonAsync<TelemetryConfig>("/api/telemetry-config");
-            if (config is { Endpoint.Length: > 0 })
-            {
-                await JS.InvokeVoidAsync(
-                    "initializeTelemetry",
-                    config.Endpoint,
-                    config.Headers,
-                    config.ResourceAttributes);
-            }
-        }
-    }
-
-    private sealed record TelemetryConfig(
-        string Endpoint,
-        string Headers,
-        string ResourceAttributes);
-}
-```
-
-Include this component in your `App.razor` or another top-level component so that telemetry is initialized when the app loads.
-
-### Backend-to-frontend trace correlation
-
-To correlate browser spans with server-side traces, include the current trace context in the server-rendered HTML. When the Blazor WASM app is hosted within a server-rendered page, such as a Blazor Web App with prerendering, the server can write the `traceparent` meta tag during prerender:
-
-```razor title="Razor — App.razor (Server prerender)"
-@using System.Diagnostics
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    @if (Activity.Current is { } currentActivity)
-    {
-        <meta name="traceparent" content="@currentActivity.Id" />
-    }
-    <!-- Other elements omitted for brevity... -->
-</head>
-```
-
-The JavaScript OTEL SDK reads this `traceparent` value automatically when `DocumentLoadInstrumentation` is registered, linking the browser spans to the originating server trace.
-
-### Authenticated OTEL proxy
-
-When the Aspire dashboard's OTLP API key must not be exposed to the browser, route telemetry through a server-side proxy endpoint. The browser sends telemetry to the proxy, and the proxy forwards it to the dashboard with the API key included as a server-side secret:
-
-```csharp title="C# — Program.cs (Server proxy endpoint)"
-// Register an HttpClient for the OTEL proxy
-builder.Services.AddHttpClient("otel-proxy");
-
-// ...
-
-app.MapPost("/api/telemetry/{**path}", async (
-    string path,
-    HttpContext context,
-    IHttpClientFactory httpClientFactory) =>
-{
-    var dashboardEndpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT");
-    if (string.IsNullOrEmpty(dashboardEndpoint))
-    {
-        return Results.NotFound();
-    }
-
-    var client = httpClientFactory.CreateClient("otel-proxy");
-
-    using var requestBody = new StreamContent(context.Request.Body);
-    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
-        .Parse(context.Request.ContentType ?? "application/x-protobuf");
-
-    using var request = new HttpRequestMessage(
-        HttpMethod.Post,
-        $"{dashboardEndpoint.TrimEnd('/')}/{path}")
-    {
-        Content = requestBody
-    };
-
-    // Copy OTLP API key from server environment to the forwarded request
-    var headersEnv = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty;
-    foreach (var header in headersEnv.Split(',', StringSplitOptions.RemoveEmptyEntries))
-    {
-        var parts = header.Split('=', 2);
-        if (parts.Length == 2)
-        {
-            request.Headers.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
-        }
-    }
-
-    var response = await client.SendAsync(request);
-
-    context.Response.StatusCode = (int)response.StatusCode;
-    await response.Content.CopyToAsync(context.Response.Body);
-    return Results.Empty;
-});
-```
-
-Configure the JavaScript OTEL SDK in the Blazor WASM app to point to the proxy endpoint instead of the dashboard directly:
-
-```javascript title="JavaScript — telemetry.js (Client)"
-export function initializeTelemetry(resourceAttributes) {
-    const otlpOptions = {
-        url: '/api/telemetry/v1/traces'  // Proxy endpoint, same origin - no CORS needed
-    };
-    // ... rest of SDK initialization
-}
-```
-
-This pattern eliminates the need for CORS configuration on the dashboard because the browser communicates only with the same-origin server. The API key stays on the server and is never visible to the browser.
-
-## See also
-
-- [Aspire dashboard configuration](/dashboard/configuration/)
-- [Standalone Aspire dashboard](/dashboard/standalone/)
-- [Telemetry after deployment](/dashboard/telemetry-after-deployment/)
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
new file mode 100644
index 000000000..9ab2a3015
--- /dev/null
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
@@ -0,0 +1,155 @@
+---
+title: Blazor WebAssembly integration
+description: Learn how to integrate browser telemetry in a Blazor WebAssembly app using JavaScript interop.
+---
+
+import LearnMore from '@components/LearnMore.astro';
+import { Aside } from '@astrojs/starlight/components';
+
+Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime compiled to WebAssembly. Like other browser apps, Blazor WASM apps use the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the Aspire dashboard via JavaScript interop. The dashboard configuration for [OTLP HTTP](/dashboard/enable-browser-telemetry/#otlp-configuration) and [CORS](/dashboard/enable-browser-telemetry/#cors-configuration) described in [Enable browser telemetry](/dashboard/enable-browser-telemetry/) applies to Blazor WASM apps as well.
+
+## Provide OTEL configuration to the browser
+
+Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through an API endpoint on the server:
+
+```csharp title="C# — Program.cs (Server)"
+using Microsoft.AspNetCore.Authorization;
+
+app.MapGet("/api/telemetry-config", [Authorize] () => new
+{
+    Endpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") ?? string.Empty,
+    Headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty,
+    ResourceAttributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES") ?? string.Empty
+});
+```
+
+<Aside type="caution">
+This approach exposes the OTLP API key to the browser in the HTTP response. For environments where the API key must remain secret, use an [authenticated OTEL proxy](#authenticated-otel-proxy) instead. In production, consider adding authentication or authorization to restrict access to this endpoint.
+</Aside>
+
+## Initialize OTEL from a Blazor component
+
+In the Blazor WASM app, call the JavaScript `initializeTelemetry` function using `IJSRuntime` after the component has rendered. Add the [JavaScript OTEL SDK initialization code](/dashboard/enable-browser-telemetry/browser-app-configuration/#example-browser-telemetry-code) to a JavaScript file bundled with your app, then call it from a Razor component:
+
+```razor title="Razor — TelemetryInitializer.razor (Client)"
+@inject IJSRuntime JS
+@inject HttpClient Http
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var config = await Http.GetFromJsonAsync<TelemetryConfig>("/api/telemetry-config");
+            if (config is { Endpoint.Length: > 0 })
+            {
+                await JS.InvokeVoidAsync(
+                    "initializeTelemetry",
+                    config.Endpoint,
+                    config.Headers,
+                    config.ResourceAttributes);
+            }
+        }
+    }
+
+    private sealed record TelemetryConfig(
+        string Endpoint,
+        string Headers,
+        string ResourceAttributes);
+}
+```
+
+Include this component in your `App.razor` or another top-level component so that telemetry is initialized when the app loads.
+
+## Backend-to-frontend trace correlation
+
+To correlate browser spans with server-side traces, include the current trace context in the server-rendered HTML. When the Blazor WASM app is hosted within a server-rendered page, such as a Blazor Web App with prerendering, the server can write the `traceparent` meta tag during prerender:
+
+```razor title="Razor — App.razor (Server prerender)"
+@using System.Diagnostics
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    @if (Activity.Current is { } currentActivity)
+    {
+        <meta name="traceparent" content="@currentActivity.Id" />
+    }
+    <!-- Other elements omitted for brevity... -->
+</head>
+```
+
+The JavaScript OTEL SDK reads this `traceparent` value automatically when `DocumentLoadInstrumentation` is registered, linking the browser spans to the originating server trace.
+
+## Authenticated OTEL proxy
+
+When the Aspire dashboard's OTLP API key must not be exposed to the browser, route telemetry through a server-side proxy endpoint. The browser sends telemetry to the proxy, and the proxy forwards it to the dashboard with the API key included as a server-side secret:
+
+```csharp title="C# — Program.cs (Server proxy endpoint)"
+// Register an HttpClient for the OTEL proxy
+builder.Services.AddHttpClient("otel-proxy");
+
+// ...
+
+app.MapPost("/api/telemetry/{**path}", async (
+    string path,
+    HttpContext context,
+    IHttpClientFactory httpClientFactory) =>
+{
+    var dashboardEndpoint = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT");
+    if (string.IsNullOrEmpty(dashboardEndpoint))
+    {
+        return Results.NotFound();
+    }
+
+    var client = httpClientFactory.CreateClient("otel-proxy");
+
+    using var requestBody = new StreamContent(context.Request.Body);
+    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
+        .Parse(context.Request.ContentType ?? "application/x-protobuf");
+
+    using var request = new HttpRequestMessage(
+        HttpMethod.Post,
+        $"{dashboardEndpoint.TrimEnd('/')}/{path}")
+    {
+        Content = requestBody
+    };
+
+    // Copy OTLP API key from server environment to the forwarded request
+    var headersEnv = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty;
+    foreach (var header in headersEnv.Split(',', StringSplitOptions.RemoveEmptyEntries))
+    {
+        var parts = header.Split('=', 2);
+        if (parts.Length == 2)
+        {
+            request.Headers.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
+        }
+    }
+
+    var response = await client.SendAsync(request);
+
+    context.Response.StatusCode = (int)response.StatusCode;
+    await response.Content.CopyToAsync(context.Response.Body);
+    return Results.Empty;
+});
+```
+
+Configure the JavaScript OTEL SDK in the Blazor WASM app to point to the proxy endpoint instead of the dashboard directly:
+
+```javascript title="JavaScript — telemetry.js (Client)"
+export function initializeTelemetry(resourceAttributes) {
+    const otlpOptions = {
+        url: '/api/telemetry/v1/traces'  // Proxy endpoint, same origin - no CORS needed
+    };
+    // ... rest of SDK initialization
+}
+```
+
+This pattern eliminates the need for CORS configuration on the dashboard because the browser communicates only with the same-origin server. The API key stays on the server and is never visible to the browser.
+
+## See also
+
+- [Enable browser telemetry overview](/dashboard/enable-browser-telemetry/)
+- [Browser app configuration](/dashboard/enable-browser-telemetry/browser-app-configuration/)
+- [Aspire dashboard configuration](/dashboard/configuration/)
+- [Standalone Aspire dashboard](/dashboard/standalone/)
+- [Telemetry after deployment](/dashboard/telemetry-after-deployment/)
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/browser-app-configuration.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/browser-app-configuration.mdx
new file mode 100644
index 000000000..7f27f045e
--- /dev/null
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/browser-app-configuration.mdx
@@ -0,0 +1,152 @@
+---
+title: Browser app configuration
+description: Learn how to configure the JavaScript OTEL SDK in your browser app to send telemetry to the Aspire dashboard.
+---
+
+import LearnMore from '@components/LearnMore.astro';
+import { Aside } from '@astrojs/starlight/components';
+
+A browser app uses the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the dashboard. Successfully sending telemetry to the dashboard requires the SDK to be correctly configured.
+
+Before configuring the browser app, ensure the dashboard is configured with an [OTLP HTTP endpoint and CORS](/dashboard/enable-browser-telemetry/). For Blazor WebAssembly apps, see [Blazor WebAssembly integration](/dashboard/enable-browser-telemetry/blazor-webassembly/).
+
+## OTLP exporter
+
+OTLP exporters must be included in the browser app and configured with the SDK. For example, exporting distributed tracing with OTLP uses the [@opentelemetry/exporter-trace-otlp-proto](https://www.npmjs.com/package/@opentelemetry/exporter-trace-otlp-proto) package.
+
+When OTLP is added to the SDK, OTLP options must be specified. OTLP options includes:
+
+- `url`: The address that HTTP OTLP requests are made to. The address should be the dashboard HTTP OTLP endpoint and the path to the OTLP HTTP API. For example, `https://localhost:4318/v1/traces` for the trace OTLP exporter. If the browser app is launched by the AppHost then the HTTP OTLP endpoint is available from the `OTEL_EXPORTER_OTLP_ENDPOINT` environment variable.
+
+- `headers`: The headers sent with requests. If OTLP endpoint API key authentication is enabled the `x-otlp-api-key` header must be sent with OTLP requests. If the browser app is launched by the AppHost then the API key is available from the `OTEL_EXPORTER_OTLP_HEADERS` environment variable.
+
+## Browser metadata
+
+When a browser app is configured to collect distributed traces, the browser app can set the trace parent a browser's spans using the `meta` element in the HTML. The value of the `name="traceparent"` meta element should correspond to the current trace.
+
+In a .NET app, for example, the trace parent value would likely be assigned from the `Activity.Current` and passing its `Activity.Id` value as the `content`. For example, consider the following Razor code:
+
+```razor
+<head>
+    @if (Activity.Current is { } currentActivity)
+    {
+        <meta name="traceparent" content="@currentActivity.Id" />
+    }
+    <!-- Other elements omitted for brevity... -->
+</head>
+```
+
+The preceding code sets the `traceparent` meta element to the current activity ID.
+
+## Example browser telemetry code
+
+The following JavaScript code demonstrates the initialization of the OpenTelemetry JavaScript SDK and the sending of telemetry data to the dashboard:
+
+```javascript
+import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+
+export function initializeTelemetry(otlpUrl, headers, resourceAttributes) {
+    const otlpOptions = {
+        url: `${otlpUrl}/v1/traces`,
+        headers: parseDelimitedValues(headers)
+    };
+
+    const attributes = parseDelimitedValues(resourceAttributes);
+    attributes[SemanticResourceAttributes.SERVICE_NAME] = 'browser';
+
+    const provider = new WebTracerProvider({
+        resource: resourceFromAttributes(attributes),
+    });
+    provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+    provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter(otlpOptions)));
+
+    provider.register({
+        // Prefer ZoneContextManager: supports asynchronous operations
+        contextManager: new ZoneContextManager(),
+    });
+
+    // Registering instrumentations
+    registerInstrumentations({
+        instrumentations: [new DocumentLoadInstrumentation()],
+    });
+}
+
+function parseDelimitedValues(s) {
+    const headers = s.split(','); // Split by comma
+    const result = {};
+
+    headers.forEach(header => {
+        const [key, value] = header.split('='); // Split by equal sign
+        result[key.trim()] = value.trim(); // Add to the object, trimming spaces
+    });
+
+    return result;
+}
+```
+
+The preceding JavaScript code defines an `initializeTelemetry` function that expects the OTLP endpoint URL, the headers, and the resource attributes. These parameters are provided by the consuming browser app that pulls them from the environment variables set by the app host. Consider the following Razor code:
+
+```razor {32-39}
+@using System.Diagnostics
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - BrowserTelemetry</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+
+    @if (Activity.Current is { } currentActivity)
+    {
+        <meta name="traceparent" content="@currentActivity.Id" />
+    }
+</head>
+<body>
+    <header>
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+            <div class="container">
+                <a class="navbar-brand" asp-area="" asp-page="/Index">BrowserTelemetry</a>
+            </div>
+        </nav>
+    </header>
+    <div class="container">
+        <main role="main" class="pb-3">
+            @RenderBody()
+        </main>
+    </div>
+    @await RenderSectionAsync("Scripts", required: false)
+    <script src="scripts/bundle.js"></script>
+    @if (Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_ENDPOINT") is { Length: > 0 } endpointUrl)
+    {
+        var headers = Environment.GetEnvironmentVariable("OTEL_EXPORTER_OTLP_HEADERS");
+        var attributes = Environment.GetEnvironmentVariable("OTEL_RESOURCE_ATTRIBUTES");
+        <script>
+            BrowserTelemetry.initializeTelemetry('@endpointUrl', '@headers', '@attributes');
+        </script>
+    }
+</body>
+</html>
+```
+
+<Aside type="tip">
+The bundling and minification of the JavaScript code is beyond the scope of this article.
+</Aside>
+
+For the complete working example of how to configure the JavaScript OTEL SDK to send telemetry to the dashboard, see the [browser telemetry sample](https://github.com/microsoft/aspire/tree/main/playground/BrowserTelemetry).
+
+## See also
+
+- [Enable browser telemetry overview](/dashboard/enable-browser-telemetry/)
+- [Blazor WebAssembly integration](/dashboard/enable-browser-telemetry/blazor-webassembly/)
+- [Aspire dashboard configuration](/dashboard/configuration/)
+- [Standalone Aspire dashboard](/dashboard/standalone/)
+- [Telemetry after deployment](/dashboard/telemetry-after-deployment/)
diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/index.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/index.mdx
new file mode 100644
index 000000000..215e44535
--- /dev/null
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/index.mdx
@@ -0,0 +1,191 @@
+---
+title: Enable browser telemetry
+description: Learn how to enable browser telemetry in the Aspire dashboard, including OTLP HTTP and CORS configuration.
+---
+
+import LearnMore from '@components/LearnMore.astro';
+import { Aside, CardGrid, LinkCard } from '@astrojs/starlight/components';
+import OsAwareTabs from '@components/OsAwareTabs.astro';
+
+The Aspire dashboard can be configured to receive telemetry sent from browser apps. This feature is useful for monitoring client-side performance and user interactions. Browser telemetry requires additional dashboard configuration and that the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) is added to the browser apps.
+
+This article discusses how to configure the Aspire dashboard to receive browser telemetry. For information on configuring the browser app itself, see [Browser app configuration](/dashboard/enable-browser-telemetry/browser-app-configuration/). For Blazor WebAssembly apps, see [Blazor WebAssembly integration](/dashboard/enable-browser-telemetry/blazor-webassembly/).
+
+## Dashboard configuration
+
+Browser telemetry requires the dashboard to enable these features:
+
+- OTLP HTTP endpoint. This endpoint is used by the dashboard to receive telemetry from browser apps.
+- Cross-origin resource sharing (CORS). CORS allows browser apps to make requests to the dashboard.
+
+### OTLP configuration
+
+The Aspire dashboard receives telemetry through OTLP endpoints. [HTTP OTLP endpoints](https://opentelemetry.io/docs/specs/otlp/#otlphttp) and gRPC OTLP endpoints are supported by the dashboard. Browser apps must use HTTP OLTP to send telemetry to the dashboard because browser apps don't support gRPC.
+
+To configure the gPRC or HTTP endpoints, specify the following environment variables:
+
+- `ASPIRE_DASHBOARD_OTLP_ENDPOINT_URL`: The gRPC endpoint to which the dashboard connects for its data.
+- `ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL`: The HTTP endpoint to which the dashboard connects for its data.
+
+Configuration of the HTTP OTLP endpoint depends on whether the dashboard is started by the AppHost or is run standalone.
+
+#### Configure OTLP HTTP with AppHost
+
+If the dashboard and your app are started by the AppHost, the dashboard OTLP endpoints are configured in the AppHost's _launchSettings.json_ file.
+
+Consider the following example _launchSettings.json_ file:
+
+```json title="JSON — launchSettings.json" {12,25}
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:15887;http://localhost:15888",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "https://localhost:16175",
+        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:17037",
+        "ASPIRE_SHOW_DASHBOARD_RESOURCES": "true"
+      }
+    },
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:15888",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "http://localhost:16175",
+        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:17037",
+        "ASPIRE_SHOW_DASHBOARD_RESOURCES": "true",
+        "ASPIRE_ALLOW_UNSECURED_TRANSPORT": "true"
+      }
+    },
+    "generate-manifest": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "dotnetRunMessages": true,
+      "commandLineArgs": "--publisher manifest --output-path aspire-manifest.json",
+      "applicationUrl": "http://localhost:15888",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
+```
+
+The preceding launch settings JSON file configures all profiles to include the `ASPIRE_DASHBOARD_OTLP_HTTP_ENDPOINT_URL` environment variable.
+
+#### Configure OTLP HTTP with standalone dashboard
+
+If the dashboard is used standalone, without the rest of Aspire, the OTLP HTTP endpoint is enabled by default on port `18890`. However, the port must be mapped when the dashboard container is started:
+
+<OsAwareTabs syncKey="terminal">
+<div slot="unix">
+
+```bash
+docker run --rm -it -d \
+    -p 18888:18888 \
+    -p 4317:18889 \
+    -p 4318:18890 \
+    --name aspire-dashboard \
+    mcr.microsoft.com/dotnet/aspire-dashboard:latest
+```
+
+</div>
+<div slot="windows">
+
+```powershell
+docker run --rm -it -d `
+    -p 18888:18888 `
+    -p 4317:18889 `
+    -p 4318:18890 `
+    --name aspire-dashboard `
+    mcr.microsoft.com/dotnet/aspire-dashboard:latest
+```
+
+</div>
+</OsAwareTabs>
+
+The preceding command runs the dashboard container and maps gRPC OTLP to port `4317` and HTTP OTLP to port `4318`.
+
+### CORS configuration
+
+By default, browser apps are restricted from making cross domain API calls. This impacts sending telemetry to the dashboard because the dashboard and the browser app are always on different domains. Configuring CORS in the Aspire dashboard removes the restriction.
+
+If the dashboard and your app are started by the AppHost, no CORS configuration is required. Aspire automatically configures the dashboard to allow all resource origins.
+
+If the dashboard is used standlone then CORS must be configured manually. The domain used to view the browser app must be configured as an allowed origin by specifing the `DASHBOARD__OTLP__CORS__ALLOWEDORIGINS` environment variable when the dashboard container is started.
+
+<OsAwareTabs syncKey="terminal">
+<div slot="unix">
+
+```bash
+docker run --rm -it -d \
+    -p 18888:18888 \
+    -p 4317:18889 \
+    -p 4318:18890 \
+    -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=https://localhost:8080 \
+    --name aspire-dashboard \
+    mcr.microsoft.com/dotnet/aspire-dashboard:latest
+```
+
+</div>
+<div slot="windows">
+
+```powershell
+docker run --rm -it -d `
+    -p 18888:18888 `
+    -p 4317:18889 `
+    -p 4318:18890 `
+    -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=https://localhost:8080 `
+    --name aspire-dashboard `
+    mcr.microsoft.com/dotnet/aspire-dashboard:latest
+```
+
+</div>
+</OsAwareTabs>
+
+The preceding command runs the dashboard container and configures `https://localhost:8080` as an allowed origin. That means a browser app that is accessed using `https://localhost:8080` has permission to send the dashboard telemetry.
+
+Multiple origins can be allowed with a comma separated value. Or all origins can be allowed with the `*` wildcard. For example, `DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=*`.
+
+<LearnMore>
+For more information, see [Aspire dashboard configuration: OTLP CORS](configuration#otlp-cors).
+</LearnMore>
+
+### OTLP endpoint security
+
+Dashboard OTLP endpoints can be secured with API key authentication. When enabled, HTTP OTLP requests to the dashboard must include the API key as the `x-otlp-api-key` header. By default a new API key is generated each time the dashboard is run.
+
+API key authentication is automatically enabled when the dashboard is run from the AppHost. Dashboard authentication can be disabled by setting `ASPIRE_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS` to `true` in the AppHost's _launchSettings.json_ file.
+
+OTLP endpoints are unsecured by default in the standalone dashboard.
+
+## Next steps
+
+<CardGrid>
+<LinkCard
+  title="Browser app configuration"
+  description="Configure the JavaScript OTEL SDK in your browser app to send telemetry to the dashboard."
+  href="/dashboard/enable-browser-telemetry/browser-app-configuration/"
+/>
+<LinkCard
+  title="Blazor WebAssembly integration"
+  description="Set up browser telemetry in a Blazor WebAssembly app using JavaScript interop."
+  href="/dashboard/enable-browser-telemetry/blazor-webassembly/"
+/>
+</CardGrid>
+
+## See also
+
+- [Aspire dashboard configuration](/dashboard/configuration/)
+- [Standalone Aspire dashboard](/dashboard/standalone/)
+- [Telemetry after deployment](/dashboard/telemetry-after-deployment/)

From eef8311e0319cd751ee64d3390be927490003905 Mon Sep 17 00:00:00 2001
From: AJ Matthews <alistair.matthews@civica.co.uk>
Date: Thu, 9 Apr 2026 16:26:41 +0100
Subject: [PATCH 10/10] Implemented feedback from @javiercn.

---
 .../blazor-webassembly.mdx                    | 103 ++++++++++++------
 1 file changed, 67 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
index 4036a5877..cb1641eb3 100644
--- a/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
+++ b/src/frontend/src/content/docs/dashboard/enable-browser-telemetry/blazor-webassembly.mdx
@@ -6,60 +6,91 @@ description: Learn how to integrate browser telemetry in a Blazor WebAssembly ap
 import LearnMore from '@components/LearnMore.astro';
 import { Aside } from '@astrojs/starlight/components';
 
-Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime compiled to WebAssembly. Like other browser apps, Blazor WASM apps use the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the Aspire dashboard via JavaScript interop. The dashboard configuration for [OTLP HTTP](/dashboard/enable-browser-telemetry/#otlp-configuration) and [CORS](/dashboard/enable-browser-telemetry/#cors-configuration) described in [Enable browser telemetry](/dashboard/enable-browser-telemetry/) applies to Blazor WASM apps as well.
+Blazor WebAssembly (WASM) apps run entirely in the browser using a .NET runtime compiled to WebAssembly. Like other browser apps, Blazor WASM apps use the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) to send telemetry to the Aspire dashboard via JavaScript interop. 
 
-## Provide OTEL configuration to the browser
+## Provide OTEL configuration to the browser using a CORS proxy
 
-Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through an API endpoint on the server:
+Blazor WASM apps can't read server-side environment variables directly. When the app is hosted by an ASP.NET Core server (for example, a Blazor Web App or hosted Blazor WASM project), expose the OTEL configuration through a server-side CORS proxy. Because the browser sends telemetry to the same-origin proxy rather than directly to the dashboard, no CORS configuration is required on the dashboard and no sensitive values reach the browser.
+
+Add a lightweight configuration endpoint that returns only the proxy path:
 
 ```csharp title="C# — Program.cs (Server)"
-using Microsoft.AspNetCore.Authorization;
+// Register an HttpClient for forwarding OTEL traffic
+builder.Services.AddHttpClient("otel-proxy");
 
-app.MapGet("/api/telemetry-config", [Authorize] (IConfiguration config) => new
+// Configuration endpoint — returns the proxy URL only (no API key)
+app.MapGet("/api/telemetry-config", () => new
 {
-    Endpoint = config.GetValue<string>("OTEL_EXPORTER_OTLP_ENDPOINT", ""),
-    Headers = config.GetValue<string>("OTEL_EXPORTER_OTLP_HEADERS", ""),
-    ResourceAttributes = config.GetValue<string>("OTEL_RESOURCE_ATTRIBUTES", "")
+    Endpoint = "/api/otel-proxy"
 });
-```
 
-<Aside type="caution">
-This approach exposes the OTLP API key to the browser in the HTTP response. For environments where the API key must remain secret, use an [authenticated OTEL proxy](#authenticated-otel-proxy) instead. In production, consider adding authentication or authorization to restrict access to this endpoint.
-</Aside>
+// CORS proxy endpoint — forwards OTEL traffic with the API key added server-side
+app.MapPost("/api/otel-proxy/{**path}", async (
+    string path,
+    HttpContext context,
+    IHttpClientFactory httpClientFactory,
+    IConfiguration config) =>
+{
+    var dashboardEndpoint = config.GetValue<string>("OTEL_EXPORTER_OTLP_ENDPOINT");
+    if (string.IsNullOrEmpty(dashboardEndpoint))
+        return Results.NotFound();
 
-## Initialize OTEL from a Blazor component
+    var client = httpClientFactory.CreateClient("otel-proxy");
 
-In the Blazor WASM app, call the JavaScript `initializeTelemetry` function using `IJSRuntime` after the component has rendered. Add the [JavaScript OTEL SDK initialization code](/dashboard/enable-browser-telemetry/browser-app-configuration/#example-browser-telemetry-code) to a JavaScript file bundled with your app, then call it from a Razor component:
+    using var requestBody = new StreamContent(context.Request.Body);
+    requestBody.Headers.ContentType = System.Net.Http.Headers.MediaTypeHeaderValue
+        .Parse(context.Request.ContentType ?? "application/x-protobuf");
 
-```razor title="Razor — TelemetryInitializer.razor (Client)"
-@inject IJSRuntime JS
-@inject HttpClient Http
+    using var request = new HttpRequestMessage(
+        HttpMethod.Post,
+        $"{dashboardEndpoint.TrimEnd('/')}/{path}")
+    {
+        Content = requestBody
+    };
 
-@code {
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    // Attach OTLP API key server-side — never sent to the browser
+    var headersEnv = config.GetValue<string>("OTEL_EXPORTER_OTLP_HEADERS") ?? string.Empty;
+    foreach (var header in headersEnv.Split(',', StringSplitOptions.RemoveEmptyEntries))
     {
-        if (firstRender)
-        {
-            var config = await Http.GetFromJsonAsync<TelemetryConfig>("/api/telemetry-config");
-            if (config is { Endpoint.Length: > 0 })
-            {
-                await JS.InvokeVoidAsync(
-                    "initializeTelemetry",
-                    config.Endpoint,
-                    config.Headers,
-                    config.ResourceAttributes);
-            }
-        }
+        var parts = header.Split('=', 2);
+        if (parts.Length == 2)
+            request.Headers.TryAddWithoutValidation(parts[0].Trim(), parts[1].Trim());
     }
 
-    private sealed record TelemetryConfig(
-        string Endpoint,
-        string Headers,
-        string ResourceAttributes);
+    var response = await client.SendAsync(request);
+    context.Response.StatusCode = (int)response.StatusCode;
+    await response.Content.CopyToAsync(context.Response.Body);
+    return Results.Empty;
+});
+```
+
+The browser fetches this endpoint and receives only the proxy URL. In the Blazor WASM app, call `initializeTelemetry` with the proxy URL so the JavaScript OTEL SDK sends data to the same-origin proxy rather than the dashboard directly. For more details, see [Initialize OTEL from a JavaScript initializer](#initialize-otel-from-a-javascript-initializer) below.
+
+<Aside type="tip">
+Because the browser only ever communicates with the same-origin proxy, CORS does not need to be enabled on the Aspire dashboard and the OTLP API key remains entirely server-side.
+</Aside>
+
+## Initialize OTEL from a JavaScript initializer
+
+Blazor WASM supports [JavaScript initializers](https://learn.microsoft.com/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-9.0#javascript-initializers) that run automatically during the Blazor startup lifecycle. You can use these initializers to initialize OTEL telemetry. Create a file named `{AssemblyName}.lib.module.js` in the `wwwroot` folder of your Blazor WASM project, replacing `{AssemblyName}` with your project's assembly name, then export an `afterWebAssemblyStarted` function:
+
+```javascript title="JavaScript — {YourApp}.lib.module.js (Client wwwroot)"
+export async function afterWebAssemblyStarted(blazor) {
+    const response = await fetch('/api/telemetry-config');
+    if (!response.ok) return;
+
+    const config = await response.json();
+    if (config.endpoint) {
+        initializeTelemetry(config.endpoint, config.headers, config.resourceAttributes);
+    }
 }
 ```
 
-Include this component in your `App.razor` or another top-level component so that telemetry is initialized when the app loads.
+<Aside type="tip">
+The file name must match your Blazor WASM project's assembly name. For example, if your project assembly is named `MyApp.Client`, use `MyApp.Client.lib.module.js`.
+</Aside>
+
+Blazor automatically discovers and executes the initializer during startup — no Razor component or `IJSRuntime` injection is needed. Because `afterWebAssemblyStarted` fires after the Blazor runtime has loaded but before components render, telemetry is active from the very first component lifecycle.
 
 ## Backend-to-frontend trace correlation