Enable CORS for with OTLP HTTP endpoint and add playground app

Aspire.sln

@@ -561,6 +561,12 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Aspire.Hosting.NodeJs.Tests
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Aspire.Hosting.RabbitMQ.Tests", "tests\Aspire.Hosting.RabbitMQ.Tests\Aspire.Hosting.RabbitMQ.Tests.csproj", "{872AC635-B880-4FAC-BB43-4FD97D7B1209}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "BrowserTelemetry", "BrowserTelemetry", "{15966C27-17FA-4A46-A172-55985411540A}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BrowserTelemetry.AppHost", "playground\BrowserTelemetry\BrowserTelemetry.AppHost\BrowserTelemetry.AppHost.csproj", "{29946391-F2E9-4DEA-92A2-6FAAC1508446}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BrowserTelemetry.Web", "playground\BrowserTelemetry\BrowserTelemetry.Web\BrowserTelemetry.Web.csproj", "{091EA540-355B-4763-9980-5F83F0BB6F11}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -1479,6 +1485,14 @@ Global
 		{872AC635-B880-4FAC-BB43-4FD97D7B1209}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{872AC635-B880-4FAC-BB43-4FD97D7B1209}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{872AC635-B880-4FAC-BB43-4FD97D7B1209}.Release|Any CPU.Build.0 = Release|Any CPU
+		{29946391-F2E9-4DEA-92A2-6FAAC1508446}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{29946391-F2E9-4DEA-92A2-6FAAC1508446}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{29946391-F2E9-4DEA-92A2-6FAAC1508446}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{29946391-F2E9-4DEA-92A2-6FAAC1508446}.Release|Any CPU.Build.0 = Release|Any CPU
+		{091EA540-355B-4763-9980-5F83F0BB6F11}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{091EA540-355B-4763-9980-5F83F0BB6F11}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{091EA540-355B-4763-9980-5F83F0BB6F11}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{091EA540-355B-4763-9980-5F83F0BB6F11}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -1749,6 +1763,9 @@ Global
 		{1419BDCB-47EB-43EB-9149-C935B7208A72} = {90A70EFA-F26A-49E0-A375-DB461E4E0E25}
 		{50450FBB-CD10-4281-B22C-7FF86CEE9D9F} = {830A89EC-4029-4753-B25A-068BAE37DEC7}
 		{872AC635-B880-4FAC-BB43-4FD97D7B1209} = {830A89EC-4029-4753-B25A-068BAE37DEC7}
+		{15966C27-17FA-4A46-A172-55985411540A} = {D173887B-AF42-4576-B9C1-96B9E9B3D9C0}
+		{29946391-F2E9-4DEA-92A2-6FAAC1508446} = {15966C27-17FA-4A46-A172-55985411540A}
+		{091EA540-355B-4763-9980-5F83F0BB6F11} = {15966C27-17FA-4A46-A172-55985411540A}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {6DCEDFEC-988E-4CB3-B45B-191EB5086E0C}

playground/BrowserTelemetry/BrowserTelemetry.AppHost/BrowserTelemetry.AppHost.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <IsAspireHost>true</IsAspireHost>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Include="..\..\KnownResourceNames.cs" Link="KnownResourceNames.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <AspireProjectOrPackageReference Include="Aspire.Hosting.AppHost" />
+    <ProjectReference Include="..\BrowserTelemetry.Web\BrowserTelemetry.Web.csproj" />
+  </ItemGroup>
+
+</Project>

playground/BrowserTelemetry/BrowserTelemetry.AppHost/Program.cs

@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+var builder = DistributedApplication.CreateBuilder(args);
+
+builder.AddProject<Projects.BrowserTelemetry_Web>("web")
+    .WithExternalHttpEndpoints();
+
+// This project is only added in playground projects to support development/debugging
+// of the dashboard. It is not required in end developer code. Comment out this code
+// to test end developer dashboard launch experience. Refer to Directory.Build.props
+// for the path to the dashboard binary (defaults to the Aspire.Dashboard bin output
+// in the artifacts dir).
+builder.AddProject<Projects.Aspire_Dashboard>(KnownResourceNames.AspireDashboard);
+
+builder.Build().Run();

playground/BrowserTelemetry/BrowserTelemetry.AppHost/Properties/launchSettings.json

@@ -0,0 +1,44 @@
+{
+  "$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",
+        "DOTNET_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "https://localhost:16175",
+        "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:17037",
+        "DOTNET_ASPIRE_SHOW_DASHBOARD_RESOURCES": "true"
+      }
+    },
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:15888",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "DOTNET_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "http://localhost:16175",
+        "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:17037",
+        "DOTNET_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",
+        "DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "http://localhost:16175"
+      }
+    }
+  }
+}

playground/BrowserTelemetry/BrowserTelemetry.AppHost/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

playground/BrowserTelemetry/BrowserTelemetry.AppHost/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning",
+      "Aspire.Hosting.Dcp": "Warning"
+    }
+  }
+}

playground/BrowserTelemetry/BrowserTelemetry.Web/BrowserTelemetry.Web.csproj

@@ -0,0 +1,37 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\Playground.ServiceDefaults\Playground.ServiceDefaults.csproj" />
+  </ItemGroup>
+
+  <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
+    <!--
+        Use npm install or npm ci depending on RestorePackagesWithLockFile value.
+        Uncomment the following lines if you want to use this feature:
+
+        <PropertyGroup>
+          <RestorePackagesWithLockFile>true</RestorePackagesWithLockFile>
+        </PropertyGroup>
+     -->
+    <Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
+    <Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
+
+    <!-- Write the stamp file, so incremental builds work -->
+    <Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
+  </Target>
+
+  <!--
+      2. Run npm run build before building the .NET project.
+      MSBuild runs NpmInstall before this task because of the DependsOnTargets attribute.
+   -->
+  <Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild" Condition="'$(Configuration)' == 'Debug' ">
+    <Exec Command="npm run build" />
+  </Target>
+
+</Project>

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/Index.cshtml

@@ -0,0 +1,4 @@
+@page
+<div class="container">
+    <p>Hello world</p>
+</div>

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/Index.cshtml.cs

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace BrowserTelemetry.Web.Pages;
+
+public class IndexModel : PageModel
+{
+    private readonly ILogger<IndexModel> _logger;
+
+    public IndexModel(ILogger<IndexModel> logger)
+    {
+        _logger = logger;
+    }
+
+    public void OnGet()
+    {
+
+    }
+}

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/Shared/_Layout.cshtml

@@ -0,0 +1,40 @@
+@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/[email protected]/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>

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/Shared/_Layout.cshtml.css

@@ -0,0 +1,48 @@
+/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+a {
+  color: #0077cc;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  line-height: 60px;
+}

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using BrowserTelemetry.Web
+@namespace BrowserTelemetry.Web.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

playground/BrowserTelemetry/BrowserTelemetry.Web/Pages/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

playground/BrowserTelemetry/BrowserTelemetry.Web/Program.cs

@@ -0,0 +1,31 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.AddServiceDefaults();
+
+builder.Services.AddRazorPages();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseStaticFiles();
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapRazorPages();
+
+app.MapDefaultEndpoints();
+
+app.Run();

playground/BrowserTelemetry/BrowserTelemetry.Web/Properties/launchSettings.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:5180",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

playground/BrowserTelemetry/BrowserTelemetry.Web/Scripts/index.js

@@ -0,0 +1,50 @@
+import {
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+} from '@opentelemetry/sdk-trace-base';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import { diag, DiagConsoleLogger, DiagLogLevel } from "@opentelemetry/api";
+
+export function initializeTelemetry(otlpUrl, headers, resourceAttributes) {
+    const otlpOptions = {
+        url: `${otlpUrl}/v1/traces`,
+        headers: parseDelimitedValues(headers)
+    };
+
+    var attributes = parseDelimitedValues(resourceAttributes);
+    attributes[SemanticResourceAttributes.SERVICE_NAME] = 'browser';
+
+    const provider = new WebTracerProvider({
+        resource: new Resource(attributes),
+    });
+    provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+    provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter(otlpOptions)));
+
+    provider.register({
+        // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
+        contextManager: new ZoneContextManager(),
+    });
+
+    // Registering instrumentations
+    registerInstrumentations({
+        instrumentations: [new DocumentLoadInstrumentation()],
+    });
+}
+
+function parseDelimitedValues(s) {
+    const headers = s.split(','); // Split by comma
+    const o = {};
+
+    headers.forEach(header => {
+        const [key, value] = header.split('='); // Split by equal sign
+        o[key.trim()] = value.trim(); // Add to the object, trimming spaces
+    });
+
+    return o;
+}