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/browser

SDK Version

6.18.2

Framework Version

No response

Link to Sentry event

No response

Steps to Reproduce

Configure a tunnel that requires additional headers, then initialize the client:

Sentry.init({
  …
  tunnel: '…',
  transportOptions: {
    headers: {
      'X-CSRF-Token': '…'
    }
  },
  …
});

Then trigger a client report.

Expected Result

The client report should be sent with the Fetch API instead of with the Beacon API, since it is not possible to set headers with the Beacon API:

• The sendBeacon() method does not provide ability to customize the request method, provide custom request headers, or change other processing properties of the request and response. Applications that require non-default settings for such requests should use the [FETCH] API with keep-alive flag set to true.

Actual Result

The client report is sent with the Beacon API, which fails because the required headers are not set.

See also javascript - Handling CSRF authenticity token for navigator.sendBeacon requests in rails - Stack Overflow.