Expose API to generate active root spans in Browser SDKs

[mydea]

Description

Today, we have isomorphic APIs to start spans, which can be active or inactive.

Active spans can only be made active in a callback. This makes sense and works well for Node, but in the browser it can be tricky and really does not work well in many cases. For the most common use case, we automatically generate active root spans for pageloads and navigations, which are idle spans. However, outside of these, it is not really possible to start generically active root spans in the Browser, that encapsulate anything that happens while the root span is active. Think this:

// navigation is over, I want to encompass a certain user flow with a transaction
function startObserving() {
  // start root span...
}

function endObserving() {
  // end root span...
}

onUserClickedButtonA(startObserving);
onUserClickedButtonB(endObserving);

(for example see #13470)

In the browser, it is usually not possible to wrap such things in a callback - and, additionally, the isolation does not work anyhow at all in the browser, so it wouldn't really help anyhow.

We should offer a way to do such things in the browser. There are a few options here:

1. We could expose startIdleSpan from the SDKs. Today, this is only exported from @sentry/core, but not from e.g. @sentry/browser. This is a somewhat stable API that also makes the resulting span active. However, it has a bunch of baggage around it, and may or may not be what users actually want.
2. We could expose the currently private/unexported _setSpanOnScope(span, scope) API, or something like it. However, this will only work in browser, not in Node. It may be confusing for users, or may not be.
3. Add a new (?) API to browser only to start an active span outside of a callback. E.g. startActiveDetachedSpan (naming is hard...). This again could not work on Node, we'd need to think about if this should simply not exist in Node, or be a noop (or start an inactive span there...)
4. Add an option (maybe just in browser?) to startInactiveSpan to make it active. This will obviously be a confusing naming 😅 startInactiveSpan({ forceActive: true }) lol.
5. Users can somehow do this manually, kind of, by passing an async function that is ended on-demand. e.g.:

let resolve;
Sentry.startSpan({ name: 'my span' }, async () => {
  await new Promise((_resolve) => {
    resolve = _resolve;
  });
});

// When done, call` resolve()` to end the span (and stop making it active).

However this is very intimate in the sense of that this relies on the fact that we don't actually keep the active scope isolated per callback, plus requires some mental gymnastics from users to understand why this is even working. But it is possible.

So TLDR the options I see are:

1. Export startIdleSpan - this is either not exported from node, or starts an inactive span there
2. Export e.g. setSpanForScope(span, getCurrentScope()) API - this either is not exported from node or noops there
3. Export e.g. const span = startActiveDetachedSpan() API - this either is not exported from node or starts an inactive span there
4. Add option like forceActive: true to existing startInactiveSpan() API - this could noop in Node (?)
5. Do nothing, forcing users to somehow hack this behavior themselves