Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
title: ElementTiming
description: "Collect Element Timing API data as Sentry metrics."
beta: true
notSupported:
- javascript.cordova
- javascript.capacitor
- javascript.node
- javascript.aws-lambda
- javascript.azure-functions
- javascript.connect
- javascript.express
- javascript.fastify
- javascript.gcp-functions
- javascript.hapi
- javascript.hono
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

<Alert>

This integration only works inside a browser environment. Requires SDK version `10.47.0` or higher.

</Alert>

_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](/product/explore/metrics/). This lets you track how long key elements (hero images, text blocks, etc.) take to appear on screen.

<Alert>

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.

</Alert>

This integration requires <PlatformLink to="/metrics">Sentry Metrics</PlatformLink> to be available in your Sentry organization.

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

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

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`

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(),
],
});
```
8 changes: 8 additions & 0 deletions docs/platforms/javascript/common/metrics/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ With [Sentry Metrics](/product/explore/metrics/), you can send counters, gauges,

<PlatformContent includePath="metrics/default-attributes" />

## Integrations

<PlatformSection notSupported={["javascript.node", "javascript.aws-lambda", "javascript.azure-functions", "javascript.connect", "javascript.express", "javascript.fastify", "javascript.gcp-functions", "javascript.hapi", "javascript.hono", "javascript.koa", "javascript.nestjs", "javascript.deno", "javascript.cloudflare", "javascript.bun"]}>

- <PlatformLink to="/configuration/integrations/elementtiming/">`elementTimingIntegration`</PlatformLink> — Automatically collect render and load timing distribution metrics for key UI elements using the browser's Element Timing API.

</PlatformSection>

## Related Features

- <PlatformLink to="/tracing/">Tracing</PlatformLink> — Drill down from metrics
Expand Down
3 changes: 2 additions & 1 deletion platform-includes/configuration/integrations/javascript.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
### Integrations

| | **Auto Enabled** | **Errors** | **Tracing** | **Replay** | **Additional Context** |
|-------------------------------------------------------|:----------------:|:----------:|:-----------:|:----------:|:----------------------:|
| ----------------------------------------------------- | :--------------: | :--------: | :---------: | :--------: | :--------------------: |
| [`breadcrumbsIntegration`](./breadcrumbs) | ✓ | | | | ✓ |
| [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | |
| [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ |
Expand All @@ -14,6 +14,7 @@
| [`anthropicAIIntegration`](./anthropic) | | | ✓ | | ✓ |
| [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | |
| [`browserTracingIntegration`](./browsertracing) | | | ✓ | | ✓ |
| [`elementTimingIntegration`](./elementtiming) | | | | | |
| [`captureConsoleIntegration`](./captureconsole) | | ✓ | | | ✓ |
| [`contextLinesIntegration`](./contextlines) | | ✓ | | | |
| [`extraErrorDataIntegration`](./extraerrordata) | | | | | ✓ |
Expand Down
Loading