Link browser tracing auto-instrumentations together

[Renaud009]

Hello everyone, I'm new in otel ecosystem so excuse me if my question is stupid.

I'm working on a poc that sends browser traces from an angular application to tempo/zipkin using otel-collector. I enabled most auto-instrumentaiton that i found available for the browser (xml-http-request, fetch, document-load, user-interactions). If properly configured, api call traces are propagator with the backend with success too.

I'm wondering how to link together all those browser traces together in order to figure out a single user journey in zipkin/tempo in order to debug an error that occured in the web application for this specific user. At the moment, I see nothing shared between those traces information:

• Shouldn't they all be merged in a single trace (share same parentid) (ex. the meta tag with attribute traceparent in index.html file).Is this even possible to do?
• I also thought about adding a specific attribute to every generated span (service.instance.id or custom attribute) in order to be able to query such attribute in zipkin query but unfortunately only XMLHttpRequestInstrumentaion and FetchInstrumention support applying a custom attribute on span (applyCustomAttributesOnSpan) in their constructor config.

[t2t2]

You can use a Resource to add attributes that then get added to every span by zipkin exporter:

import { Resource } from '@opentelemetry/resources';
import { WebTracerProvider } from '@opentelemetry/web';

const resource = new Resource({
    'browser.instance.id': generateRandomId(),
});

const provider = new WebTracerProvider({
    resource,
});

(Semantic conventions currently don't have a recommended attribute to set for this use case, so you can change to whatever attribute you prefer)