sentry-setup-tracing

Sentry.init({
 integrations: [
 Sentry.browserTracingIntegration({
 // Trace propagation targets (which URLs get trace headers)
 tracePropagationTargets: ["localhost", /^https:\/\/api\./],

 // Modify spans before creation (e.g., parameterize URLs)
 beforeStartSpan: (context) => {
 return {
 ...context,
 name: context.name.replace(/\/users\/\d+/, "/users/:id"),
 };
 },

 // Filter unwanted spans
 shouldCreateSpanForRequest: (url) => {
 return !url.includes("healthcheck");
 },

 // Timing configurations
 idleTimeout: 1000, // ms before finishing idle spans
 finalTimeout: 30000, // max span duration
 childSpanTimeout: 15000, // max child span duration

 // Feature toggles
 instrumentNavigation: true, // Track URL changes
 instrumentPageLoad: true, // Track initial page load
 enableLongTask: true, // Track long tasks
 enableInp: true, // Track Interaction to Next Paint

 // INP sampling (separate from tracesSampleRate)
 interactionsSampleRate: 1.0,
 }),
 ],
});

// Synchronous operation
const result = Sentry.startSpan(
 { name: "expensive-calculation", op: "function" },
 () => {
 return calculateSomething();
 }
);

// Async operation
const result = await Sentry.startSpan(
 { name: "fetch-user-data", op: "http.client" },
 async () => {
 const response = await fetch("/api/user");
 return response.json();
 }
);

// With attributes
const result = await Sentry.startSpan(
 {
 name: "process-order",
 op: "task",
 attributes: {
 "order.id": orderId,
 "order.amount": amount,
 },
 },
 async () => {
 return processOrder(orderId);
 }
);

await Sentry.startSpan({ name: "checkout-flow", op: "transaction" }, async () => {
 // Child span 1
 await Sentry.startSpan({ name: "validate-cart", op: "validation" }, async () => {
 await validateCart();
 });

 // Child span 2
 await Sentry.startSpan({ name: "process-payment", op: "payment" }, async () => {
 await processPayment();
 });

 // Child span 3
 await Sentry.startSpan({ name: "send-confirmation", op: "email" }, async () => {
 await sendConfirmationEmail();
 });
});

function middleware(req, res, next) {
 return Sentry.startSpanManual({ name: "middleware", op: "middleware" }, (span) => {
 res.once("finish", () => {
 span.setStatus({ code: res.statusCode

## Distributed Tracing

### How It Works

 Sentry propagates trace context via HTTP headers:

 

- `sentry-trace`: Contains trace ID, span ID, sampling decision 

- `baggage`: Contains additional trace metadata 

### Configure Trace Propagation Targets

 Only URLs matching these patterns receive trace headers:

### Server-Side Rendering (Meta Tags)

 For SSR apps, inject trace data in HTML:

 The browser SDK automatically reads these and continues the trace.

### Manual Propagation

 For non-HTTP channels (WebSockets, message queues):

## Common Operation Types

Use consistent `op` values for better organization:

 Operation Use Case 
 `http.client` Outgoing HTTP requests 
 `http.server` Incoming HTTP requests 
 `db` Database operations 
 `db.query` Database queries 
 `cache` Cache operations 
 `task` Background tasks 
 `function` Function execution 
 `ui.render` UI rendering 
 `ui.action` User interactions 
 `serialize` Serialization 
 `middleware` Middleware execution

## What Gets Automatically Traced

### Browser (with browserTracingIntegration)

 

- Page loads 

- Navigation/route changes 

- XHR/fetch requests 

- Long tasks 

- Interaction to Next Paint (INP) 

### Next.js

 

- API routes 

- Server components 

- Page renders 

- Data fetching 

### Node.js (with framework integrations)

 

- HTTP requests (Express, Fastify, etc.) 

- Database queries (with ORM integrations) 

- External API calls 

### Python (with framework integrations)

 

- Django views, middleware, templates 

- Flask routes 

- FastAPI endpoints 

- SQLAlchemy queries 

- Celery tasks

## Disabling Tracing

**Important:** Setting `tracesSampleRate: 0` does NOT disable tracing - it still processes traces but never sends them.

 To fully disable tracing, omit both sampling options:

## Production Sampling Recommendations

Traffic Level Recommended Rate 
 Development/Testing `1.0` (100%) 
 Low traffic (<1K req/min) `0.5` - `1.0` 
 Medium traffic (1K-10K req/min) `0.1` - `0.5` 
 High traffic (>10K req/min) `0.01` - `0.1` 
 

 Use dynamic sampling to capture more of important transactions:

## Verification Steps

After setup, verify tracing is working:

### JavaScript

### Python

 **Check in Sentry:**

 

- Go to **Performance** section 

- Look for your test transaction 

- Verify spans appear in the trace waterfall

## Summary Checklist