CORS issue with allowedTracingOrigins - RUM setup

[psivadasan-dev]

Is your feature request related to a problem? Please describe.
In our SPA using Angular, we are using Datadog RUM. We recently enabled allowedTracingOrigins in RUM setup
https://docs.datadoghq.com/real_user_monitoring/connect_rum_and_traces/?tab=browserrum

This is causing CORS issues when we are using request redirect to a 3rd party lib, for authentication with that server.
Error:

Access to XMLHttpRequest at 'xyz' has been blocked by CORS policy: Request header field x-datadog-origin is not allowed by Access-Control-Allow-Headers in preflight response.

We, unfortunately, don't have access to the 3rd partly lib server to modify Access-Control-Allow-Headers.

Describe the solution you'd like
In such scenarios, we would like to have tracing skipped for specific requests and thereby prevent Datadog from adding extra headers.

[amortemousque]

Hello @psivadasan-dev,
If the requests redirected to a 3rd party lib have a specific origin, you should be able to use allowedTracingOrigins to avoid adding tracing headers to those requests.
allowedTracingOrigins accepts JavaScript strings, regular expressions, and functions that match the origins called by your browser application.

[psivadasan-dev]

Hey unfortunately as its a redirect to 3rd party lib the origin of that request is of our main service and we need tracing for our main service. Hence this request.

[amortemousque]

Do you have an idea of the API you want us to provide?

[psivadasan-dev]

yes. I think this is roughly what I think we should provide
skipTracingForUrls?: MatchOption[] | undefined in RumInitConfiguration
And I think if we modify tracer.ts -> isAllowedUrl fn to also have && !matchList(configuration.skipTracingForUrls, requestUrl)
This should prevent adding tracing headers.

[amortemousque]

Thanks for the suggestion!
If I understand correctly, you want access to the entire URL instead of the origin to check if a request need to be allowed?

[psivadasan-dev]

That should be a supplemental check to the existing one.
So if I can put it another way -> I want to verify if the URL is an allowedURL for tracing if it satisfies the allowedTracingOrigins input and doesn't satisfy skipTracingForUrls input.

function isAllowedUrl(configuration: RumConfiguration, requestUrl: string) {
  return matchList(configuration.allowedTracingOrigins, getOrigin(requestUrl)) && !matchList(configuration.skipTracingForUrls, requestUrl)
}

[amortemousque]

Do you have an example of the values you would set in allowedTracingOrigins and skipTracingForUrls?

[psivadasan-dev]

It should be an array of string | RegExp right? similar to allowedTracingOrigins.
ex:

allowedTracingOrigins = [/http(s?):\/\/.*\.ceta\.com/]
skipTracingForUrls = [/http(s?):\/\/.*\.ceta\.com\/search-service\/login/]

[amortemousque]

I see, thanks again for the feedback, we will look at your suggestion.

[praveen-sivadasan]

I'm currently blocked with this. If you guys can expedite this then I can really appreciate it.

[yannickadam]

Hi! allowedTracingUrls is now available.
You can use a RegExp or a function to ensure only URLs that do not contain /search-service/login are traced.

You can find documentation about it here: https://docs.datadoghq.com/real_user_monitoring/connect_rum_and_traces/?tab=browserrum#usage

[praveen-sivadasan]

@yannickadam @BenoitZugmeyer - I'm configuring my DD rum setup using the following

  datadogRum.init({
    applicationId: 'myapp-id-token',
    clientToken: 'pub-my-client-token',
    site: 'datadoghq.com',
    service: 'service-name',
    env: environment.name,
    version: '1.0.0', 
    sampleRate: 30,
    trackInteractions: true,
    trackViewsManually: true,
    allowedTracingUrls: [/http(s?):\/\/.*\.company\.com\/(?!(search-service\/login))/], 
    excludedActivityUrls: [
      /\/rest\/event-heartbeat/
    ]
  });

The allowed tracing URL skips a specific request.
The npm package version being used is @datadog/browser-rum@4.30.1.
I'm now not seeing tracing headers added to any of the requests. Is there something I'm missing? or is this a bug?

[yannickadam]

@praveen-sivadasan I've tested your RegExp and it seems to work fine. Could you please try the following:

• I see you have a sampleRate:30. For the sake of testing, you may want to crank it up to 100. No headers will be added to resources if the session is not sampled. Moreover, a page refresh will not change the session sampling state. You need to clear your site data.
• You are using manual view tracking. The view must be started before the resources are fetch, else no headers will be added.
• Last, you could use a function to trace the URLs being checked against your RegExp:

allowedTracingUrls: [ (url) => { console.log(url); return true; }]

[praveen-sivadasan]

@yannickadam thanks for the tips. I think it was mostly the sampleRate. Now it's working as expected!

[JenniferDwinall]

• Last, you could use a function to trace the URLs being checked against your RegExp:

@yannickadam Hello, I am trying to troubleshoot my RUM setup. I tried adding the console.log to allowedTracingUrls but I do not see any output in console. Do you have any idea what I could be missing?

This is a reactjs site. I can see the x-datadog-* headers on some api calls. They are not appearing on graphql calls.

datadogRum.init({
		applicationId: appId,                   // The RUM application ID.
		clientToken: token,                     // A Datadog client token.
		site: 'datadoghq.com',                  // The Datadog site parameter of your organization.
		sessionSampleRate: 100,                 // The percentage of sessions to track: 100 for all, 0 for none.
		service: app.toLowerCase(),             // The service name for your application. Follows the tag syntax requirements.
		env: appConfig.environment,             // The application’s environment. Follows the tag syntax requirements.
		forwardErrorsToLogs: true,              // @datadog/browser-logs (also needs sessionSampleRate)
		beforeSend,                             // callback function allows you to also discard a log before it is sent to Datadog.
		allowedTracingUrls: [                   // A list of request URLs used to inject tracing headers.
			(url) => { console.log('allowedTracingUrls', url); return true; },
			{ match: "http://localhost", propagatorTypes: ["datadog"] },
			{ match: "https://localhost", propagatorTypes: ["datadog"] }
		],
		traceSampleRate: 100,                   // The percentage of requests to trace: 100 for all, 0 for none.
		telemetrySampleRate: 100,
		trackResources: true,
		trackLongTasks: true,
		trackUserInteractions: true,
		trackViewsManually: false,
		sessionReplaySampleRate: 100
	})