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

[wpaprot]

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?

[chadwhitacre]

Gonna try moving this to sentry-javascript ...

[vladanpaunovic]

Moved to issue #5164