ElementTiming
Collect Element Timing API data as Sentry metrics.
This integration only works inside a browser environment. Requires SDK version 10.47.0 or higher.
Import name: Sentry.elementTimingIntegration
The elementTimingIntegration collects render and load timing data from the browser's Element Timing API and emits it as Sentry distribution metrics. This lets you track how long key elements (hero images, text blocks, etc.) take to appear on screen.
The Element Timing API is only supported in Chromium-based browsers (Chrome, Edge 77+). Firefox and Safari do not support it. The integration will silently do nothing in unsupported browsers.
This integration requires Sentry Metrics to be available in your Sentry organization.
Sentry.init({
integrations: [Sentry.elementTimingIntegration()],
});
Add the elementtiming HTML attribute to any element you want to track. The attribute value is used as the element's identifier in the emitted metrics.
<img src="hero.jpg" elementtiming="hero-image" />
<p elementtiming="hero-text">Welcome to our site!</p>
Only elements with a non-empty elementtiming attribute will be tracked.
The integration emits two distribution metrics (in milliseconds):
| Metric | Description |
|---|---|
ui.element.render_time | Time until the element was rendered. Emitted for both text and image elements. |
ui.element.load_time | Time until the element's resource was loaded. Only emitted for image elements. |
Both metrics include the following attributes:
| Attribute | Description |
|---|---|
ui.element.identifier | The value of the elementtiming HTML attribute. |
ui.element.paint_type | The type of paint event: image-paint or text-paint. |
ui.element.id | The DOM element's id attribute, if set. |
ui.element.type | The tag name (e.g., img, p). |
ui.element.url | The image resource URL, if available. |
ui.element.width | Natural width of the image, if available. |
ui.element.height | Natural height of the image, if available. |
The enableElementTiming option on browserTracingIntegration is deprecated and no longer has any effect. If you were using it, remove it and add the standalone elementTimingIntegration instead:
// Before
Sentry.init({
integrations: [
Sentry.browserTracingIntegration({
enableElementTiming: true, // deprecated, no longer works
}),
],
});
// After
Sentry.init({
integrations: [
Sentry.browserTracingIntegration(),
Sentry.elementTimingIntegration(),
],
});
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").