sentry-performance-monitoring

# Sentry - Performance Monitoring

Track application performance with transactions, spans, and distributed tracing.

## Enable Performance Monitoring

```typescript
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "...",
  tracesSampleRate: 0.2, // 20% of transactions
  integrations: [
    Sentry.browserTracingIntegration(),
  ],
});
```

## Transactions

### Automatic Transactions

```typescript
// Browser: Page loads and navigations
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration({
      tracePropagationTargets: ["localhost", /^https:\/\/api\.example\.com/],
    }),
  ],
});
```

### Manual Transactions

```typescript
const transaction = Sentry.startTransaction({
  op: "task",
  name: "Process Order",
});

try {
  // Your code here
  processOrder(order);
  transaction.setStatus("ok");
} catch (error) {
  transaction.setStatus("internal_error");
  throw error;
} finally {
  transaction.finish();
}
```

## Spans

### Create Child Spans

```typescript
const transaction = Sentry.startTransaction({ name: "checkout" });

const validationSpan = transaction.startChild({
  op: "validation",
  description: "Validate cart items",
});
await validateCart(cart);
validationSpan.finish();

const paymentSpan = transaction.startChild({
  op: "payment",
  description: "Process payment",
});
await processPayment(payment);
paymentSpan.finish();

transaction.finish();
```

### Span Data

```typescript
const span = transaction.startChild({
  op: "db.query",
  description: "SELECT * FROM users WHERE id = ?",
  data: {
    "db.system": "postgresql",
    "db.name": "production",
  },
});
```

## Distributed Tracing

### Propagate Trace Context

```typescript
// Frontend
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration({
      tracePropagationTargets: [
        "localhost",
        /^https:\/\/api\.yoursite\.com/,
      ],
    }),
  ],
});

// This automatically adds sentry-trace and baggage headers
```

### Backend Continuation

```t