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]

NextJS is not Browser, it's a NodeJS application with their own telemetry system that (supposedly) interacts with OTel

https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry

[JamesNK]

Ok. I don't know of anything special about NodeJS that stops it working. If anything it should be more likely to work because browsers must also worry about CORS while NodeJS doesn't.

[davidfowl]

@KennethHoff did you try changing the default OTLP endpoint to be http instead of https? Does the nextjs otel exporter support grpc? Those are likely the 2 things you need to do to make it work.

[DamianEdwards]

There's a sample of a Node.js app sending telemetry in the samples repo. The Node app had to be explicitly configured to disable SSL certificate validation as Node.js doesn't trust the ASP.NET Core dev certificate which is protecting the OTLP endpoint: https://github.com/dotnet/aspire-samples/blob/ab410c06fddf23f1e0369c2c6124df3f5f4909be/samples/AspireWithNode/AspireWithNode.AppHost/Program.cs#L20

[enemyss]

Hi, I made simple repo with aspire and next.js - https://github.com/enemyss/aspire-next-js