Skip to content

fix(js): Fix span metrics examples #13227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 7, 2025
Merged

fix(js): Fix span metrics examples #13227

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59bc795
fix(js): Fix span metrics examples
mydea Apr 4, 2025
cc89f52
Update docs/platforms/javascript/common/tracing/span-metrics/examples…
codyde Apr 7, 2025
cb3f3cc
Update docs/platforms/javascript/common/tracing/span-metrics/examples…
codyde Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 69 additions & 71 deletions docs/concepts/key-terms/tracing/span-metrics.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,17 @@ By attaching attributes directly to spans, you create a unified view of both the
// Simple database query with dynamic attributes
Sentry.startSpan(
{
name: 'Database Query',
op: 'db.query'
name: "Database Query",
op: "db.query",
},
() => {
// Get active span to set attributes as data becomes available
const span = Sentry.getActiveSpan();

(span) => {
// Execute query and add results to span
const result = executeQuery('SELECT * FROM users WHERE active = true');
const result = executeQuery("SELECT * FROM users WHERE active = true");

// Set attributes with the results data
if (span) {
span.setAttribute('db.rows_returned', result.length);
span.setAttribute('db.execution_time_ms', result.executionTime);
}

span.setAttribute("db.rows_returned", result.length);
span.setAttribute("db.execution_time_ms", result.executionTime);

return result;
}
);
Expand All @@ -55,14 +50,14 @@ By integrating these attributes into tracing, you can maintain a single telemetr
// Adding business context to a payment processing span
Sentry.startSpan(
{
name: 'Process Payment',
op: 'payment.process',
name: "Process Payment",
op: "payment.process",
attributes: {
'payment.amount': 99.99,
'payment.currency': 'USD',
'payment.method': 'credit_card',
'customer.type': 'returning'
}
"payment.amount": 99.99,
"payment.currency": "USD",
"payment.method": "credit_card",
"customer.type": "returning",
},
},
async () => {
// Payment processing implementation
Expand Down Expand Up @@ -91,12 +86,12 @@ Augment automatically-created or manually-defined spans with additional attribut
const span = Sentry.getActiveSpan();
if (span) {
// User context
span.setAttribute('user.subscription_tier', 'premium');
span.setAttribute("user.subscription_tier", "premium");

// Multiple metrics in a single operation
span.setAttributes({
'memory.heap_used': 1024000,
'processing.total_steps': 5
"memory.heap_used": 1024000,
"processing.total_steps": 5,
});
}
```
Expand All @@ -109,16 +104,16 @@ Create spans specifically for grouping related attributes or metrics, particular
// Creating a span for monitoring external API usage
Sentry.startSpan(
{
name: 'Third-Party API Usage',
op: 'external.api',
name: "Third-Party API Usage",
op: "external.api",
attributes: {
// Performance metrics
'api.response_time_ms': 245,
"api.response_time_ms": 245,

// Context data
'feature.using_api': 'image_recognition',
'user.plan': 'enterprise'
}
"feature.using_api": "image_recognition",
"user.plan": "enterprise",
},
},
async () => {
// API call implementation
Expand All @@ -138,15 +133,15 @@ Monitor client-side performance metrics related to user experience:
// UI performance monitoring
Sentry.startSpan(
{
name: 'Page Interaction',
op: 'ui.interaction',
name: "Page Interaction",
op: "ui.interaction",
attributes: {
'ui.first_input_delay_ms': 24,
'ui.time_to_interactive_ms': 320,
'ui.frames_dropped': 0,
'user.device_type': 'mobile',
'feature.being_used': 'image_carousel'
}
"ui.first_input_delay_ms": 24,
"ui.time_to_interactive_ms": 320,
"ui.frames_dropped": 0,
"user.device_type": "mobile",
"feature.being_used": "image_carousel",
},
},
async () => {
// UI interaction handling
Expand All @@ -162,17 +157,17 @@ Track database performance characteristics and their impact on application behav
// Database query monitoring
Sentry.startSpan(
{
name: 'Product Search Query',
op: 'db.query',
name: "Product Search Query",
op: "db.query",
attributes: {
'db.query_type': 'SELECT',
'db.table': 'products',
'db.execution_time_ms': 145,
'db.rows_returned': 87,
'db.index_used': 'product_category_idx',
'business.search_term': 'winter jacket',
'business.search_filters_applied': 3
}
"db.query_type": "SELECT",
"db.table": "products",
"db.execution_time_ms": 145,
"db.rows_returned": 87,
"db.index_used": "product_category_idx",
"business.search_term": "winter jacket",
"business.search_filters_applied": 3,
},
},
async () => {
// Database query execution
Expand All @@ -188,21 +183,21 @@ Monitor file handling operations across your application stack:
// File processing monitoring
Sentry.startSpan(
{
name: 'Process Uploaded Image',
op: 'file.process',
name: "Process Uploaded Image",
op: "file.process",
attributes: {
// Technical metrics
'file.size_bytes': 2500000,
'file.type': 'image/jpeg',
"file.size_bytes": 2500000,
"file.type": "image/jpeg",

// Processing metrics
'processing.steps_completed': ['virus_scan', 'resize', 'compress'],
'processing.total_time_ms': 850,
"processing.steps_completed": ["virus_scan", "resize", "compress"],
"processing.total_time_ms": 850,

// Context data
'feature.using_upload': 'user_avatar',
'subscription.allows_hd': true
}
"feature.using_upload": "user_avatar",
"subscription.allows_hd": true,
},
},
async () => {
// Image processing implementation
Expand All @@ -218,21 +213,21 @@ Monitor performance and reliability of third-party service interactions:
// Payment gateway monitoring
Sentry.startSpan(
{
name: 'Payment Gateway',
op: 'payment.gateway',
name: "Payment Gateway",
op: "payment.gateway",
attributes: {
// Performance metrics
'gateway.response_time_ms': 980,
'gateway.retry_count': 0,
"gateway.response_time_ms": 980,
"gateway.retry_count": 0,

// Transaction data
'order.total_amount': 159.99,
'order.items_count': 3,
"order.total_amount": 159.99,
"order.items_count": 3,

// Service metrics
'gateway.fee_amount': 4.50,
'gateway.fee_percent': 0.029
}
"gateway.fee_amount": 4.5,
"gateway.fee_percent": 0.029,
},
},
async () => {
// Payment gateway integration
Expand All @@ -255,6 +250,7 @@ Maintain consistent naming patterns following the format `category.metric_name`
#### Data Type Selection

Choose appropriate data types for your metrics:

- Numeric values for measurements (`response_time_ms`: 250)
- Boolean values for state indicators (`cache.hit`: true)
- String values for categorical data (`user.subscription`: 'premium')
Expand All @@ -263,6 +259,7 @@ Choose appropriate data types for your metrics:
#### Performance Considerations

Be mindful of the performance impact of collecting metrics, especially for high-volume operations:

- Consider implementing sampling for high-frequency operations
- Prioritize metrics with the highest analytical value
- Avoid redundant or closely correlated metrics
Expand All @@ -276,6 +273,7 @@ If you're currently using Sentry's standalone Metrics product, migrating to span
- **Improved correlation**: Direct association between attributes, traces, and errors

Migration process:

1. Identify your current metric instrumentation points
2. Locate corresponding spans in your application
3. Transfer your metrics to span attributes
Expand Down
3 changes: 1 addition & 2 deletions docs/platforms/javascript/common/configuration/filtering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,8 @@ Learn more about <PlatformLink to="/configuration/sampling/">configuring the sam

## Filtering Spans

Available since JavaScript SDK version `8.2.0`.

Use the <PlatformIdentifier name="before-send-span" /> configuration option which allows you to provide a function to modify a span.
This function is called for the root span and all child spans. If you want to drop the root span, including its child spans, use [`beforeSendTransaction`](#using-beforesendtransaction) instead.
Please note that you cannot use `beforeSendSpan` to drop a span, you can only modify it and filter data on it.

<PlatformContent includePath="configuration/before-send-span" />
Loading