Add API to browser SDKs to set span active on scope #13807

Problem Statement

Currently there's no great way in browser SDKs to start a (root) span that's

1. long-running, in the sense of not bound to a callback.
2. active on the scope, in so far that child spans can be attached to the span.

Of course there are workarounds for this problem (i.e. an async long-running callback that in conjunction with an outside of closure variable to access a span outside the callback) but they're far from intuitive and discoverable for users.

The only way to start a callback-less span at the moment is via Sentry.startInactiveSpan. The consequence of this behaviour is that you can't add child spans to this span, meaning the resulting root span/txn won't have any child spans:

const span1 = Sentry.startInactiveSpan(...);
Sentry.startSpan({name: "childOfSpan1", () => {....}};
span1.end();

// Result:
// span1 is its a root span w/o child span
// childOfSpan1 is a root span

Solution Brainstorm

We should export an API from browser SDKs that allows users to set a span active on the current scope. Naming and API details are subject of discussion but a workflow could look something like this:

const span1 = Sentry.startInactiveSpan(...);
Sentry.setSpanActiveOnCurrentScope(rootSpan);

Sentry.startSpan({name: "childOfSpan1", () => {....}};
span1.end();


// Result: 
// span1 is a root span
// childOfSpan1 is a child of span 1 (lol)

Out of scope for this issue

• Nested child span hierarchy (currently not reliably possible in browser)
• Exporting startIdleSpan
  • Making a startInactiveSpan- created span become active is the more versatile approach as opposed to idleSpans. We can think about exporting startIdleSpan additionally.
• Exporting a shim for this API in Node: We can do this on request but for now let's hold off from it and keep it browser-only. This API should and will never work in Node environments, so the only thing we can do is log a warning and no-op other than that.