Add tracked browser logs and network capture

playground/BrowserTelemetry/BrowserTelemetry.AppHost/AppHost.cs

@@ -1,11 +1,13 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+#pragma warning disable ASPIREBROWSERLOGS001 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
+
 var builder = DistributedApplication.CreateBuilder(args);
 
 builder.AddProject<Projects.BrowserTelemetry_Web>("web")
     .WithExternalHttpEndpoints()
-    .WithReplicas(2);
+    .WithBrowserLogs();
 
 #if !SKIP_DASHBOARD_REFERENCE
 // This project is only added in playground projects to support development/debugging
@@ -18,3 +20,5 @@
 #endif
 
 builder.Build().Run();
+
+#pragma warning restore ASPIREBROWSERLOGS001 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.

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

@@ -6,6 +6,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsAspireHost>true</IsAspireHost>
+    <UserSecretsId>80abf314-d3e8-43b1-b0a9-e7cbd8d5c5d2</UserSecretsId>
   </PropertyGroup>
 
   <ItemGroup>

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

@@ -1,4 +1,41 @@
 @page
 <div class="container">
-    <p>Hello world</p>
+    <div class="row g-4">
+        <div class="col-lg-8">
+            <h1 class="display-6">Browser logs demo</h1>
+            <p class="lead">
+                Use the <strong>web-browser-logs</strong> resource in the dashboard to open a tracked browser session, then
+                use the buttons below to emit browser-side console logs, network requests, and unhandled failures.
+            </p>
+        </div>
+        <div class="col-lg-4">
+            <div class="alert alert-secondary mb-0" id="browser-log-status">
+                Waiting for browser interaction.
+            </div>
+        </div>
+    </div>
+
+    <div class="row row-cols-1 row-cols-md-2 g-3 mt-1">
+        <div class="col">
+            <button class="btn btn-primary w-100" id="emit-console-log" type="button">Emit console.log</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-warning w-100" id="emit-console-warn" type="button">Emit console.warn</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-danger w-100" id="emit-console-error" type="button">Emit console.error</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-dark w-100" id="emit-unhandled-exception" type="button">Throw unhandled exception</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-outline-danger w-100" id="emit-unhandled-rejection" type="button">Reject unhandled promise</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-outline-primary w-100" id="emit-successful-fetch" type="button">Fetch successful request</button>
+        </div>
+        <div class="col">
+            <button class="btn btn-outline-secondary w-100" id="emit-failing-fetch" type="button">Fetch failing request</button>
+        </div>
+    </div>
 </div>

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

@@ -37,14 +37,104 @@ export function initializeTelemetry(otlpUrl, headers, resourceAttributes) {
     });
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+    wireButton('emit-console-log', () => {
+        setStatus('Emitted console.log.');
+        console.log('BrowserTelemetry demo: console.log fired from the tracked browser.');
+    });
+
+    wireButton('emit-console-warn', () => {
+        setStatus('Emitted console.warn.');
+        console.warn('BrowserTelemetry demo: console.warn fired from the tracked browser.');
+    });
+
+    wireButton('emit-console-error', () => {
+        setStatus('Emitted console.error.');
+        console.error('BrowserTelemetry demo: console.error fired from the tracked browser.');
+    });
+
+    wireButton('emit-unhandled-exception', () => {
+        setStatus('Scheduling an unhandled exception.');
+        window.setTimeout(() => {
+            throw new Error('BrowserTelemetry demo: unhandled exception from tracked browser.');
+        }, 50);
+    });
+
+    wireButton('emit-unhandled-rejection', () => {
+        setStatus('Scheduling an unhandled promise rejection.');
+        Promise.reject(new Error('BrowserTelemetry demo: unhandled promise rejection from tracked browser.'));
+    });
+
+    wireButton('emit-successful-fetch', async () => {
+        setStatus('Issuing a successful fetch request.');
+        const response = await fetch(`${window.location.pathname}?browserNetworkSuccess=${Date.now()}`, {
+            cache: 'no-store',
+            headers: {
+                'x-browser-telemetry-demo': 'success'
+            }
+        });
+
+        setStatus(`Successful fetch completed with status ${response.status}.`);
+        console.info(`BrowserTelemetry demo: successful fetch completed with status ${response.status}.`);
+    });
+
+    wireButton('emit-failing-fetch', async () => {
+        setStatus('Issuing a failing fetch request.');
+
+        try {
+            await fetch(`https://127.0.0.1:1/browser-network-failure?ts=${Date.now()}`, {
+                cache: 'no-store'
+            });
+        } catch (error) {
+            setStatus('Failing fetch triggered.');
+            console.warn('BrowserTelemetry demo: failing fetch triggered for tracked browser network capture.', error);
+        }
+    });
+
+    window.setTimeout(() => {
+        setStatus('Tracked browser demo ready.');
+        console.info('BrowserTelemetry demo: page loaded and ready for tracked browser logging.');
+    }, 250);
+});
+
 function parseDelimitedValues(s) {
-    const headers = s.split(','); // Split by comma
     const o = {};
+    if (!s || !s.trim()) {
+        return o;
+    }
+
+    s.split(',').forEach(header => {
+        const separatorIndex = header.indexOf('=');
+        if (separatorIndex === -1) {
+            return;
+        }
+
+        const key = header.slice(0, separatorIndex).trim();
+        if (!key) {
+            return;
+        }
 
-    headers.forEach(header => {
-        const [key, value] = header.split('='); // Split by equal sign
-        o[key.trim()] = value.trim(); // Add to the object, trimming spaces
+        const value = header.slice(separatorIndex + 1).trim();
+        o[key] = value;
     });
 
     return o;
 }
+
+function wireButton(id, callback) {
+    const button = document.getElementById(id);
+    if (!button) {
+        return;
+    }
+
+    button.addEventListener('click', callback);
+}
+
+function setStatus(message) {
+    const status = document.getElementById('browser-log-status');
+    if (!status) {
+        return;
+    }
+
+    status.textContent = message;
+}