Updates-Dist Tracing-Samples and configs

Author: codyde

docs/platforms/javascript/common/tracing/configure-sampling/index.mdx

@@ -13,14 +13,7 @@ The JavaScript SDK provides two main options for controlling the sampling rate:
 1. Uniform Sample Rate (`tracesSampleRate`)
 This option sets a fixed percentage of transactions to be captured:
 
-```javascript
-Sentry.init({
-  dsn: "https://[email protected]/0",
-  integrations: [Sentry.browserTracingIntegration()],
-  // Capture 25% of all transactions
-  tracesSampleRate: 0.25
-});
-```
+<PlatformContent includePath="/tracing/sample-rate" />
 
 With `tracesSampleRate` set to `0.25`, approximately 25% of transactions will be recorded and sent to Sentry. This provides an even cross-section of transactions regardless of where in your app they occur.
 
@@ -33,33 +26,74 @@ For more granular control, you can use the `tracesSampler` function. This approa
 - Make sampling decisions based on transaction data
 - Control the inheritance of sampling decisions in distributed traces
 
+<PlatformContent includePath="/tracing/trace-sampler" />
+
+### Trace Sampler Examples
+
+1. Prioritizing Critical User Flows
+
 ```javascript
-Sentry.init({
-  dsn: "https://[email protected]/0",
-  integrations: [Sentry.browserTracingIntegration()],
-  tracesSampler: (samplingContext) => {
-    // Access transaction details from the sampling context
-    const { name, attributes, inheritOrSampleWith } = samplingContext;
-    
-    // Skip health checks entirely
-    if (name.includes('healthcheck')) {
-      return 0;
-    }
-    
-    // Capture all auth-related transactions
-    if (name.includes('auth')) {
-      return 1;
-    }
-    
-    // Sample only 1% of comment-related transactions
-    if (name.includes('comment')) {
-      return 0.01;
-    }
-    
-    // For everything else, inherit parent sampling decision or use 0.5
-    return inheritOrSampleWith(0.5);
+tracesSampler: (samplingContext) => {
+  const { name, attributes } = samplingContext;
+  
+  // Sample all checkout transactions
+  if (name.includes('/checkout') || attributes?.flow === 'checkout') {
+    return 1.0;
+  }
+  
+  // Sample 50% of login transactions
+  if (name.includes('/login') || attributes?.flow === 'login') {
+    return 0.5;
   }
-});
+  
+  // Sample 10% of everything else
+  return 0.1;
+}
+```
+
+2. Handling Different Environments
+
+```javascript
+tracesSampler: (samplingContext) => {
+  // Sample all transactions in development
+  if (process.env.NODE_ENV === 'development') {
+    return 1.0;
+  }
+  
+  // Sample 5% in production
+  if (process.env.NODE_ENV === 'production') {
+    return 0.05;
+  }
+  
+  // Sample 20% in staging
+  return 0.2;
+}
+```
+
+3. Controlling Sampling Based on User or Transaction Properties
+
+```javascript
+tracesSampler: (samplingContext) => {
+  const { attributes, inheritOrSampleWith } = samplingContext;
+  
+  // Always sample for premium users
+  if (attributes?.userTier === 'premium') {
+    return 1.0;
+  }
+  
+  // Sample more transactions for users experiencing errors
+  if (attributes?.hasRecentErrors === true) {
+    return 0.8;
+  }
+  
+  // Sample less for high-volume, low-value paths
+  if (attributes?.path?.includes('/api/metrics')) {
+    return 0.01;
+  }
+  
+  // Default sampling rate
+  return inheritOrSampleWith(0.2);
+}
 ```
 
 ## The Sampling Context Object
@@ -152,74 +186,6 @@ webSocket.send(JSON.stringify({
 }));
 ```
 
-## Real-world Use Cases for Trace Samplers
-
-1. Prioritizing Critical User Flows
-
-```javascript
-tracesSampler: (samplingContext) => {
-  const { name, attributes } = samplingContext;
-  
-  // Sample all checkout transactions
-  if (name.includes('/checkout') || attributes?.flow === 'checkout') {
-    return 1.0;
-  }
-  
-  // Sample 50% of login transactions
-  if (name.includes('/login') || attributes?.flow === 'login') {
-    return 0.5;
-  }
-  
-  // Sample 10% of everything else
-  return 0.1;
-}
-```
-
-2. Handling Different Environments
-
-```javascript
-tracesSampler: (samplingContext) => {
-  // Sample all transactions in development
-  if (process.env.NODE_ENV === 'development') {
-    return 1.0;
-  }
-  
-  // Sample 5% in production
-  if (process.env.NODE_ENV === 'production') {
-    return 0.05;
-  }
-  
-  // Sample 20% in staging
-  return 0.2;
-}
-```
-
-3. Controlling Sampling Based on User or Transaction Properties
-
-```javascript
-tracesSampler: (samplingContext) => {
-  const { attributes, inheritOrSampleWith } = samplingContext;
-  
-  // Always sample for premium users
-  if (attributes?.userTier === 'premium') {
-    return 1.0;
-  }
-  
-  // Sample more transactions for users experiencing errors
-  if (attributes?.hasRecentErrors === true) {
-    return 0.8;
-  }
-  
-  // Sample less for high-volume, low-value paths
-  if (attributes?.path?.includes('/api/metrics')) {
-    return 0.01;
-  }
-  
-  // Default sampling rate
-  return inheritOrSampleWith(0.2);
-}
-```
-
 ## Conclusion
 
 Effective sampling is key to getting the most value from Sentry's performance monitoring while minimizing overhead. The `tracesSampler` function gives you precise control over which transactions to record, allowing you to focus on the most important parts of your application.

docs/platforms/javascript/common/tracing/distributed-tracing/index.mdx

@@ -6,10 +6,6 @@ notSupported:
   - javascript.cordova
 ---
 
-If the overall application landscape that you want to observe with Sentry consists of more than just a single service or application, distributed tracing can add a lot of value.
-
-## What is Distributed Tracing?
-
 <PlatformContent includePath="distributed-tracing/explanation" />
 
 ## Basic Example
@@ -25,8 +21,12 @@ What happens in the background is that Sentry uses reads and further propagates
 - `sentry-trace`
 - `baggage`
 
+<Alert>
+
 If you run any JavaScript applications in your distributed system, make sure that those two headers are added to your CORS allowlist and won't be blocked or stripped by your proxy servers, gateways, or firewalls.
 
+</Alert>
+
 ## How to Use Distributed Tracing?
 
 <PlatformContent includePath="distributed-tracing/how-to-use/" />

docs/platforms/javascript/common/tracing/span-metrics/examples.mdx

@@ -172,8 +172,6 @@ Sentry.startSpan(
       span.setAttribute('ui.total_request_time_ms', totalRequestTime);
       span.setAttribute('stream.rendering_mode', 'markdown');
       span.setAttribute('stream.tokens_received', tokensReceived);
-      span.setAttribute('user.perceived_latency_ms', 
-        firstTokenReceived ? totalRequestTime - span.getAttribute('ui.time_to_first_token_ms') : totalRequestTime);
     }
   }
 );
@@ -197,14 +195,6 @@ Sentry.startSpan(
     const span = Sentry.getActiveSpan();
     const startTime = Date.now();
 
-    // Record queue time if applicable
-    if (requestQueuedAt) {
-      const queueTime = startTime - requestQueuedAt;
-      if (span) {
-        span.setAttribute('llm.queue_time_ms', queueTime);
-      }
-    }
-    
     try {
       // Check rate limits before processing
       const rateLimits = await getRateLimits();
@@ -419,9 +409,10 @@ Sentry.startSpan(
       'outcome.output_size_bytes': 31457280  // 30MB
     }
   },
-  async () => {
+   async () => {
     // Job processing implementation
-  }
+   }
+ )
 );
 ```
 

platform-includes/distributed-tracing/explanation/javascript.mdx

@@ -1,3 +1,3 @@
-Distributed tracing connects and records the path of requests as they travel through your distributed system, creating a comprehensive timeline of events that would otherwise be fragmented across different components. 
+Distributed tracing connects and records the path of requests as they travel through the different tiers of your application architecture. If your architecture consists of multiple services that live on different sub-domains (e.g. `fe.example.com` and `api.example.com`), distributed tracing will help you follow the path of events as they move from one service to another.
 
 This end-to-end visibility allows developers to identify bottlenecks, pinpoint the root cause of errors, and understand component interactions—turning what would be a complex debugging nightmare into a manageable process that improves system reliability and performance.

platform-includes/distributed-tracing/how-to-use/javascript.astro.mdx

@@ -1,15 +1,68 @@
 If you're using our Astro SDK, distributed tracing will work out of the box for the client and server runtimes.
-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.
+
+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.
 
 ```javascript
 // sentry.client.config.js
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
   integrations: [Sentry.browserTracingIntegration()],
+  // Capture 100% of spans. This is useful for development and debugging. Consider reducing in production or using traceSampler
+  tracesSampleRate: 1.0,
   tracePropagationTargets: ["https://myproject.org", /^\/api\//],
 });
 ```
 
+### Trace Propagation Examples
+
+#### Example 1: Microservices E-commerce Platform
+
+```javascript
+// sentry.client.config.js
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [Sentry.browserTracingIntegration()],
+  // Capture 100% of spans. This is useful for development and debugging. Consider reducing in production or using traceSampler
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [
+    "https://api.myecommerce.com",
+    "https://auth.myecommerce.com",
+    /^\/internal-api\//
+  ],
+});
+```
+
+This tells Sentry to track user journeys across three places:
+
+* 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.
+
+#### Example 2: Mobile App with Backend Services
+
+```javascript
+// sentry.client.config.js
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: [
+    "https://api.myapp.com",
+    "https://media.myapp.com",
+    /^\/local-api\//
+  ],
+});
+```
+
+This configuration lets your app track user actions across:
+
+* Your main API server (handles most app functions)
+* Your media server (handles images, videos, etc.)
+* Any local API endpoints in your app
+
+If your app crashes while a user is uploading a photo, you can trace exactly where the problem occurred - in the app itself, the main API, or the media service.
+
 ### Disabling Distributed Tracing
 
 If you want to disable distributed tracing and ensure no Sentry trace headers are sent, you can configure your SDK like this:

platform-includes/distributed-tracing/how-to-use/javascript.cloudflare.mdx

@@ -11,8 +11,55 @@ If you want to disable distributed tracing, set the `tracePropagationTargets` op
 ```javascript
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-
+  // Capture 100% of spans. This is useful for development and debugging. Consider reducing in production or using traceSampler
+  tracesSampleRate: 1.0,
   // Overwrite the defaults to ensure no trace headers are sent
   tracePropagationTargets: [],
 });
 ```
+
+### Trace Propagation Examples
+
+#### Example 1: Microservices E-commerce Platform
+
+```javascript
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  // Capture 100% of spans. This is useful for development and debugging. Consider reducing in production or using traceSampler
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [
+    "https://api.myecommerce.com",
+    "https://auth.myecommerce.com",
+    /^\/internal-api\//
+  ],
+});
+```
+
+This tells Sentry to track user journeys across three places:
+
+* 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.
+
+#### Example 2: Mobile App with Backend Services
+
+```javascript
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  tracePropagationTargets: [
+    "https://api.myapp.com",
+    "https://media.myapp.com",
+    /^\/local-api\//
+  ],
+});
+```
+
+This configuration lets your app track user actions across:
+
+* Your main API server (handles most app functions)
+* Your media server (handles images, videos, etc.)
+* Any local API endpoints in your app
+
+If your app crashes while a user is uploading a photo, you can trace exactly where the problem occurred - in the app itself, the main API, or the media service.