Find and Fix Performance Bottlenecks with Sentry’s Trace Explorer

We’ve all worked on that app that hangs just a little too long in weird places, or had that query we could never get to perform just right. The network waterfall in Chrome DevTools can’t quite show us what’s going on behind the scenes, and tracing with OTel (and honestly, tracing in Sentry) was just… hard. 

Today that changes. We just launched a brand-new Explore view for your tracing data, which lets you slice, dice, and sort through your span data to find patterns and example traces easier than ever before. You can even now create span-based metrics like pXX of any default or custom span attribute, and use them to power alerts and custom dashboard widgets. 

And yes – that means you can finally sort your spans by timestamp. But there’s so much more. Let’s get into it. 

Note: this feature is available to all self-serve customers who are opted into the Early Adopters program. If you’re not opted in, turn it on in your Sentry settings!

Video

Trace Explorer

The Trace Explorer entered Early Adopter access, and you can opt in within the Settings screen, by enabling the Early Adopter toggle.

Watch the demo

What’s new with Sentry’s Trace Explorer

As applications grow more complex, even small performance slowdowns can balloon into major user-facing issues (which inevitably leads to that dreadful churn). When you can’t easily isolate slow operations or attribute them to specific services, endpoints/APIs or DB calls, you’re stuck squinting at raw traces (or even worse, logs) and sifting through partial data across separate tools. 

The new Trace Explorer overhauls the way you make use of span data by adding:

• Span-based metrics - Aggregate span attributes into metrics like p95(measurements.lcp), so you can find edge cases for performance, hunt down massive API payloads, and set up alerts or dashboards so you’re always on top of app signals. 

• Queryable custom attributes - Query and measure custom attributes relevant to your application (like token_usage, region, or cart_value) to find common patterns and make your alerts/dashboards more focused for your users’ most critical experiences.

• An actionable trace explorer - Quickly filter and group trace data across your entire stack, and then save and share those queries with teammates. Become that dev who always has the answer to “uh… why is our checkout page so slow?” and the quickest one to know which users are affected. 

These features are designed to help you quickly spin up advanced performance monitoring, alerting and dashboarding for the systems you care the most about - and get the most out of your trace data - all with the least amount of cost and config. 

Technically, this is pretty slick. Practically? Even slicker. We’ve been working with companies in beta and noticed a few common uses: 

1. CDN image performance - Attach attributes like image_url or cdn_provider, then sort slow images by provider. No need to pre-process or pre-transform your metrics - take care of that at query time.

2. AI consumption - Measure API calls, token usage, and even model name. If spikes occur, you can pinpoint the exact transaction, user, environment, or repo.

3. Ecommerce - Track checkout flows with cart_value or payment_method, surface which high-value checkouts are lagging, and triage instantly.

Setting up and using span metrics in the new Trace Explorer

1: Instrument your code where it matters the most

You’re probably familiar with the attributes that Sentry surfaces out of the box for your SDK. Things like span.duration and measurements.lcp are great universal indicators of application performance, but now we’ve made it easier than ever to set up & query using custom attributes with just a few lines of code. 

For example, let’s say you want to track your OpenAI token usage in your newest AI feature. It’s as easy as grabbing the current active span, and attaching the attributes you care about to that span. Check it out:

const span = Sentry.getActiveSpan() // use for most typical spans
// use startSpan([... wrap your callback function here ..]) for API calls
if (span) { 
	// calculate these attributes how you want
	const tokenUsage = calculateTokenUsage(res);
	const openAIModel = getOpenAIModel(res);

	// attach the attributes to the span object 
	span.setAttributes({
		"tokenUsage": tokenUsage,
		"openAIModel": openAIModel
	});
	// automatically sends to Sentry when span terminates
};

2: Calculate metrics from your spans in Explore

Once you’ve gotten your attributes instrumented, it’s easy to find, filter, and visualize those aggregated metrics, plotted over time. 

1. Head to Explore > Traces in the Sentry UI. 

2. Choose the metric you want to visualize, like measurements.lcp (a reliable metric for page load speed)

3. Calculate your metric by selecting the aggregation, i.e. p99 or avg

4. Select the timeframe you want to snapshot your metrics by, ie. 5 minutes

5. Search and filter your relevant spans using the search bar, i.e. span.description is /products

Done. With these settings, you’ll be visualizing the p99 outliers of your checkout interactivity. Now you have all the spans you need to drill in and debug your slowest pageloads.

3: Group your metrics to investigate patterns

Maybe you have a hunch that the browser type is the culprit. Investigating these patterns is easy:

1. Flip to “Aggregates” mode

2. Group by browser.name

Boom. We can see that Firefox is a little slower on average, and we can click into Samples to see all the relevant traces.

4: Set up Alerts and Dashboards on your calculated metrics

Alerts: Click “Save As” → “An Alert For” and create an issue based on span metrics, just like you would with events or performance.

Dashboards: Click “Save As “ → “Dashboard” → “Open in Widget Builder” to create a custom widget and add it to any dashboard you’d like. The widget builder will be pre-populated.

APM that’s designed (& priced) for devs

Unlike traditional metrics & APM tools - OTel in particular - span metrics on Sentry are calculated when you run the query. This gives developers a bunch of unique advantages:

• Attributes <you> can instrument: rather than taking the traditional SRE approach of defining your metrics in a control plane & distributing tags via agents, you can instrument attributes natively in your code to have more granular, predictable results. 

• Real-time queries: Span metrics are calculated on the fly, so you don’t need to deal with pre-aggregating, snapshotting, or calculating rolling averages in your codebase.

Better cost control - stop paying so much for metrics! Only query what you need, when you need it. If long-term auditing isn’t in your wheelhouse, Sentry can help you simplify & streamline your observability costs.

Join the Early Adopters Program today

Whether you’re debugging a slow third-party API or ensuring your highest-value transactions stay snappy, these new Sentry features give you deeper visibility with less hassle. To get started, just enable the Early Adopters program in your settings and pop open the explorer. From there, it’s all about setting the custom attributes and alerts that matter most to your team.

Let us know how it goes and what surprises you uncover. We can’t wait to see the creative ways you put these new capabilities to use. 

Questions or suggestions? Hit us up on Discord.