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