Opentelemetry-js: Is it possible use the same trace through the Frontend to the Backend?

[yiyu0x]

As title, is it possible use the same trace through the Frontend to the Backend?

My Frontend is a web app, using @opentelemetry/web, Backend is a node app, using @opentelemetry/node. From my expectation, Jaeger should receive a trace that begins from my frontend to my backend.

[vmarchaud]

You'll need to setup the Jeager propagator, the doc is here: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/propagators#jaeger-propagator

[yiyu0x]

You'll need to setup the Jeager propagator, the doc is here: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/propagators#jaeger-propagator

Thanks for your help, but my backend seems not able to handle tracings from Traefik properly.
The Incoming headers have uber-trace-id, but my server.js seems not recgonizing the format.
In every incoming request, my server.js creates a new tracing. From my expectation, server.js should reuse the Traefik's uber-trace-id.

tracer.js:

'use strict';

const opentelemetry = require('@opentelemetry/api');
const { NodeTracerProvider } = require('@opentelemetry/node');
const { BasicTracerProvider, SimpleSpanProcessor, ConsoleSpanExporter } = require('@opentelemetry/tracing');
const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
const { B3Propagator } = require("@opentelemetry/core");
const { JaegerHttpTracePropagator } = require('@opentelemetry/propagator-jaeger');
opentelemetry.propagation.setGlobalPropagator(new JaegerHttpTracePropagator());

module.exports = (serviceName) => {
    const provider = new NodeTracerProvider();

    let exporter = new JaegerExporter({
        serviceName,
        host: 'jaeger-all-in-one',
        port: 6832,
    });

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

    // Initialize the OpenTelemetry APIs to use the NodeTracerProvider bindings
    provider.register();
    return opentelemetry.trace.getTracer();
};

server.js

'use strict';

const tracer = require('./tracer')('node-server');
// eslint-disable-next-line import/order
const http = require('http');

/** Starts a HTTP server that receives requests on sample server port. */
function startServer(port) {
  // Creates a server
  const server = http.createServer(handleRequest);
  // Starts the server
  server.listen(port, (err) => {
    if (err) {
      throw err;
    }
    console.log(`Node HTTP listening on ${port}`);
  });
}

/** A function which handles requests and send response. */
function handleRequest(request, response) {
  console.log('Request Headers:', request.headers)
  const currentSpan = tracer.getCurrentSpan();
  console.log('CurrentSpan:', currentSpan.context())
  // display traceid in the terminal
  console.log(`traceid: ${currentSpan.context().traceId}`);
  const span = tracer.startSpan('handleRequest', {
    parent: currentSpan,
    kind: 1, // server
    attributes: { key: 'value' },
  });
  // Annotate our span to capture metadata about the operation
  span.addEvent('invoking handleRequest');
  try {
    const body = [];
    request.on('error', (err) => console.log(err));
    request.on('data', (chunk) => body.push(chunk));
    request.on('end', () => {
      // deliberately sleeping to mock some action.
      setTimeout(() => {
        span.end();
        response.end('Hello World!');
      }, 2000);
    });
  } catch (err) {
    console.error(err);
    span.end();
  }
}

startServer(8080);

[vmarchaud]

@yiyu0x Could you attach the output of the server ? Specially the headers part ?

[renatomjr]

I debugged the code and found that this validation is the reason:
https://github.com/open-telemetry/opentelemetry-js-api/blob/main/src/trace/spancontext-utils.ts#L19

The Jaeger format can be something like ^([0-9a-f]{16})$.

Is there a workaround to this?