Aspire Dashboard Standalone with Angular SPA

[cplankl]

Hey there,

I try to push OpenTelemetry traces to a local Aspire Dashboard running as a Docker container.

I followed the docs provided here: https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/dashboard/enable-browser-telemetry?tabs=bash

I started my Aspire dashboard with
docker run --rm -it -d -p 18888:18888 -p 4317:18889 -p 4318:18890 -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=* -e DOTNET_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS=true --name aspire-dashboard mcr.microsoft.com/dotnet/aspire-dashboard:8.2.

In my Angular app I created an instrumentation.ts file that looks like this:

import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME} from '@opentelemetry/semantic-conventions';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';

export function initializeTelemetry(otlpUrl, resourceAttributes) {
  const otlpOptions = {
    url: `${otlpUrl}/v1/traces`,
  };

  const attributes = parseDelimitedValues(resourceAttributes);
  attributes[ATTR_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({
    // 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;
}

in my main.ts I call this function like this:

// Setup OpenTelemetry
initializeTelemetry(
  'http://localhost:4318',
  'service.instance.id=1a5f9c1e-e5ba-451b-95ee-ced1ee89c168'
)

Unfortunately I'm not able to publish traces to Aspire dashboard. In my browser console log I get the following error:

Access to resource at 'http://localhost:4318/v1/traces' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

Even after specifying the CORS policy in my docker run command:

docker run --rm -it -d -p 18888:18888 -p 4317:18889 -p 4318:18890 -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=http://localhost:4200,http://localhost,https://localhost:4200,https://localhost -e DOTNET_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS=true --name aspire-dashboard mcr.microsoft.com/dotnet/aspire-dashboard:8.2

it does not work but the error is slightly different:

Access to resource at 'http://localhost:4318/v1/traces' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'

Does anyone have an idea what must be done to get it work?

Thanks to everyone in advance

[wallyrion]

1. You should use http/Protobuf instead of json for exporter.
   Replace
   import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
   with
   import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
2. For me, it worked only after I ALLOWED_HEADERS for aspire dashboard via (DASHBOARD__OTLP__CORS__ALLOWEDHEADERS) env
   e.g.

docker run-p 5570:18890 -p 5568:18888 -p 5569:18889 --name aspire-dashboard -e Dashboard__Frontend__BrowserToken='admin' -e DASHBOARD__OTLP__AUTHMODE='ApiKey' -e DASHBOARD__OTLP__PRIMARYAPIKEY='dev' -e DASHBOARD__OTLP__CORS__ALLOWEDHEADERS='*' -e DASHBOARD__OTLP__CORS__ALLOWEDORIGINS=http://localhost:5173 mcr.microsoft.com/dotnet/nightly/aspire-dashboard:9.0.1-preview.1

[IEvangelist]

I have a branch that does this in the dotnet/aspire-samples, I'm not sure if I pushed it up yet - I'll follow up with how to do that. Related to dotnet/aspire-samples#409