Add Blazor WASM telemetry docs and post-deployment observability guidance#455
Add Blazor WASM telemetry docs and post-deployment observability guidance#455
Conversation
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
IEvangelist
left a comment
IEvangelist
left a comment
There was a problem hiding this comment.
This PR looks good so far, but let's double check it for accuracy by using the .github/skills/doc-tester/SKILL.md skill. Please also consider all new comments and feedback/suggestions. @copilot
|
Hey @copilot, please have a look at this comment: #455 (review) |
… improve URL guidance Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Ran doc-tester validation using Playwright against the local dev server. Found and fixed three issues (commit
All internal anchor links ( New page rendering: Blazor WASM section: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
There was a problem hiding this comment.
Pull request overview
This PR addresses documentation gaps identified from Discord community feedback by adding comprehensive guidance for Blazor WebAssembly telemetry integration and post-deployment observability. The changes fill critical knowledge gaps around browser-based telemetry collection and production telemetry configuration that were frequently asked about in the community.
Changes:
- Added Blazor WASM telemetry integration section to
enable-browser-telemetry.mdxcovering OTEL config exposure, JS interop initialization, trace correlation, and authenticated proxy patterns - Created new
telemetry-after-deployment.mdxguide explaining development vs. production telemetry differences, Azure Monitor setup, troubleshooting missing logs, and dashboard access after deployment - Updated sidebar configuration to include the new telemetry after deployment page
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/frontend/src/content/docs/dashboard/telemetry-after-deployment.mdx |
New comprehensive guide covering production telemetry setup with Azure Monitor, troubleshooting missing logs, and accessing the deployed dashboard |
src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx |
Added Blazor WebAssembly integration section with OTEL configuration API, component initialization, trace correlation, and authenticated proxy pattern |
src/frontend/config/sidebar/dashboard.topics.ts |
Added sidebar entry for the new telemetry after deployment page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| slug: 'dashboard/microsoft-collected-dashboard-telemetry', | ||
| }, | ||
| { | ||
| label: 'Telemetry after deployment', |
There was a problem hiding this comment.
The "Telemetry after deployment" sidebar entry should include translations for all supported locales to maintain consistency with other entries in the Dashboard section. Most other entries in this section include translations for multiple languages (da, de, es, fr, hi, id, it, ja, ko, pt, pt-BR, pt-PT, ru, tr, uk, zh-CN). Consider adding translations for this new entry to match the pattern established by entries like "Enable browser telemetry" (lines 179-199) and "Microsoft telemetry" (lines 202-222).
| label: 'Telemetry after deployment', | |
| 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': '部署后的遥测', | |
| }, |
| 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()); | ||
| } | ||
| } |
There was a problem hiding this comment.
The proxy implementation modifies client.DefaultRequestHeaders in the request handler, which can cause issues with concurrent requests since the HttpClient may be reused across requests. Instead, headers should be added to the individual request message. Consider creating a new HttpRequestMessage and adding headers to it, or using a named HttpClient with pre-configured headers via DelegatingHandler.
| 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(); |
There was a problem hiding this comment.
The MapGet("/api/telemetry-config" ...) endpoint returns OTEL_EXPORTER_OTLP_HEADERS and other OTEL env vars and is marked AllowAnonymous, which exposes the OTLP API key and related configuration to any caller, including unauthenticated internet clients. An attacker who fetches this endpoint can obtain the key and misuse it to send forged telemetry or abuse downstream telemetry services, and any other sensitive headers placed in OTEL_EXPORTER_OTLP_HEADERS are also disclosed. Consider removing the API key from this response and/or enforcing authentication/authorization on this endpoint, steering users towards the authenticated OTEL proxy pattern for production scenarios.
| 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(); | |
| 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 | |
| }); |
enable-browser-telemetry.mdx:IJSRuntimetraceparentmeta tagdashboard/telemetry-after-deployment.mdxpage covering:UseAzureMonitor()dashboard.topics.tssidebar with "Telemetry after deployment" entryIHttpClientFactory, strengthen security caution)WithDashboard()API callMicrosoft.Extensions.Azure→Azure.Monitor.OpenTelemetry.AspNetCoreOriginal prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.