[v8] Multiple roots detected with manual spans

[MrSerth]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

8.2.1

Framework Version

No response

Link to Sentry event

https://codeocean.sentry.io/performance/trace/ee6b9b5549414a8f83fcd71f9f24d054/

SDK Setup

Sentry.init({
  dsn: sentrySettings.data('dsn'),
  attachStacktrace: true,
  release: sentrySettings.data('release'),
  environment: sentrySettings.data('environment'),
  autoSessionTracking: true,
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.0,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
        Sentry.browserProfilingIntegration(),
        Sentry.browserTracingIntegration(),
        Sentry.extraErrorDataIntegration(),
        Sentry.httpClientIntegration(),
        Sentry.replayIntegration(),
        Sentry.reportingObserverIntegration(),
        Sentry.sessionTimingIntegration(),
    ],
  profilesSampleRate: 1.0,
  initialScope: scope =>{
      if (current_user) {
          scope.setUser(_.omit(current_user, 'displayname'));
      }
      return scope;
  }
});

Steps to Reproduce

I am trying to add some custom transactions to my frontend code, allowing to gather further insights. With the previous v7 of the SDK, I was able to achieve that:

As shown, the "run" transaction might last several seconds, and I want to have it separate for further analysis. In v7 code, I was manually starting a transaction. With v8, I am about to migrate to Sentry.startSpanManual with no currently active parent span, so that something formally known as "transaction" should be created.

However, my new transactions always keep the same trace ID, even when trying the forceTransaction option (see screenshot in "actual result"):

const cause = initiator.data('cause') || initiator.prop('id');
Sentry.startSpanManual({ name: cause, op: "transaction", forceTransaction: true }, span => {
    callback(span);
});

I already tried passing a new scope (similar to #12000), but without success either. Further, I am not sure what the actual expected behavior should be. When reading #11599, I got the impression that the newly observed behavior is expected ("All events happening within one route are associated with the trace from the propagation context."), but since the Sentry Saas UI still reports the "multiple root transactions" error, I am not sure about that.

Expected Result

Each transaction is shown in a dedicated trace and I can decide to start a new transaction as desired. Specifically, the "page load" and my various "run" transactions are not merged together. See my above screenshot for my expectation.

Actual Result

The initial page load and my custom transactions are grouped in the same trace. Simultaneously, I get a warning about "Multiple root transactions have been found with this trace ID.".