Querying Traces
Find performance issues using data Sentry captures automatically and set up alerts.
You've enabled Sentry Tracing. Now what? Sentry's auto-instrumentation captures a lot without custom code. This guide shows you how to query that data to find performance issues.
With browserTracingIntegration() enabled, Sentry automatically captures:
- Page loads and navigation
- Fetch/XHR requests
- Long animation frames (main thread blocking)
- Resource loading (JS, CSS, images)
Start with these five queries and you'll catch most performance issues before users complain.
Query in Explore > Traces: span.op:pageload & Visualize: p90(span.duration) grouped by transaction to compare routes.
What to look for: Routes with p90 over 3 seconds. Explore sample traces to see the breakdown. Usually it's slow API calls, heavy JavaScript, or large images.
Alert idea:
p75(transaction.duration) > 3sfor pageload transactions.
Query in Explore > Traces: span.op:http.client & Visualize: avg(span.duration) grouped by span.description (the URL).
What to look for: Endpoints with avg duration over 1 second or p95 over 2 seconds. Check if it's the backend or network latency by looking at sample traces.
Alert idea:
p95(span.duration) > 2swherespan.op:http.client.
Query in Explore > Traces: span.op:ui.long-animation-frame & Visualize: Sort by span.duration to find the worst offenders.
What to look for: Frames over 200ms. This is what causes jank and unresponsiveness. Look at the stack trace in sample traces to find the expensive operation.
Alert idea:
p75(span.duration) > 200msfor long animation frames.
Query in Explore > Traces: span.op:navigation & Visualize: p90(span.duration) grouped by transaction to compare route performance.
What to look for: Navigation over 1 second feels sluggish. Click into traces to see if it's data fetching, component rendering, or something else.
Alert idea:
p75(span.duration) > 2sfor navigation.
Query in Explore > Traces: span.op:resource.script (JavaScript), span.op:resource.css (stylesheets), or span.op:resource.img (images) & Visualize: avg(span.duration) to find the heaviest assets.
What to look for: Resources taking over 1 second. Check the span description to see which files. Often it's third-party scripts or unoptimized images.
Alert idea:
p75(span.duration) > 3sfor resource.script.
- Go to Explore > Traces
- Build your query (e.g.,
span.op:http.client) - Click Save As - Alert
- Choose a threshold type:
- Static: Alert when a value exceeds a threshold
- Percent Change: Alert when a value changes relative to a previous period
- Anomaly: Let Sentry detect unusual patterns
- Configure notification channels and save
Tip: Averages can hide outliers, use p75/p90/p95 instead.
Learn about creating alerts and best practices for reducing noise and routing notifications.
| Category | Query | Visualize |
|---|---|---|
| Slow page loads | span.op:pageload | p90(span.duration) by transaction |
| Slow fetch requests | span.op:http.client | avg(span.duration) by URL |
| JS blocking UI | span.op:ui.long-animation-frame | max(span.duration) |
| Slow SPA navigation | span.op:navigation | p90(span.duration) by transaction |
| Heavy resources | span.op:resource.* | avg(span.duration) by description |
Explore the Trace Explorer product walkthrough guides to learn more about the Sentry interface and discover additional tips.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").