How to send trace data to Jaeger through OpenTelemetry in front end app?

Question

Background

I am trying to trace in a front end app.

I am not be able to use @opentelemetry/exporter-jaeger since I believe it is for Node.js back end app only .

So I am trying to use @opentelemetry/exporter-collector .

1. Succeed to print in browser console

First I tried to print the trace data in the browser console. And the code below succeed printing the trace data.

import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
import { DocumentLoad } from '@opentelemetry/plugin-document-load';
import { SimpleSpanProcessor, ConsoleSpanExporter } from '@opentelemetry/tracing';
import { WebTracerProvider } from '@opentelemetry/web';

const provider = new WebTracerProvider({ plugins: [new DocumentLoad()] });
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register();

2. Failed to forward to Jaeger

Now I want to forward them to Jaeger.

I am running Jaeger all-in-one by

docker run -d --name jaeger \
  -e COLLECTOR_ZIPKIN_HTTP_PORT=9411 \
  -p 5775:5775/udp \
  -p 6831:6831/udp \
  -p 6832:6832/udp \
  -p 5778:5778 \
  -p 16686:16686 \
  -p 14268:14268 \
  -p 9411:9411 \
  jaegertracing/all-in-one:1.18

Based on the Jaeger port document , I might be able to use these two ports (if other ports work, that will be great too:):

14250   HTTP    collector   accept model.proto
9411    HTTP    collector   Zipkin compatible endpoint (optional)

Then I further found more info about this port :

Zipkin Formats (stable)

Jaeger Collector can also accept spans in several Zipkin data format, namely JSON v1/v2 and Thrift. The Collector needs to be configured to enable Zipkin HTTP server, eg on port 9411 used by Zipkin collectors. The server enables two endpoints that expect POST requests:

 /api/v1/spans for submitting spans in Zipkin JSON v1 or Zipkin Thrift format. /api/v2/spans for submitting spans in Zipkin JSON v2.

I updated my codes to

import { CollectorTraceExporter, CollectorProtocolNode } from '@opentelemetry/exporter-collector';
import { DocumentLoad } from '@opentelemetry/plugin-document-load';
import { SimpleSpanProcessor } from '@opentelemetry/tracing';
import { WebTracerProvider } from '@opentelemetry/web';

const provider = new WebTracerProvider({ plugins: [new DocumentLoad()] });

// The config below currently has issue
const exporter = new CollectorTraceExporter({
    serviceName: 'my-service',
    protocolNode: CollectorProtocolNode.HTTP_JSON,
    url: 'http://localhost:9411/api/v1/spans', // Also tried v2
});

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

However, I got bad request for both v1 and v2 endpoints without any response body returned

POST http://localhost:9411/api/v1/spans 400 (Bad Request)

POST http://localhost:9411/api/v2/spans 400 (Bad Request)

Any idea how can I make the request format correct? Thanks

UPDATE (8/19/2020)

I think Andrew is right that I should use OpenTelemetry collector. I also got some help from Valentin Marchaud and Deniz Gurkaynak at Gitter. Just add the link here for further people who meet same issue: https://gitter.im/open-telemetry/opentelemetry-node?at=5f3aa9481226fc21335ce61a

My final working solution posted at https://stackoverflow.com/a/63489195/2000548

Answer 1

Thing is, you should use opentelemetry collector if you use opentelemetry exporter.

Pls see schema in attachment

Also I created a gist, which will help you to setup pls see

https://gist.github.com/AndrewGrachov/11a18bc7268e43f1a36960d630a0838f

(just tune the values, export to jaeger-all-in-one instead of separate + cassandra, etc)