Browser tracingOrigins is deprecated and replaced with tracePropagationTargets (#5759)

timfish · AbhiPrasad · lizokm · web-flow · commit e7240c101122 · 2022-11-15T11:13:55.000+01:00
Replace `tracingOrigins` with `tracePropagationTargets`. 

I have not touched `tracingOrigins` in relation to these because they will need to updated to the latest JavaScript SDK for these changes to become relevant:
- React Native
- Electron `Net` integration
- Wizard docs for capacitor/ionic

Update the description for `shouldCreateSpanForRequest` because it no longer considers `tracingOrigins`.

Co-authored-by: Abhijeet Prasad &lt;devabhiprasad@gmail.com&gt;
Co-authored-by: Liza Mock &lt;lizka920@gmail.com&gt;
diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx
@@ -14,7 +14,7 @@ Sentry.init({
     // which automatically instruments your application to monitor its
     // performance, including custom Angular routing instrumentation
     new BrowserTracing({
-      tracingOrigins: ["localhost", "https://yourserver.io/api"],
+      tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
   ],
diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx
@@ -20,7 +20,7 @@ Sentry.init({
   integrations: [
     new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),
   ],
   // Set tracesSampleRate to 1.0 to capture 100%
@@ -58,7 +58,7 @@ Sentry.init({
   integrations: [
     new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),
   ],
   // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/src/platform-includes/performance/connect-services/javascript.mdx b/src/platform-includes/performance/connect-services/javascript.mdx
@@ -10,7 +10,7 @@ The `baggage` header was added with version 7 of the Sentry Javascript SDK and i
 
 All of Sentry's tracing-related integrations (`BrowserTracing`, `Http`, and `Express`), as well as the Next.JS SDK, either generate or pick up and propagate the trace headers automatically, as appropriate, for all transactions and spans that they generate.
 
-The JavaScript SDK will only attach the trace headers to outgoing HTTP requests for which the destination is a substring or regex match to the <PlatformLink to="/performance/instrumentation/automatic-instrumentation/#tracingorigins">tracingOrigins</PlatformLink> list.
+The JavaScript SDK will only attach the trace headers to outgoing HTTP requests for which the destination is a substring or regex match to the <PlatformLink to="/performance/instrumentation/automatic-instrumentation/#tracePropagationTargets">tracePropagationTargets</PlatformLink> list. `tracePropagationTargets` was previously called `tracingOrigins`.
 
 <!-- copied from automatic-instrumentation to emphasize this point -->
 
diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx
@@ -12,7 +12,7 @@ Sentry.init({
 
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),
   ],
diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.ember.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.ember.mdx
@@ -13,7 +13,7 @@ Sentry.init({
 
   // Configuration for Ember's default tracing integration.
   browserTracingOptions: {
-    tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+    tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
   },
 });
 ```
diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx
@@ -13,7 +13,7 @@ Sentry.init({
 
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),
   ],
@@ -30,7 +30,7 @@ Sentry.init({
 
   integrations: [
     new Sentry.BrowserTracing({
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
       // ... other options
     }),
   ],
diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx
@@ -16,7 +16,7 @@ Sentry.init({
 
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
 
       // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation
       routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
diff --git a/src/platform-includes/performance/tracePropagationTargets-example/javascript.ember.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.ember.mdx
@@ -3,7 +3,7 @@ For example:
 - A frontend application is served from `example.com`
 - A backend service is served from `api.example.com`
 - The frontend application makes API calls to the backend
-- The option can be configured for the built-in ember browser tracing: `browserTracingOptions: { tracingOrigins: ['api.example.com'] }}`
+- The option can be configured for the built-in ember browser tracing: `browserTracingOptions: { tracePropagationTargets: ['api.example.com'] }}`
 - Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached.
 
 ```javascript
@@ -16,7 +16,7 @@ Sentry.init({
   tracesSampleRate: 0.2,
 
   browserTracingOptions: {
-    tracingOrigins: ["localhost", "my-site-url.com", "api.example.com"],
+    tracePropagationTargets: ["localhost", "my-site-url.com", "api.example.com"],
   },
 });
 ```
diff --git a/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx
@@ -3,15 +3,15 @@ For example:
 - A frontend application is served from `example.com`.
 - A backend service is served from `api.example.com`.
 - The frontend application makes API calls to the backend.
-- Set the `tracingOrigins` option to `['api.example.com']`.
+- Set the `tracePropagationTargets` option to `['api.example.com']`.
 - Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached.
 
 ```javascript
 Sentry.init({
   // ...
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ["api.example.com"],
+      tracePropagationTargets: ["api.example.com"],
     }),
   ],
 });
diff --git a/src/platform-includes/performance/tracePropagationTargets-example/javascript.nextjs.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.nextjs.mdx
@@ -3,15 +3,15 @@ For example:
 - A frontend application is served from `example.com`
 - A backend service is served from `api.example.com`
 - The frontend application makes API calls to the backend
-- Set the `tracingOrigins` option to `['api.example.com']`
+- Set the `tracePropagationTargets` option to `['api.example.com']`
 - Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached
 
 ```javascript
 Sentry.init({
   // ...
   integrations: [
     new Sentry.BrowserTracing({
-      tracingOrigins: ["api.example.com"],
+      tracePropagationTargets: ["api.example.com"],
     }),
   ],
 });
diff --git a/src/platform-includes/performance/tracePropagationTargets-example/react-native.mdx b/src/platform-includes/performance/tracePropagationTargets-example/react-native.mdx
diff --git a/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx b/src/platforms/javascript/common/performance/instrumentation/automatic-instrumentation.mdx
@@ -50,15 +50,21 @@ Sentry.init({
 
 Supported options:
 
-### tracingOrigins
+### tracePropagationTargets
+
+<Note>
+
+The `tracingOrigins` option was renamed `tracePropagationTargets` and deprecated in [version `7.19.0`](https://github.com/getsentry/sentry-javascript/releases/tag/7.19.0) of the JavaScript SDK. `tracingOrigins` will be removed in version 8.
+
+</Note>
 
 A list of strings and regular expressions. The JavaScript SDK will attach the `sentry-trace` and `baggage` headers to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you'll need to add it there to propagate the `sentry-trace` and `baggage` headers to the backend services, which is required to link transactions together as part of a single trace.
 
-**The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the additional headers attached.**
+**The `tracePropagationTargets` option matches the entire request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests don't unnecessarily have additional headers attached.**
 
-The default value of `tracingOrigins` is `['localhost', /^\//]`. This means that by default, tracing headers are only attached to requests that contain `localhost` in their URL or requests whose URL starts with a `'/'` (for example `GET /api/v1/users`).
+The default value of `tracePropagationTargets` is `['localhost', /^\//]`. This means that by default, tracing headers are only attached to requests that contain `localhost` in their URL or requests whose URL starts with a `'/'` (for example `GET /api/v1/users`).
 
-<PlatformContent includePath="performance/tracingOrigins-example" />
+<PlatformContent includePath="performance/tracePropagationTargets-example" />
 
 You will need to configure your web server [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) to allow the `sentry-trace` and `baggage` headers. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"` and `"Access-Control-Allow-Headers: baggage"`, but it depends on your set up. If you do not allow the two headers, the request might be blocked.
 
@@ -70,7 +76,9 @@ You will need to configure your web server [CORS](https://developer.mozilla.org/
 
 ### shouldCreateSpanForRequest
 
-This function can be used to filter out unwanted spans such as XHR's running health checks or something similar. Whether specified or not, `shouldCreateSpanForRequest` filters out everything but what was defined in `tracingOrigins`.
+This function can be used to filter out unwanted spans such as XHRs running
+health checks or something similar. If this function isn't specified, spans
+will be created for all requests.
 
 <PlatformContent includePath="performance/filter-span-example" />
 
diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx
@@ -66,7 +66,7 @@ Most community CDNs properly set an `Access-Control-Allow-Origin` header.
 
 If your application started to misbehave because of performing additional OPTIONS requests, it is most likely an issue with unwanted `sentry-trace` request headers, which can happen when you are using too generic a configuration for our Tracing Integration in the Browser SDK.
 
-To fix this, change the `tracingOrigins` option during SDK initialization. For more details, see [Automatic Instrumentation](/platforms/javascript/performance/instrumentation/automatic-instrumentation/#tracingorigins) in our Performance Monitoring documentation.
+To fix this, change the `tracePropagationTargets` option during SDK initialization. For more details, see [Automatic Instrumentation](/platforms/javascript/performance/instrumentation/automatic-instrumentation/#tracePropagationTargets) in our Performance Monitoring documentation.
 
 ## `instrument.js` Line Numbers for Console Log statements
 
diff --git a/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx b/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx
@@ -419,7 +419,7 @@ If you use **Typescript**, you can type your `beforeNavigate` function with `Sen
 
 The default value of `tracingOrigins` is `['localhost', /^\//]`. The React Native SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add the domain there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the entire request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.**
 
-<PlatformContent includePath="performance/tracingOrigins-example" />
+<PlatformContent includePath="performance/tracePropagationTargets-example" />
 
 You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your setup. If you do not allow the `sentry-trace` header, the request might be blocked.
 
diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular.md
@@ -31,7 +31,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ["localhost", "https://yourserver.io/api"],
+      tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
   ],
diff --git a/src/wizard/javascript/angularjs.md b/src/wizard/javascript/angularjs.md
@@ -30,7 +30,7 @@ Sentry.init({
   integrations: [
     new AngularIntegration(),
     new BrowserTracing({
-      tracingOrigins: ["localhost", "https://yourserver.io/api"],
+      tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
     }),
   ],
   // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue.md
@@ -48,7 +48,7 @@ Sentry.init({
   integrations: [
     new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),
   ],
   // Set tracesSampleRate to 1.0 to capture 100%
@@ -86,7 +86,7 @@ Sentry.init({
   integrations: [
     new BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
     }),
   ],
   // Set tracesSampleRate to 1.0 to capture 100%
