diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx index 0a3c1df24749a..7d01181f3156f 100644 --- 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 index 972c9df11510f..20500d0a05a14 100644 --- 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 index 174185b0eef30..351377462d667 100644 --- 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 tracingOrigins 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 tracePropagationTargets list. `tracePropagationTargets` was previously called `tracingOrigins`. diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx index 0aa21f6fa6bd9..213f06404223e 100644 --- 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 index cc7218159137d..ac00859143c11 100644 --- 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 index 7628077a30bba..ddd6d92db4c9e 100644 --- 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 index fa601401a54dc..058bcd20d2cf0 100644 --- 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/tracingOrigins-example/javascript.ember.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.ember.mdx similarity index 76% rename from src/platform-includes/performance/tracingOrigins-example/javascript.ember.mdx rename to src/platform-includes/performance/tracePropagationTargets-example/javascript.ember.mdx index abcb8c5549b3c..7a798b40e840a 100644 --- a/src/platform-includes/performance/tracingOrigins-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/tracingOrigins-example/javascript.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx similarity index 76% rename from src/platform-includes/performance/tracingOrigins-example/javascript.mdx rename to src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx index 9048d720bf147..fcbefddb20091 100644 --- a/src/platform-includes/performance/tracingOrigins-example/javascript.mdx +++ b/src/platform-includes/performance/tracePropagationTargets-example/javascript.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. -- 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 @@ -11,7 +11,7 @@ Sentry.init({ // ... integrations: [ new BrowserTracing({ - tracingOrigins: ["api.example.com"], + tracePropagationTargets: ["api.example.com"], }), ], }); diff --git a/src/platform-includes/performance/tracingOrigins-example/javascript.nextjs.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.nextjs.mdx similarity index 76% rename from src/platform-includes/performance/tracingOrigins-example/javascript.nextjs.mdx rename to src/platform-includes/performance/tracePropagationTargets-example/javascript.nextjs.mdx index 85633cef970e5..35528f01e309c 100644 --- a/src/platform-includes/performance/tracingOrigins-example/javascript.nextjs.mdx +++ b/src/platform-includes/performance/tracePropagationTargets-example/javascript.nextjs.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 -- 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 @@ -11,7 +11,7 @@ Sentry.init({ // ... integrations: [ new Sentry.BrowserTracing({ - tracingOrigins: ["api.example.com"], + tracePropagationTargets: ["api.example.com"], }), ], }); diff --git a/src/platform-includes/performance/tracingOrigins-example/react-native.mdx b/src/platform-includes/performance/tracePropagationTargets-example/react-native.mdx similarity index 100% rename from src/platform-includes/performance/tracingOrigins-example/react-native.mdx rename to 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 index 7d87054f79e34..24782e9c89f38 100644 --- 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 + + + +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. + + 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`). - + 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. diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 932692f7bdf7a..16d76ac853ca8 100644 --- 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 index b5c8b083de299..b377024e22fef 100644 --- 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.** - + 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 index de75051658021..cddf739201bfd 100644 --- 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 index 25a2c5cf4dde9..860b60065091a 100644 --- 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 index 32f370d1c9af1..cd804625f03f2 100644 --- 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%