如何部署/v1/traces端点以接入浏览器OpenTelemetry追踪至Cloud Trace？

问题描述 #

我按照Google Cloud Trace的Node.js OpenTelemetry指南完成了后端追踪数据收集，现在想要添加前端栈追踪。我引入了@opentelemetry/exporter-trace-otlp-http并编写了代码，但发现前端会尝试将追踪数据发送到本地的/v1/traces端点，而这个端点没有服务监听。请问需要在这个端点部署什么才能将追踪数据接入Cloud Trace？

我的前端追踪代码如下：

import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { Resource } from '@opentelemetry/resources';
import {
  ConsoleSpanExporter,
  SimpleSpanProcessor,
  WebTracerProvider,
} from '@opentelemetry/sdk-trace-web';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';

const consoleExporter = new ConsoleSpanExporter();

const collectorExporter = new OTLPTraceExporter({
  headers: {},
});

const provider = new WebTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'contra-web-app',
  }),
});

const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(consoleExporter));

provider.addSpanProcessor(new SimpleSpanProcessor(collectorExporter));

provider.register();

registerInstrumentations({
  instrumentations: [fetchInstrumentation],
  tracerProvider: provider,
});

export const TraceProvider = ({ children }) => {
  return <>{children}</>;
};

解决方案 #

你不需要自己在/v1/traces端点部署自定义服务，有两种安全可行的方式将前端追踪数据接入Cloud Trace：

1. 使用Cloud Trace专用的前端导出器 #

Google提供了专门针对Web前端的@google-cloud/opentelemetry-cloud-trace-exporter，它可以直接将追踪数据发送到Cloud Trace服务端，无需中间代理，且避免了前端暴露GCP密钥的风险（依赖Google客户端身份验证机制，比如GCP环境下的应用默认凭据，或用户的Google账号权限）。

修改你的代码，替换OTLP导出器：

// 导入Cloud Trace Web导出器
import { CloudTraceExporter } from '@google-cloud/opentelemetry-cloud-trace-exporter';
// 其他导入保持不变

// 替换原有的collectorExporter
const cloudTraceExporter = new CloudTraceExporter({
  projectId: '你的GCP项目ID', // 若前端部署在GCP环境（如Cloud Run、App Engine），可省略该参数，会自动获取
});

// 将导出器添加到Span处理器
provider.addSpanProcessor(new SimpleSpanProcessor(cloudTraceExporter));

2. 部署OpenTelemetry Collector作为代理 #

如果坚持使用OTLP导出器，需要部署OpenTelemetry Collector作为中间层：它监听前端发送的OTLP HTTP请求，然后将数据转发到Cloud Trace（Collector会安全处理GCP认证，无需在前端暴露密钥）。

步骤1：配置Collector

创建otel-collector-config.yaml配置文件：

receivers:
  otlp:
    protocols:
      http:
        endpoint: "0.0.0.0:4318" # 监听4318端口的HTTP请求

exporters:
  googlecloud:
    project: "你的GCP项目ID"
    trace:
      enabled: true

service:
  pipelines:
    traces:
      receivers: [otlp]
      exporters: [googlecloud]

步骤2：启动Collector

可以用Docker启动Collector：

docker run -p 4318:4318 -v $(pwd)/otel-collector-config.yaml:/etc/otel-collector-config.yaml otel/opentelemetry-collector-contrib:latest --config=/etc/otel-collector-config.yaml

步骤3：修改前端导出器配置

将前端的OTLP导出器指向Collector的地址：

const collectorExporter = new OTLPTraceExporter({
  url: 'http://你的Collector服务器地址:4318/v1/traces', // 替换为实际的Collector地址
  headers: {},
});

关键注意事项 #

不要直接让前端发送请求到Cloud Trace的官方OTLP端点：该端点需要GCP身份认证，若在前端硬编码密钥（如服务账号密钥）会导致密钥泄露，带来严重的安全风险。上述两种方案都避免了这个问题。

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