Skip to content

elementtiming.mdx

Latest commit

 

History

History
101 lines (78 loc) · 3.59 KB

elementtiming.mdx

File metadata and controls

101 lines (78 loc) · 3.59 KB
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

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()],
});

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.

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

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

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