Missing sentry-trace in XHR requests (.NET 6 with Razor Pages)

[vladanpaunovic]

Discussed in #5152

^{Originally posted by wpaprot May 20, 2022}
Hi,
I'm trying to set up distributed tracing in my app and I run into the issue with missing sentry-trace header in requests that originates in my frontend. Even simplest case/page does not work.

My setup looks as follows:

Backend (Program.cs)

builder.Services.AddRazorPages();
builder.Services.AddControllers();
builder.WebHost.UseSentry(b => b.AddGrpc());
...
app.UseHttpsRedirection();
app.UseCors(x => x.AllowAnyHeader()
      .AllowAnyMethod()
      .AllowAnyOrigin());

app.UseStaticFiles();
app.UseRouting();
app.UseSentryTracing();
app.UseAuthorization();
app.MapRazorPages();
app.MapControllers();

app.Run();

Frontend

<script src="https://browser.sentry-cdn.com/6.19.7/bundle.tracing.js" crossorigin="anonymous"></script>
Sentry.init({
            "dsn": "http://b8d6c2cbf783405fac04428421f8e3a0@localhost:9000/4",
            "environment": "development",
            "integrations": [new Sentry.BrowserTracing()],
            "tracesSampleRate": 1.0,
            "debug": true
        });

        document.getElementById('click-me-button').addEventListener('click', function() {
            let block = document.getElementById('result-block');

            $.get('/api/greeter/transaction');
// OR 
            axios.get('/api/greeter/transaction').then(function(data){
                block.innerHTML = `<h2>Success ${data.data}</h2>`;
            }).catch(function(){
                block.innerHTML = '<h2>Error</h2>';
            })
        });

When I click the button that triggers XHR (either with jQuery od Axios) the result is the same. Call to backend is made but no sentry-trace header is being added.

Can you please share your thoughts?

[vladanpaunovic]

@wpaprot is your .NET backend on the same origin as your frontend?

In case it differs, you may need to add tracingOrigins option to your Sentry.init(). Here is the documentation.

[wpaprot]

vladanpaunovic It's on localhost (the same port) with local Sentry

[aholthagerty]

I ran into this, as well. (backend on same origin as frontend, but still no sentry-trace header sent). I updated tracingOrigins to include a regex for any relative url, and it seems to have cleared it up.

see:

// isRelative.ts
export const IsRelativeUrlRegExp = new RegExp(
  '^(?!(?:(?:[a-z]+:)?//)).*$',
  'gmi'
);

// root.tsx
import { IsRelativeUrlRegExp } from './isRelative.ts';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [
    new BrowserTracing({
      tracingOrigins: [IsRelativeUrlRegExp],
      traceXHR: true,
      idleTimeout: 60_000,
    }),
  ]
});

[wpaprot]

Thanks aholthagerty for the suggestion.
Unfortunately it didn't help.
I also tried to use full URL in outgoing XHR requests.

[vladanpaunovic]

Thanks folks! Could someone please provide a reproduction repo or a codesandbox so we can investigate it easier?

[lforst]

Agree with @vladanpaunovic that a repro would be really helpful.

One thing to try regardless is to actually start a transaction before sending a request, ie:

const transaction = Sentry.startTransaction({ name: 'some-transaction-name' });
Sentry.getCurrentHub().configureScope((scope) => {
  scope.setSpan(transaction);
});
await doXhrRequest();
transaction.finish();

For a trace header to be attached there needs to be an active transaction. Unless one is started manually, a transaction is normally only active in the first few moments of a page load. (Some exceptions are frontend routing instrumentations where additional transactions are started)

[danlamanna]

Is it possible this is just a bug in adequately wrapping axios? I'm dealing with a basic HTML page that only properly attaches the sentry-trace header to fetch requests but not axios ones.

[lforst]

@danlamanna the SDK is not wrapping axios. It only wraps fetch and XMLHttpRequest which axios is using too I'm guessing.

As @vladanpaunovic has already pointed out, it's important to add a correct tracingOrigins setting to the Sentry.init options. At least one of the items in the provided array need to match the target you're calling.

Example: If your call looks like axios.get('/api/greeter/transaction'), you need to put something like ['/api/greeter'] into your tracingOrigins. "localhost" will not work, because "localhost" is not in the axios call.

Please also check if you happen to have set traceXHR: false in your BrowserTracing options. That option most likely needs to be true.