fix(tracing): Pass tracePropagationTargets to instrumentOutgoingRequests (getsentry#6259)

Fix a bug in our `BrowserTracing` integration which caused the new `tracePropagationTargets` option not to be passed to `instrumentOutgoingRequests` where it was needed to decide if our tracing headers should be attached to outgoing requests or not. 

Because we never passed this value to the instrumentation function, custom-defined `tracePropagationTargets` values were not respected by the SDK and headers were attached to requests whose URLs matched the default targets or custom specified `tracingOrigins`. 

With this fix, we also make a change how we internally handle the co-existance between the deprecated `tracingOrigins` and `tracePropagationTargets` options. We now simply overwrite the default `tracePropagationTargets` values with custom `tracingOrigins` (if available and no custom `tracePropagationTargets` were set). This enables us to internally only rely on `tracePropagationTargets`. 
Note that we still have to keep setting `tracingOrigins` to `browserTracing.options`, as removing this field or changing the type would break users. This field however is not used internally anymore.

This patch also adds a bunch of unit and integration tests to make sure, `tracePropagationTargets` works as expected this time. Also, the tests check that `tracingOrigins` is still respected properly.

Author: Lms24

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargets/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Integrations.BrowserTracing({ tracePropagationTargets: ['http://example.com'] })],
+  tracesSampleRate: 1,
+});

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargets/subject.js

@@ -0,0 +1 @@
+fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargets/test.ts

@@ -0,0 +1,27 @@
+import { expect, Request } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+sentryTest(
+  'should attach `sentry-trace` and `baggage` header to request matching tracePropagationTargets',
+  async ({ getLocalTestPath, page }) => {
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    requests?.forEach(async (request: Request) => {
+      const requestHeaders = await request.allHeaders();
+      expect(requestHeaders).toMatchObject({
+        'sentry-trace': expect.any(String),
+        baggage: expect.any(String),
+      });
+    });
+  },
+);

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargetsAndOrigins/init.js

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    new Integrations.BrowserTracing({ tracePropagationTargets: [], tracingOrigins: ['http://example.com'] }),
+  ],
+  tracesSampleRate: 1,
+});

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargetsAndOrigins/subject.js

@@ -0,0 +1 @@
+fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargetsAndOrigins/test.ts

@@ -0,0 +1,27 @@
+import { expect, Request } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+sentryTest(
+  '[pre-v8] should prefer custom tracePropagationTargets over tracingOrigins',
+  async ({ getLocalTestPath, page }) => {
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    requests?.forEach(async (request: Request) => {
+      const requestHeaders = await request.allHeaders();
+      expect(requestHeaders).not.toMatchObject({
+        'sentry-trace': expect.any(String),
+        baggage: expect.any(String),
+      });
+    });
+  },
+);

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTracingOrigins/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Integrations.BrowserTracing({ tracingOrigins: ['http://example.com'] })],
+  tracesSampleRate: 1,
+});

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTracingOrigins/subject.js

@@ -0,0 +1 @@
+fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTracingOrigins/test.ts

@@ -0,0 +1,27 @@
+import { expect, Request } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+sentryTest(
+  '[pre-v8] should attach `sentry-trace` and `baggage` header to request matching tracingOrigins',
+  async ({ getLocalTestPath, page }) => {
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    requests?.forEach(async (request: Request) => {
+      const requestHeaders = await request.allHeaders();
+      expect(requestHeaders).toMatchObject({
+        'sentry-trace': expect.any(String),
+        baggage: expect.any(String),
+      });
+    });
+  },
+);

packages/integration-tests/suites/tracing/browsertracing/tracePropagationTargets/defaultTargetsMatch/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 1,
+});