如何直接从浏览器将 OpenTelemetry 跟踪发送到 Honeycomb.io？答案

【问题标题】：How to send OpenTelemetry traces to Honeycomb.io directly from browser?如何直接从浏览器将 OpenTelemetry 跟踪发送到 Honeycomb.io？
【发布时间】：2022-01-23 02:14:33
【问题描述】：

我一直在尝试构建一个 OpenTelemetry 实现，将跟踪直接发送到 Honeycomb.io。

// tracer.js
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const HONEYCOMB_DATASET = '<DATA_SET>';
const HONEYCOMB_TEAM = '<API_KEY>';
const HONEYCOMB_URL = `https://api.honeycomb.io:443/v1/traces/`;
const exporter = new OTLPTraceExporter({
  url: HONEYCOMB_URL,
  headers: {
    'X-Honeycomb-Team': HONEYCOMB_TEAM,
    'X-Honeycomb-Dataset': HONEYCOMB_DATASET,
  },
});

const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

export const tracer = provider.getTracer('default tracer');

如果我以后打电话

tracer.startSpan('link click').setAttributes(attributes).end();

我收到了来自 https://api.honeycomb.io/v1/traces/ 的 501 回复，其中包含正文：

{
  "message": "Invalid content-type. Only application/protobuf is supported."
}

如何以 Protobufs 的形式发送我的跟踪记录？

【问题讨论】：

标签： javascript browser open-telemetry

【解决方案1】：

目前 Honeycomb 建议解决此问题的方法是通过应用程序与其 API 之间的 OpenTelemetry 收集器。

这个想法是，您可以通过 HTTPS 将跟踪发送到您的收集器，通过适用于您的基础设施的任何形式的安全性，然后让收集器在将数据发送到 Honeycomb 之前对您的数据进行处理（从而防止您的 Honeycomb API 密钥被暴露到浏览器）。

来源：https://www.honeycomb.io/blog/opentelemetry-browser-instrumentation/

我计划在 Honeycomb 更新其 API 以通过 HTTPS 处理跟踪收集时更新此答案。

【讨论】：