Sequential async use of startActiveSpan within a startActiveSpan results in incorrect span hierarchy

[dancrumb]

What happened?

I've created a repository that contains an SSCCE for this issue.

https://github.com/dancrumb/otel-js-bug-recreate

In short, this code snippet:

  await tracer.startActiveSpan("Test Parent", async (testSpan) => {
    await tracer.startActiveSpan("Test Child 1", async (childSpan1) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      childSpan1.end();
    });
    await tracer.startActiveSpan("Test Child 2", async (childSpan2) => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      childSpan2.end();
    });
    testSpan.end();
  });

Should result in this trace/span structure:

.
└── Test Parent
    ├── Test Child 1
    └── Test Child 2

but actually results in

.
├── Test Parent
│   └── Test Child 1
└── Test Child 2

I've run this on Chrome; I don't see that the browser should matter too much.

OpenTelemetry Setup Code

See https://github.com/dancrumb/otel-js-bug-recreate

package.json

See https://github.com/dancrumb/otel-js-bug-recreate

Relevant log output

N/A

Operating System and Version

M1 Mac Pro running Sequoia 15.1.1

Runtime and Version

Chrome Version 132.0.6834.110 (Official Build) (arm64)

I'm using esbuild to create the bundle that gets executed.

[dancrumb]

FWIW: I also tried with ConsoleSpanExporter and saw the same results

{
    "resource": {
        "attributes": {
            "service.name": "otel-recreate",
            "telemetry.sdk.language": "webjs",
            "telemetry.sdk.name": "opentelemetry",
            "telemetry.sdk.version": "1.30.1"
        }
    },
    "instrumentationScope": {
        "name": "test"
    },
    "traceId": "7ef3e3a1f1cf71c50842a2645e1b30e0",
    "parentId": "c115989f5872e21b",
    "name": "Test Child 1",
    "id": "ea6fe984e1a476d9",
    "kind": 0,
    "timestamp": 1737840959152000,
    "duration": 1002500,
    "attributes": {},
    "status": {
        "code": 0
    },
    "events": [],
    "links": []
}

{
    "resource": {
        "attributes": {
            "service.name": "otel-recreate",
            "telemetry.sdk.language": "webjs",
            "telemetry.sdk.name": "opentelemetry",
            "telemetry.sdk.version": "1.30.1"
        }
    },
    "instrumentationScope": {
        "name": "test"
    },
    "traceId": "4b509b02a9169d10f71217d581d8cb62",
    "name": "Test Child 2",
    "id": "bcc5c47d9c3ca305",
    "kind": 0,
    "timestamp": 1737840960156000,
    "duration": 1001600,
    "attributes": {},
    "status": {
        "code": 0
    },
    "events": [],
    "links": []
}

{
    "resource": {
        "attributes": {
            "service.name": "otel-recreate",
            "telemetry.sdk.language": "webjs",
            "telemetry.sdk.name": "opentelemetry",
            "telemetry.sdk.version": "1.30.1"
        }
    },
    "instrumentationScope": {
        "name": "test"
    },
    "traceId": "7ef3e3a1f1cf71c50842a2645e1b30e0",
    "name": "Test Parent",
    "id": "c115989f5872e21b",
    "kind": 0,
    "timestamp": 1737840959152000,
    "duration": 2005500,
    "attributes": {},
    "status": {
        "code": 0
    },
    "events": [],
    "links": []
}

[AdamBusfy]

Its basically still the same issue that you were facing here

#1502

The problem is async/await

I am facing the same issue.

Is there any open pull request that i can subscribe to? Let me know pls @dyladan