Manually setting the active span in v8

[mfrey43]

Edit: I just read #11582 which has a proposed solution but it still involves wrapping everything so I think my question is still valid.

I am developing an Angular app with NgRx that makes heavy use of observables. Because of the reactive architecture tracing was already a challenge in v7. To have manual control over which span is active and when it ends I used the hub.pushScope() method. E.g.:

this.sentryAuthTransaction = SentryAngular.startTransaction({
  name: 'authentication',
  op: 'auth.authenticate',
});
SentryAngular.getCurrentHub().pushScope().setSpan(this.sentryAuthTransaction);

Everything after that would receive the correct parent span, e.g. http calls, and at the end I would finish the span and pop the scope.

// lots of ngrx actions fired
this.sentryAuthTransaction?.finish();
SentryAngular.getCurrentHub().popScope();

Now with version 8 I can no longer do that. The migration doc says to use startSpan but I don't see that as a proper alternative for my use case. It would involve going back and forth between Promises and Observables:

// promise -> observable
from(
  startSpan(
  {
    name: 'authentication',
    op: 'auth.authenticate',
  },
  async () =>
    // observable -> promise
    lastValueFrom(
      /**
       * observable chain -> very hard to figure out when it ends
       */
    )
));

So how can I handle my transactions the same as before? There is startSpanManual which, as the name suggests, lets you end() your span manually, but it only stays active while inside the callback function. This is counter intuitive to me. Why does it become inactive before it ends? I assume the Sentry team wanted to prevent leaks from people forgetting to end() the spans.

So how do I control the active span without being trapped in Sentry's function closure? Here is my workaround:

export function startManualSpan(context: StartSpanOptions): Span | null {
  let span: Span;
  let resolve: (value?: void) => void;
  startSpanManual(context, async (s) => {
    span = s;
    return new Promise((r) => (resolve = r));
  });
  const endFn = span.end.bind(span);
  span.end = (endTimestamp?: SpanTimeInput) => {
    endFn(endTimestamp);
    resolve();
  };
  return span;
}

The inner promise from the callback only resolves once I call span.end(), making my span remain active for as long as I want. I know this can't be the intended way, that's why I'm here to discuss it.

• Is there something wrong with my use case?
• Is there an easier way to create an active span without startSpan or startSpanManual?

[lforst]

Edit: I just read #11582 which has a proposed solution but it still involves wrapping everything so I think my question is still valid.

Yes, that is still the way to go. We currently do not intend to change how spans can be made active. I know this sucks a bit in the browser but we want to be compatible with OTEL's API.