startTransaction creates a transaction, but getActiveTransaction returns undefined: leads to no sentry-trace header

[slaesh]

Is there an existing issue for this?

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

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/angular

SDK Version

6.19.7

Framework Version

6.19.7

Link to Sentry event

No response

Steps to Reproduce

browsertracing settings:

	new Integrations.BrowserTracing({
        tracingOrigins: environment.sentry?.tracingOrigins,
        routingInstrumentation,
        traceFetch: true,
        traceXHR: true,
        shouldCreateSpanForRequest: (url) => {
          console.warn('TEST', url);
          return true;
        },
      })

the actual call:

  callToApi(): Observable<string> {
    console.error('hasTracingEnabled', hasTracingEnabled()); // prints true

    const transaction = startTransaction({ name: 'transaction test?', op: 'http call test' });
    const activeTransaction = getActiveTransaction();

    console.log('activeTransaction', !!activeTransaction, !!transaction); // prints false, true

    return this.httpClient
      .get(`super/cool/url`, {
        headers: {
		  'even-more': 'headers...',
        },
        responseType: 'text',
      })
      .pipe(
        tap(() => {
          transaction.finish();
        })
      );
  }

Expected Result

1. getActiveTransaction shouldn't return undefined
2. the outgoing http-call should have the sentry-trace header set

Actual Result

1. getActiveTransaction returns undefined
2. the outgoing http-call is missing the sentry-trace header

[Lms24]

Hi @slaesh, thanks for writing in. I remember coming across a similar problem some time ago so let's see if we can find something here. Just as a heads-up, we're currently actively working on v7 of our JS SDKs (see #4882) which means that it might take a little longer than usual to get to the bottom of this. I just have a few questions:

• Did you also install @sentry/tracing alongside @sentry/angular?
• Which version of Angular are you using?
• If you're using Angular >= 10, could you try installing the @sentry/angular@7.0.0-beta.0 and @sentry/tracing@7.0.0-beta.0 and see if the problem still exists?

[slaesh]

thanks @Lms24, that's fine. thanks for your quick reply though! it does not block us currently, but would make our lives easier to have this distributed tracing (automatically, not by hand)..

so, yeah both packages are installed.

imports are used from the angular package:
import { getActiveTransaction, startTransaction } from '@sentry/angular';

angular 13.3.4 is used

some more insights: I debuged through the code.. the xhrCallback is fired.. the shouldCreateSpanForRequest is called and returns true.. BUT the point were it "aborts" the span-creation is that there somehow is no "active" transaction..

do we need to specify something special while "starting" the transaction?
how are the "scopes" handled, created, ...

I will come back with some more results using the 7-beta.0 👍

[slaesh]

with the v7 its not working either.. the only requests where it works are the op: 'pageload' ones..
so in "general" it somehow works.. but the key is the "active transaction".. why would startTransaction not get the "active one"? =)

[Lms24]

Hi @slaesh , thanks for getting back to me with the information.

I think I know what might be causing getActiveTransaction to return undefined here. According to the docs regarding custom instrumentation, you should add the following line after calling startTransaction to set the returned transaction as the currently active one on the current scope:

Sentry.getCurrentHub().configureScope(scope => scope.setSpan(transaction));

This should be enough to get the active transaction and to again add the sentry-trace header to your outgoing request.
I recently reproduced this with the Browser SDK (on which the Angular SDK is based) and this line made all the difference.
LMK if this fixes the problem for you.

[slaesh]

thanks! sounds promising! guess I totally misunderstood the "automatic instrumentation" .. 🙈
So we need to write a small wrapper for this I guess ;)
I will come back later on with the results 👍

[slaesh]

works fine! just wrote a little wrapper 👍

this here made me think it is done automatically somehow: https://docs.sentry.io/platforms/javascript/performance/instrumentation/automatic-instrumentation/#tracingorigins

The default value of tracingOrigins is ['localhost', /^\//]. The JavaScript SDK will attach the sentry-trace header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list.

thanks @Lms24 !

[macabeus]

I had this same issue. The same sentence that @slaesh mentioned made me think it's done automatically.
I wasted a couple of hours on this bug until finding this issue and figured out that the Sentry.getCurrent... fixed that.

IMHO it would be great to add it into the doc when describing how tracePropagationTargets works.