diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.astro.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.astro.mdx index 09d81ff38ae00c..e4f7c86b47fb03 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.astro.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.astro.mdx @@ -2,6 +2,14 @@ If you're using our Astro SDK, distributed tracing will work out of the box for When you are interacting with other external API systems, you might have to define `tracePropagationTargets` to get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript // sentry.client.config.js Sentry.init({ @@ -26,19 +34,17 @@ Sentry.init({ tracesSampleRate: 1.0, tracePropagationTargets: [ "https://api.myecommerce.com", - "https://auth.myecommerce.com", - /^\/internal-api\// + "https://auth.myecommerce.com" ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.cloudflare.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.cloudflare.mdx index 7688ad53e0f190..0c73cfe57e7549 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.cloudflare.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.cloudflare.mdx @@ -2,7 +2,7 @@ The Sentry Cloudflare SDK has out of the box support for distributed tracing if ### Custom Instrumentation -If you don't want to use tracing, you can set up Custom Instrumentation for distributed tracing. +If you don't want to use the default tracing setup, you can set up Custom Instrumentation for distributed tracing. ### Disabling Distributed Tracing @@ -29,19 +29,17 @@ Sentry.init({ tracesSampleRate: 1.0, tracePropagationTargets: [ "https://api.myecommerce.com", - "https://auth.myecommerce.com", - /^\/internal-api\// + "https://auth.myecommerce.com" ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.mdx index e295015ca993da..6b50a7924fc846 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.mdx @@ -2,6 +2,14 @@ If you're using the current version of our JavaScript SDK and have enabled the ` To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, define your `tracePropagationTargets`. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript Sentry.init({ dsn: "___PUBLIC_DSN___", @@ -46,18 +54,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx index 5cfc5362d33456..3a12a629dfbf3e 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx @@ -2,6 +2,14 @@ If you're using the current version of our Next.js SDK, distributed tracing will For client-side, when you are interacting with other external API systems, you might have to define `tracePropagationTargets` to get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript // sentry.client.config.js Sentry.init({ @@ -25,18 +33,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx index 2c00dffbf78bed..8e27e136e525cd 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.node.mdx @@ -8,9 +8,17 @@ Sentry.init({ }); ``` + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ### Custom Instrumentation -If you don't want to use tracing, you can set up Custom Instrumentation for distributed tracing. +If you don't want to use the default tracing setup, you can set up Custom Instrumentation for distributed tracing. #### Example 1: Microservices E-commerce Platform @@ -20,18 +28,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx index f9c359e2de9200..c0756a680c563c 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx @@ -2,6 +2,14 @@ If you're using the current version of our Nuxt SDK, distributed tracing will wo To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` for client-side. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript {filename:sentry.client.config.(js|ts)} Sentry.init({ dsn: "___PUBLIC_DSN___", @@ -21,18 +29,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx index 446ceae36ee0d3..ffd06215d2f28c 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx @@ -33,6 +33,14 @@ The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and t To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` on the client side. See Dealing with CORS Issues for more information. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript // entry.client.tsx Sentry.init({ @@ -58,18 +66,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx index 629b78fd8a284c..c9a28f16de064b 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.solidstart.mdx @@ -27,6 +27,14 @@ export default defineConfig({ To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` for client-side. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript // hooks.client.js Sentry.init({ @@ -52,18 +60,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx index 89f7186e25f181..81a50bd9f535b1 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.sveltekit.mdx @@ -2,6 +2,14 @@ If you're using the current version of our SvelteKit SDK, distributed tracing wi When you are interacting with other external API systems, you might have to define `tracePropagationTargets` to get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues. + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + +For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. + + + ```javascript // hooks.client.js Sentry.init({ @@ -29,18 +37,16 @@ Sentry.init({ tracePropagationTargets: [ "https://api.myecommerce.com", "https://auth.myecommerce.com", - /^\/internal-api\// ], }); ``` -This tells Sentry to track user journeys across three places: +This tells Sentry to pass trace headers across the following paths: * Your main API server (where product data comes from) * Your authentication server (where logins happen) -* Any API calls that start with "/internal-api/" on your current domain -This way, if a customer experiences an error during checkout, you can see the complete path their request took across these different services. +This way, if a customer experiences an error during checkout, or you want to check the performance of a specific endpoint, you can see the complete path their request took across these different services. #### Example 2: Mobile App with Backend Services