Propagate open telemetry browser traces to Aspire

I am developing a new Aspnet core Aspire 9.1 app with Angular 19 and the app is working fine





Now I would like to propagate open telemetry traces from the browser to the Aspire dashboard.

I followed Tim Deschryver's article and Oscar Reyes's article but I don't understand what is missing or what I am doing wrong

fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Server.Kestrel[0]
HTTP/2 over TLS was not negotiated on an HTTP/2-only endpoint.




Please find below the instrumentation provider:

import { EnvironmentProviders, provideAppInitializer } from '@angular/core';
import {
ConsoleSpanExporter,
SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { W3CTraceContextPropagator } from '@opentelemetry/core';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION, } from '@opentelemetry/semantic-conventions'
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';

export function provideInstrumentation(): EnvironmentProviders {
return provideAppInitializer(() => {
const resource = resourceFromAttributes({
[ATTR_SERVICE_NAME]: 'angular',
[ATTR_SERVICE_VERSION]: '1.0.0',
});

const provider = new WebTracerProvider({
resource,
spanProcessors: [
new SimpleSpanProcessor(new OTLPTraceExporter({
url: `${window.origin}/v1/traces`,
})),
new SimpleSpanProcessor(new ConsoleSpanExporter()),
]
});

provider.register({
contextManager: new ZoneContextManager(),
propagator: new W3CTraceContextPropagator(),
});

registerInstrumentations({
instrumentations: [
getWebAutoInstrumentations({
'@opentelemetry/instrumentation-document-load': {
ignorePerformancePaintEvents: false,
},
'@opentelemetry/instrumentation-user-interaction': {
enabled: false,
},
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: /.*/,
},
'@opentelemetry/instrumentation-xml-http-request': {
propagateTraceHeaderCorsUrls: /.*/,
},
}),
],
});
});
}




Continue reading...