Skip to content

feat(js): Document element timing option in browser tracing #16337

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

Closed
Lms24 wants to merge 2 commits into from
Closed

feat(js): Document element timing option in browser tracing #16337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cbcfb5
feat(js): Document element timing option in browser tracing
Lms24 Feb 10, 2026
b2079cc
formatting, add availableSince, fix broken link
Lms24 Feb 10, 2026
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
2 changes: 1 addition & 1 deletion docs/platforms/javascript/common/configuration/integrations/browsertracing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ Sentry.init({
});
```

See <PlatformLink to="/tracing/instrumentation/automatic-instrumentation/#configuration-options">Configuration Options</PlatformLink> for a full list of available options for `browserTracingIntegration`
See <PlatformLink to="/tracing/instrumentation/automatic-instrumentation/##advanced-options">Configuration Options</PlatformLink> for a full list of available options for `browserTracingIntegration`
44 changes: 34 additions & 10 deletions ...atforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ Capturing spans requires that you first <PlatformLink to="/tracing/">set up trac

Once you enable tracing, the SDK automatically captures performance data without additional code:

| What | Description | Metrics |
|------|-------------|---------|
| **Page loads** | Full page load performance | LCP, CLS, TTFB |
| **Navigations** | Client-side route changes | Duration, Web Vitals |
| **HTTP requests** | All fetch/XHR calls | Duration, status, URL |
| **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) |
| **Long tasks** | Main thread blocking > 50ms | Duration, attribution |
| What | Description | Metrics |
| --------------------- | ---------------------------------------------- | ------------------------------------------ |
| **Page loads** | Full page load performance | LCP, CLS, TTFB |
| **Navigations** | Client-side route changes | Duration, Web Vitals |
| **HTTP requests** | All fetch/XHR calls | Duration, status, URL |
| **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) |
| **Long tasks** | Main thread blocking > 50ms | Duration, attribution |
| **Element timing** | Elements marked with `elementtiming` attribute | Render/load times for critical UI elements |
Copy link
Copy Markdown
Member

@logaretm logaretm Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

l: probably should mention that only specific elements are reported here.


<PlatformContent includePath="performance/what-instrumentation-provides" />

Expand Down Expand Up @@ -188,6 +189,25 @@ Enable/disable spans for long animation frames. Falls back to long tasks if brow

</SdkOption>

<SdkOption name="enableElementTiming" type='boolean' defaultValue='true' availableSince="9.35.0">

Enable/disable automatic spans for [Element Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming) entries. When enabled, Sentry captures performance data for elements marked with the `elementtiming` attribute.

This is useful for tracking when critical UI elements (like hero images or important text) are rendered on the page:
Comment on lines +194 to +196
Copy link
Copy Markdown
Member

@logaretm logaretm Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing here, maybe "supported elements" or something like that to signal that it doesn't work for all elements as readers can be optimistic and try slapping the attribute on a bunch of elements.


```html
<img src="hero.jpg" elementtiming="hero-image" />
<h1 elementtiming="main-heading">Welcome</h1>
```

Element timing spans will appear in your trace with names like `element[hero-image]` and include metrics such as:

- Render time
- Load time (for images)
- Element size and type

</SdkOption>

<SdkOption name="markBackgroundSpan" type='boolean' defaultValue='true'>

Mark pageload/navigation spans as "cancelled" when the tab moves to background. Recommended to keep enabled for accurate measurements.
Expand Down Expand Up @@ -236,7 +256,7 @@ Ignore specific resource span categories by their `op` (e.g., `resource.script`,
Sentry.init({
integrations: [
Sentry.browserTracingIntegration({
ignoreResourceSpans: ['resource.css', 'resource.script'],
ignoreResourceSpans: ["resource.css", "resource.script"],
}),
],
});
Expand All @@ -252,7 +272,7 @@ Ignore spans created from `performance.mark()` and `performance.measure()`:
Sentry.init({
integrations: [
Sentry.browserTracingIntegration({
ignorePerformanceApiSpans: ['myMeasurement', /myMark/],
ignorePerformanceApiSpans: ["myMeasurement", /myMark/],
}),
],
});
Expand Down Expand Up @@ -285,7 +305,11 @@ Sentry.init({
}),
],
tracesSampleRate: 1.0,
tracePropagationTargets: ["localhost", /^\//, /^https:\/\/yourserver\.io\/api/],
tracePropagationTargets: [
"localhost",
/^\//,
/^https:\/\/yourserver\.io\/api/,
],
});
```

Expand Down