Mixing manual spans with auto instrumentation (fetch)

[alexvanboxel]

I've created an end-to-end demo for otel (https://github.com/treactor) with backend/frontend/collector. In the Javascript for web part. I'm having trouble with mixing auto instrumentation and manual spans. In the below code I want to start a manual span and I want to fetch (auto instrumented) to be the child of my manual span. I know the below code is wrong, it results in 2 separate unconnected spans. I think I need to use the context.when but didn't see any examples of the usage.

Help is appreciated. Thanks.

    getData() {
        const span = tracer.startSpan("Fetch Node Info")
         ....
        fetch(this.apiUrl + "/treact/nodes/" + this.props.element + "/info", {
            headers: {
                'Accept': 'application/json',
            }
        })
            .then(res => this.handleError(res))
            .then(res => res.json() as Promise<AboutResult>)
            .then((result) => {
                    ....
                    span.end();
                },
                (error) => {
                    ....
                    span.end();
                }
            )

    }

[Flarna]

You have to create a new context holding your span and run the fetch code with this context set as active.

see e.g.

opentelemetry-js/examples/tracer-web/examples/fetch/index.js

Lines 53 to 54 in 71ba83a

	const singleSpan = webTracerWithZone.startSpan(`files-series-info`);
	context.with(setSpan(context.active(), singleSpan), () => {

[alexvanboxel]

This looks exactly what I needed... I probably overlooked it. I'll try this evening and keep you posted, as it's my "hobby" project. Thanks!

[carlosnat]

Thanks for the help, I used to put the prisma span as child of my parent span.