求.NET Aspire OTEL HTTP端口浏览器端OpenTelemetry配置示例及连接排查

问题定位 #

连接被拒绝的核心原因是端口不匹配：你的docker-compose将Aspire的OTEL HTTP收集器端口18890映射到了宿主机的4138，但Vue应用请求的是4318，端口号填写错误。

正确配置步骤 #

1. 确认Docker端口映射 #

先确保docker-compose.yaml的端口配置无误：

services:
  aspire:
    image: mcr.microsoft.com/dotnet/aspire-dashboard
    ports:
    - "8000:8000" # Web控制台
    - "4317:18889" # gRPC收集器
    - "4138:18890" # HTTP收集器（宿主机4138对应容器内18890）
    environment:
      ASPNETCORE_URLS: http://0.0.0.0:8000
      DOTNET_DASHBOARD_UNSECURED_ALLOW_ANONYMOUS: true
      DASHBOARD__OTLP__CORS__ALLOWEDORIGINS: '*' # 已配置跨域，允许所有来源

2. Vue.js端OpenTelemetry配置示例 #

先安装依赖：

npm install @opentelemetry/sdk-trace-web @opentelemetry/exporter-trace-otlp-http @opentelemetry/resources @opentelemetry/semantic-conventions

创建OTEL配置文件（比如src/utils/otel.js）：

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { Resource } from '@opentelemetry/resources';
import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions';

// 初始化追踪提供者
const provider = new WebTracerProvider({
  resource: new Resource({
    [SEMRESATTRS_SERVICE_NAME]: 'vue-frontend-app', // 自定义服务名称
  }),
});

// 配置HTTP导出器，指向正确的Aspire端口
const exporter = new OTLPTraceExporter({
  url: 'http://localhost:4138/v1/traces',
});

provider.addSpanProcessor(new BatchSpanProcessor(exporter));
provider.register();

// 导出追踪实例供组件使用
export const tracer = provider.getTracer('vue-app-tracer');

3. 在Vue组件中使用追踪 #

在目标组件（比如App.vue）中引入并测试：

<script setup>
import { tracer } from './utils/otel';

const handleTestTrace = () => {
  const span = tracer.startSpan('test-button-click');
  // 模拟业务逻辑执行
  setTimeout(() => {
    span.end();
  }, 150);
};
</script>

<template>
  <button @click="handleTestTrace">触发测试追踪</button>
</template>

4. 验证流程 #

1. 启动Aspire容器：docker-compose up -d
2. 启动Vue应用：npm run dev
3. 点击测试按钮后，访问Aspire控制台（http://localhost:8000），查看是否能接收到前端追踪数据

注意事项 #

• 确认Aspire的CORS配置生效，避免浏览器跨域拦截
• 若Vue应用部署在非本地环境，需将localhost替换为Aspire服务的实际IP或域名
• 不要混淆端口：Aspire的OTEL HTTP收集器容器内端口是18890，对应宿主机的4138，而非通用OTEL默认端口4318

内容的提问来源于stack exchange，提问作者robrich