Post OpenTelemetry from Vite app to Aspire dashboard

[farkhutdinova]

Hello,

I have a setup where I want OTel traces to end up in the Aspire Dashboard. My app is configured like this:
var frontend = builder.AddNpmApp("frontend", "../../web")

When my AppHost is started, I see OTEL_EXPORTER_OTLP_HEADERS and other OTel amongst the "frontend" resource's Environment variables. But my app tries to use them and gets empty string. So, the OTel is only working if I hardcode x-otlp-api-key in my telemetry initialization.

I tried to turn off OTel authentication, but got no luck.

According to Aspire Docs I need to use either config file specified in the launch settings, or add "Dashboard" section in appsettings.

• config file works only if I provide the absolute file path, that is not an option;
• "Dashboard" section that I add in appsettings.Development.json has no effect on the Dashboard, it still has ApiKey as AuthMode.

There is also option ASPIRE_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS, that should set Dashboard:Optl:AuthMode to Unsecured for me, but it doesn't. I checked with the source code and it seems to be true (from src\Aspire.Hosting\DistributedApplicationBuilder.cs) as it only sets resources' AuthMode:

                    _innerBuilder.Configuration.AddInMemoryCollection(
                        new Dictionary<string, string?>
                        {
                            ["AppHost:ResourceService:AuthMode"] = nameof(ResourceServiceAuthMode.Unsecured)
                        }
                    );

I have also tried to pass another environment variable to frontend resource like this:
.WithEnvironment("VITE_OTEL_EXPORTER_OTLP_HEADERS", builder.Configuration["OTEL_EXPORTER_OTLP_HEADERS"])
but at the moment of resource creation OTEL_EXPORTER_OTLP_HEADERS is empty.

How do I enable OpenTelemetry for my frontend app?

[daphnevisser]

TL;DR: The OTEL_EXPORTER_OTLP_* values you see on the frontend container are server-side env vars. The browser bundle can’t read them automatically. You need to bridge them into the client code.

In vite.config.ts load the container env and add the values you need into the bundle as a constant:

// vite.config.ts

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), ""); // read all process envs

  return defineConfig({
    plugins: [react()],
    define: {
      __OTEL_EXPORTER_OTLP_HEADERS__: JSON.stringify(env.OTEL_EXPORTER_OTLP_HEADERS || ""),
    },
  });
};

Use it in the telemetry init:

// init-otel.ts

declare const __OTEL_EXPORTER_OTLP_HEADERS__: string;
initializeOpenTelemetry(__OTEL_EXPORTER_OTLP_HEADERS__);

The Node process that launches Vite (the NpmApp started by Aspire) does have OTEL_EXPORTER_OTLP_HEADERS in its env. Vite reads it at build/dev time injects only that string into the client.