Traces don't propagate from Frontend to Backend

[iamanv]

I have been trying to initiate a trace from browser that are exported to both the Console as well as local OTEL collector. Additionally, the browser makes a fetch call to the backend running on localhost:7777(written in Go) that itself has its own instrumentation. I followed the examples given in the repo for fetch.

import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
import { WebTracerProvider } from '@opentelemetry/web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { B3Propagator } from '@opentelemetry/propagator-b3';

const provider = new WebTracerProvider();

// Configure a span processor and exporter for the tracer
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter())); // url is optional and can be omitted - default is http://localhost:55681/v1/trace

provider.register({
  contextManager: new ZoneContextManager(),
  propagator: new B3Propagator(),
});

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation({
     // client is running on port 1234
      ignoreUrls: [/localhost:1234\/sockjs-node/],
      propagateTraceHeaderCorsUrls: ['http://localhost:7777'],
      clearTimingResources: true,
    }),
  ],
});

const webTracer = provider.getTracer('tracer-web');
const singleSpan = webTracer.startSpan(`fetch-span-start`);

context.with(setSpan(context.active(), singleSpan), () => {
  // ping an endpoint
  fetch('http://localhost:7777/hello', {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  });
    singleSpan.end();
});

As suggested in other issues in the repo, I tried using the B3 propagator, but no luck. Even in the network tab of the browser, I don't see any B3 specific headers and at the very least, a traceparent id. Consequently, the backend service generates its own trace instead of adding a new span to the trace initiated by the browser.

Also tried the following:

• Using XHR instead of Fetch to the backend, and I still didn't see any headers being propagated.
• Using both v 0.18.0 and the latest 0.19.0 of the otel-js library with Node version v16.1.0
• Enabling CORS on the backend and as suggested in the comment Issues with joining traces between fetch instrumentation and java service #2144 (comment) like propagateTraceHeaderCorsUrls: ['/.+/g'] and propagateTraceHeaderCorsUrls: '/.+/g'

package.json

{
  "name": "tracing_web",
  "version": "0.19.0",
  "description": "Example of using @opentelemetry/web in browser",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "start": "parcel index.html"
  },
  "author": "myself",
  "license": "ISC",
  "dependencies": {
    "@opentelemetry/context-zone": "^0.18.0",
    "@opentelemetry/exporter-collector": "^0.18.0",
    "@opentelemetry/instrumentation": "^0.18.0",
    "@opentelemetry/instrumentation-document-load": "^0.16.0",
    "@opentelemetry/instrumentation-fetch": "^0.18.0",
    "@opentelemetry/instrumentation-xml-http-request": "^0.18.0",
    "@opentelemetry/propagator-b3": "^0.18.0",
    "@opentelemetry/tracing": "^0.18.0",
    "@opentelemetry/web": "^0.18.0"
  }
}

The collector to which both browser and the backend send traces to, is configured to export to a Jaeger backend. Also, I am loading this js file in a simple html file with just some text.
Is there something I am missing? Can anyone please help me understand what's keeping the headers from being shown/propagated from the browser?

[alexghr]

I recently had the same issue and in my case the problem was the builtin CORS whitelisting functionality:

propagateTraceHeaderCorsUrls: ['http://localhost:7777'],

The propagateTraceHeaderCorsUrls option takes an array of either strings or regular expressions. For strings, it does a simple equality check, which in this case would fail because it tests against the full target URL, e.g. 'http://localhost:7777/hello' === 'http://localhost:7777'

Try passing in a regexp /http:\/\/localhost:7777\.*/ 😄

[iamanv]

@alexghr thanks for replying. I just tried, unfortunately, still no signs of headers in the browser. :-(.

[iamanv]

@obecny Can you please suggest something? Would be of great help.

[iamanv]

Yes, all 6 requests have the b3 header as shown in the screenshot. Are you implying that there could be some issue with the backend service it talks to? Or something else?

[obecny]

Please experiment with those 3 settings on your servers, try to use wildcard at first for them

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

if it works then remove one by one to see what impact is has and as a final you can only set what you need.

[obecny]

in nodejs express you just have cors module for that, not sure about go

[iamanv]

I was able to debug the issue, it had to do with how my Go backend handled preflight requests and headers. After making the changes to the backend, I was able to see the headers in the request on my console. And consequently, the traces propagate properly now. Thanks for the help and suggestions @obecny

[vinaya-devopsnow]

just to close on this

On nodejs backend side for Nodejs, please add the below

1. add cors package to server.js
2. add below in tracing.js

 const { B3Propagator, B3InjectEncoding } = require('@opentelemetry/propagator-b3');
api.propagation.setGlobalPropagator(
  new CompositePropagator({
    propagators: [
      new B3Propagator(),
      new B3Propagator({ injectEncoding: B3InjectEncoding.MULTI_HEADER }),
    ],
  })

[xoscar]

I've been looking for this for about two hours, Is this documented somewhere that could be more visible?

[dyladan]

What specifically were you looking for? The CORS configuration requirement?

[vladnikolov86]

 `propagateTraceHeaderCorsUrls: ['http://localhost:7777']`,  should also be a regex, otherwise it does not work, like
  `propagateTraceHeaderCorsUrls: [new RegExp('localhost:7777')]`, 

[vjrngn]

I got this working for my setup as well (Fastify backend). Here's what worked:

• Cors plugin with custom header config - ["traceparent", "tracestate"] and

getWebAutoInstrumentations({
    "@opentelemetry/instrumentation-fetch": {
        propagateTraceHeaderCorsUrls: [new RegExp("http://localhost:3002")], // my API is running on localhost:3002
   },
}),

[Krishan27]

@vjrngn I have nestjs framework as backend, and in my otel traces i am not able to get the context progagation headers on a downstream call
context progagation headers like: traceparent, tracestate.

how to acheive these two context headers in my traces?

my code:

import {
ConsoleSpanExporter,
SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';
import { NodeSDK } from '@opentelemetry/sdk-node';
import * as process from 'process';
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express';
import { NestInstrumentation } from '@opentelemetry/instrumentation-nestjs-core';

const traceExporter = new ConsoleSpanExporter();

export const otelSDK = new NodeSDK({
spanProcessor: new SimpleSpanProcessor(traceExporter),
instrumentations: [
new HttpInstrumentation(),
new ExpressInstrumentation(),
new NestInstrumentation(),
],
});

// gracefully shut down the SDK on process exit
process.on('SIGTERM', () => {
otelSDK
.shutdown()
.then(
() => console.log('SDK shut down successfully'),
(err) => console.log('Error shutting down SDK', err),
)
.finally(() => process.exit(0));
});