---
title: "ElementTiming"
description: "Collect Element Timing API data as Sentry metrics."
url: https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/elementtiming/
---

# ElementTiming | Sentry for React Router Framework

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](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming) and emits it as [Sentry distribution metrics](https://docs.sentry.io/product/explore/metrics.md). 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](https://docs.sentry.io/platforms/javascript/guides/react-router/metrics.md) to be available in your Sentry organization.

```javascript
Sentry.init({
  integrations: [Sentry.elementTimingIntegration()],
});
```

## [Marking Elements for Tracking](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/elementtiming.md#marking-elements-for-tracking)

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.

```html
<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.

## [Emitted Metrics](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/elementtiming.md#emitted-metrics)

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.              |

## [Migration from `enableElementTiming`](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/elementtiming.md#migration-from-enableelementtiming)

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:

```javascript
// Before
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration({
      enableElementTiming: true, // deprecated, no longer works
    }),
  ],
});

// After
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.elementTimingIntegration(),
  ],
});
```