How do I integrate NextJS' OpenTelemetry support with .Net Aspire?

[KennethHoff]

I've tried implementing support for OpenTelemetry w/ NextJS using .Net Aspire. I spent a fair number of hours yesterday looking through NextJS' docs (https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry) as well as yours (https://github.com/dotnet/aspire-samples/tree/b013f64e063dce2a4c72b840eab83d43991a5d22/samples/AspireWithNode), but no matter what I do, I am unable to see anything pop up in the traces panel.

There are so many moving pieces that it's near-impossible to figure out what is going from; All the environment variables are there, and according to NextJS' docs, this is all you should have to do to follow the standard systems:

import { registerOTel } from '@vercel/otel';

// The following function does get called by NextJS, according to the console.
export function register() {
  console.log('service name:', process.env.OTEL_SERVICE_NAME); // This is the right string
  console.log('endpoint:', process.env.OTEL_EXPORTER_OTLP_ENDPOINT); // This seems to be the right string.
  registerOTel(); // This is supposed to use these env. variables, according to NextJS' docs.
  console.log('Registered OTel'); // This gets called.
}

This is my Aspire code:

var builder = DistributedApplication.CreateBuilder(args);
builder
	.AddNpmApp(
		"Frontend",
		"<PATH>",
		"dev"
	)
	.WithOtlpExporter()
	.WithHttpEndpoint(env: "PORT", port: 3000)
	.WithExternalHttpEndpoints();

var app = builder.Build();

await app.RunAsync().ConfigureAwait(false);

As you can see in this image, the traces selector doesn't even include the service.

[davidfowl]

You might need to make the default OTLP endpoint http based to make these scenarios work more seamlessly.

cc @JamesNK @samsp-msft @DamianEdwards

[KennethHoff]

I figured it out. The OTEL_LOG_LEVEL=debug hint helped a lot.

In addition to requiring the http/protobuf protocol, I also had to disable TLS certification, using .WithEnvironment("NODE_TLS_REJECT_UNAUTHORIZED", "0")

[KennethHoff]

I figured out how to make it work with the gRPC endpoint as well:

import { AzureMonitorTraceExporter } from '@azure/monitor-opentelemetry-exporter';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-node';
import { registerOTel } from "@vercel/otel";

const spanProcessors = [new BatchSpanProcessor(new OTLPTraceExporter())];

if (process.env.APPLICATIONINSIGHTS_CONNECTION_STRING) {
  spanProcessors.push(new BatchSpanProcessor(new AzureMonitorTraceExporter()));
}

registerOTel({ spanProcessors: spanProcessors });

[enemyss]

thanks, I managed to use grpc protocol as well, reused your code but had issue using @vercel/otel registration, but it works well with manual one

import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-grpc";
import { Resource } from '@opentelemetry/resources'
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-node";
import { NodeSDK } from '@opentelemetry/sdk-node'
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
 
const sdk = new NodeSDK({
  resource: new Resource({
    [ATTR_SERVICE_NAME]: process.env.OTEL_SERVICE_NAME,
  }),
  spanProcessor: new BatchSpanProcessor(new OTLPTraceExporter()),
})
sdk.start()

[KennethHoff]

This is my actual code:

// instrumentation.ts


import { registerOTel } from '@vercel/otel';

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { spanProcessors } = await import('./instrumentation.node');
    registerOTel({ spanProcessors: spanProcessors });
  }
}

// instrumentation.node.js


import { AzureMonitorTraceExporter } from '@azure/monitor-opentelemetry-exporter';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-node';

const spanProcessors = [new BatchSpanProcessor(new OTLPTraceExporter())];

if (process.env.APPLICATIONINSIGHTS_CONNECTION_STRING) {
  spanProcessors.push(new BatchSpanProcessor(new AzureMonitorTraceExporter()));
}

export { spanProcessors };

[oising]

Hey @KennethHoff -- how did you get it working for HTTP? I tried replacing exporter-trace-otlp-grpc with exporter-trace-otlp-http but it started blowing up with 415 unsupported media type from the endpoint, and it wasn't really clear what was happening. I got GRPC working fine on the NodeJS side but if you want to include client-side OTEL using otel/js, you have to switch everything to http, including the backend (limitation of Aspire)

[KennethHoff]

I can't fully remember what I ended up with, but it stopped working at some point, and I haven't looked into it

[timfewi]

@oising I had the same issue and managed to solve it by making the following change:

- import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+ import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';

// instrumentation.node.ts 
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
import { Resource } from '@opentelemetry/resources';
import { NodeSDK } from '@opentelemetry/sdk-node';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node';
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';

function parseOtlpHeaders(headerString: string): Record<string, string> {
    return headerString.split(',')
        .map(pair => pair.trim())
        .reduce((headers, pair) => {
            const [key, value] = pair.split('=');
            if (key && value) {
                headers[key.trim()] = value.trim();
            }
            return headers;
        }, {} as Record<string, string>);
}

const otlpEndpoint = `${process.env.OTEL_EXPORTER_OTLP_ENDPOINT}/v1/traces`;

const additionalHeaders = process.env.OTEL_EXPORTER_OTLP_HEADERS
    ? parseOtlpHeaders(process.env.OTEL_EXPORTER_OTLP_HEADERS)
    : {};

const exporterHeaders = {
    'Content-Type': 'application/x-protobuf',
    ...additionalHeaders
};

const exporter = new OTLPTraceExporter({
    url: otlpEndpoint,
    headers: exporterHeaders
});

const sdk = new NodeSDK({
    resource: new Resource({
        [ATTR_SERVICE_NAME]: process.env.OTEL_SERVICE_NAME || 'frontend'
    }),
    spanProcessors: [new SimpleSpanProcessor(exporter)]
});

sdk.start();

// instrumentation.ts
export async function register() {
    if (process.env.NEXT_RUNTIME === 'nodejs') {
        await import('./instrumentation.node');
    }
}

[ByronMayne]

I have the same issue was @oising, when using the javascript exporter you get a 415 (Unsupported Media Type) using the json version. I have a TypeScript frontend application and I want to push the telemetry directly to the dashboard. This is my setup

import { BatchSpanProcessor, 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 { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request/build/src/xhr';
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
import { resourceFromAttributes, type Resource } from '@opentelemetry/resources';

const endpoint = import.meta.env.OTEL_EXPORTER_OTLP_ENDPOINT;
const serviceName = import.meta.env.OTEL_SERVICE_NAME;

const attributes = {
    [ATTR_SERVICE_NAME]: serviceName,
    ...parseDelimitedValues(import.meta.env.OTEL_RESOURCE_ATTRIBUTES)
}

const headers = {
    "Content-Type":  'application/json',
    ...parseDelimitedValues(import.meta.env.OTEL_EXPORTER_OTLP_HEADERS)
};



const exporter = new OTLPTraceExporter({
    url: `${endpoint}/v1/traces`,
    headers: headers,
    concurrencyLimit: 10,
    timeoutMillis: 30000,
});


const provider = new WebTracerProvider({
    resource: resourceFromAttributes(attributes),
    spanProcessors: [
        new BatchSpanProcessor(exporter, {
            maxQueueSize: 100,
            maxExportBatchSize: 10,
            scheduledDelayMillis: 500,
            exportTimeoutMillis: 30000,
        })]
});


provider.register({
  // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
});

registerInstrumentations({
    instrumentations: [
        new UserInteractionInstrumentation(),
        new DocumentLoadInstrumentation(),
        new XMLHttpRequestInstrumentation()
    ],
});

function parseDelimitedValues(s:string) {
    const headers:string[] = s.split(','); // Split by comma
    const o:Record<string, string> = {};

    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;
}

[oising]

Yes, this is correct. I ended up using gRPC.

[JamesNK]

Where do the docs say JSON OTLP is supported? I can fix that.

Aspire dashboard has only ever supported gRPC and HTTP/Protobuf.

[ByronMayne]

I think it's just a confusion from the docs on my part. There is the grpc endpoint and the http endpoint I falsely assumed that http is json and proto is for grpc. There are exporters for both JSON and proto for tracing, logging, and metrics.

Maybe just add an explicit call-out and an error message along with a return code. For example saying only 'application/x-proto' is an accepted content time. The only reason I figured it out was browsing the source code and attaching the debugger. I also tripped up because the code is setup to parse the application/json content type but at the very bottom just ignores it.

TLDR: the issue was my fault but there is room for improvement to make sure no one else falls into the trap.

[JamesNK]

Ok. AI is on it: #11253

[ByronMayne]

Thank you :)