From 5379c13f8abca54158733d9467bb51b0fd5741fe Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 16 Jun 2025 13:25:00 +0200
Subject: [PATCH 01/10] feat(browser): Add ElementTiming instrumentation and
 spans

---
 .../assets/sentry-logo-600x179.png            | Bin 0 -> 16118 bytes
 .../tracing/metrics/element-timing/init.js    |  10 +
 .../tracing/metrics/element-timing/subject.js |  27 ++
 .../metrics/element-timing/template.html      |  49 +++
 .../tracing/metrics/element-timing/test.ts    | 294 +++++++++++++++
 packages/browser-utils/src/index.ts           |   2 +
 .../src/metrics/elementTiming.ts              | 118 ++++++
 .../browser-utils/src/metrics/instrument.ts   |   3 +-
 .../src/metrics/web-vitals/lib/observe.ts     |   3 +
 .../instrument/metrics/elementTiming.test.ts  | 355 ++++++++++++++++++
 .../src/tracing/browserTracingIntegration.ts  |  15 +
 11 files changed, 875 insertions(+), 1 deletion(-)
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/assets/sentry-logo-600x179.png
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/init.js
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/subject.js
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
 create mode 100644 dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
 create mode 100644 packages/browser-utils/src/metrics/elementTiming.ts
 create mode 100644 packages/browser-utils/test/instrument/metrics/elementTiming.test.ts

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/assets/sentry-logo-600x179.png b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/assets/sentry-logo-600x179.png
new file mode 100644
index 0000000000000000000000000000000000000000..353b7233d6bfa4f026f9998cacfa4add4bba9274
GIT binary patch
literal 16118
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
Cl9AH@

literal 0
HcmV?d00001

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/init.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/init.js
new file mode 100644
index 000000000000..5a4cb2dff8b7
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/init.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  debug: true,
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/subject.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/subject.js
new file mode 100644
index 000000000000..0fff6c2a88e6
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/subject.js
@@ -0,0 +1,27 @@
+const lazyDiv = document.getElementById('content-lazy');
+const navigationButton = document.getElementById('button1');
+const navigationDiv = document.getElementById('content-navigation');
+const clickButton = document.getElementById('button2');
+const clickDiv = document.getElementById('content-click');
+
+navigationButton.addEventListener('click', () => {
+  window.history.pushState({}, '', '/some-other-path');
+  navigationDiv.innerHTML = `
+      <img src="https://sentry-test-site.example/path/to/image-navigation.png" elementtiming="navigation-image" />
+      <p elementtiming="navigation-text">This is navigation content</p>
+    `;
+});
+
+setTimeout(() => {
+  lazyDiv.innerHTML = `
+      <img src="https://sentry-test-site.example/path/to/image-lazy.png" elementtiming="lazy-image" />
+      <p elementtiming="lazy-text">This is lazy loaded content</p>
+    `;
+}, 1000);
+
+clickButton.addEventListener('click', () => {
+  clickDiv.innerHTML = `
+      <img src="https://sentry-test-site.example/path/to/image-click.png" elementtiming="click-image" />
+      <p elementtiming="click-text">This is click loaded content</p>
+    `;
+});
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
new file mode 100644
index 000000000000..a9bc15eb4c70
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <!-- eagerly loaded image (image-paint) with fast load time -->
+    <img src="https://sentry-test-site.example/path/to/image-fast.png" elementtiming="image-fast" />
+
+    <!-- eagerly rendered text (text-paint) -->
+    <p elementtiming="text1">
+      This is some text content
+      <pan>with another nested span</pan>
+      <small>and a small text</small>
+    </p>
+
+    <!--
+    eagerly rendered div with an eagerly loaded nested image with slow load time (image-paint)
+    Although the div has an elementtiming attribute, it will not emit an entry because it's
+    neither a text nor an image
+    -->
+    <div elementtiming="div1">
+      <h1>Header with element timing</h1>
+      <img src="https://sentry-test-site.example/path/to/image-slow.png" elementtiming="image-nested-slow" />
+    </div>
+
+    <!-- eagerly loaded image (image-paint) with slow load time -->
+    <img src="https://sentry-test-site.example/path/to/image-slow.png" elementtiming="image-slow" />
+
+    <!-- lazily loaded content (image-paint and text-paint) with slow load time -->
+    <div id="content-lazy">
+      <p>This div will be populated lazily</p>
+    </div>
+
+    <!-- content loaded after navigation (image-paint and text-paint) -->
+    <div id="content-navigation">
+      <p>This div will be populated after a navigation</p>
+    </div>
+
+    <!-- content loaded after navigation (image-paint and text-paint) -->
+    <div id="content-click">
+      <p>This div will be populated on click</p>
+    </div>
+
+    <!-- eagerly rendered buttons-->
+    <button id="button1" elementtiming="button1">Navigate</button>
+    <button id="button2" elementtiming="button2">Populate on Click</button>
+  </body>
+</html>
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
new file mode 100644
index 000000000000..830121c4a7de
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -0,0 +1,294 @@
+import type { Page, Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest(
+  'adds element timing spans to pageload span tree for elements rendered during pageload',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const pageloadEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'pageload');
+
+    serveAssets(page);
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.goto(url);
+
+    const eventData = envelopeRequestParser(await pageloadEventPromise);
+
+    const elementTimingSpans = eventData.spans?.filter(({ op }) => op === 'ui.elementtiming');
+
+    expect(elementTimingSpans?.length).toEqual(8);
+
+    // Check image-fast span (this is served with a 100ms delay)
+    const imageFastSpan = elementTimingSpans?.find(({ description }) => description === 'element[image-fast]');
+    const imageFastRenderTime = imageFastSpan?.data['element.render-time'];
+    const imageFastLoadTime = imageFastSpan?.data['element.load-time'];
+    const duration = imageFastSpan!.timestamp! - imageFastSpan!.start_timestamp!;
+
+    expect(imageFastSpan).toBeDefined();
+    expect(imageFastSpan?.data).toEqual({
+      'sentry.op': 'ui.elementtiming',
+      'sentry.origin': 'auto.ui.browser.elementtiming',
+      'sentry.source': 'component',
+      'sentry.span-start-time-source': 'load-time',
+      'element.identifier': 'image-fast',
+      'element.type': 'img',
+      'element.size': '600x179',
+      'element.url': 'https://sentry-test-site.example/path/to/image-fast.png',
+      'element.render-time': expect.any(Number),
+      'element.load-time': expect.any(Number),
+      'element.paint-type': 'image-paint',
+      route: '/index.html',
+    });
+    expect(imageFastRenderTime).toBeGreaterThan(90);
+    expect(imageFastRenderTime).toBeLessThan(200);
+    expect(imageFastLoadTime).toBeGreaterThan(90);
+    expect(imageFastLoadTime).toBeLessThan(200);
+    expect(imageFastRenderTime).toBeGreaterThan(imageFastLoadTime as number);
+    expect(duration).toBeGreaterThan(0);
+    expect(duration).toBeLessThan(20);
+
+    // Check text1 span
+    const text1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'text1');
+    const text1RenderTime = text1Span?.data['element.render-time'];
+    const text1LoadTime = text1Span?.data['element.load-time'];
+    const text1Duration = text1Span!.timestamp! - text1Span!.start_timestamp!;
+    expect(text1Span).toBeDefined();
+    expect(text1Span?.data).toEqual({
+      'sentry.op': 'ui.elementtiming',
+      'sentry.origin': 'auto.ui.browser.elementtiming',
+      'sentry.source': 'component',
+      'sentry.span-start-time-source': 'render-time',
+      'element.identifier': 'text1',
+      'element.type': 'p',
+      'element.render-time': expect.any(Number),
+      'element.load-time': expect.any(Number),
+      'element.paint-type': 'text-paint',
+      route: '/index.html',
+    });
+    expect(text1RenderTime).toBeGreaterThan(0);
+    expect(text1RenderTime).toBeLessThan(100);
+    expect(text1LoadTime).toBe(0);
+    expect(text1RenderTime).toBeGreaterThan(text1LoadTime as number);
+    expect(text1Duration).toBe(0);
+
+    // Check button1 span (no need for a full assertion)
+    const button1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'button1');
+    expect(button1Span).toBeDefined();
+    expect(button1Span?.data).toMatchObject({
+      'element.identifier': 'button1',
+      'element.type': 'button',
+      'element.paint-type': 'text-paint',
+      route: '/index.html',
+    });
+
+    // Check image-slow span
+    const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'image-slow');
+    expect(imageSlowSpan).toBeDefined();
+    expect(imageSlowSpan?.data).toEqual({
+      'element.identifier': 'image-slow',
+      'element.type': 'img',
+      'element.size': '600x179',
+      'element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
+      'element.paint-type': 'image-paint',
+      'element.render-time': expect.any(Number),
+      'element.load-time': expect.any(Number),
+      'sentry.op': 'ui.elementtiming',
+      'sentry.origin': 'auto.ui.browser.elementtiming',
+      'sentry.source': 'component',
+      'sentry.span-start-time-source': 'load-time',
+      route: '/index.html',
+    });
+    const imageSlowRenderTime = imageSlowSpan?.data['element.render-time'];
+    const imageSlowLoadTime = imageSlowSpan?.data['element.load-time'];
+    const imageSlowDuration = imageSlowSpan!.timestamp! - imageSlowSpan!.start_timestamp!;
+    expect(imageSlowRenderTime).toBeGreaterThan(1400);
+    expect(imageSlowRenderTime).toBeLessThan(2000);
+    expect(imageSlowLoadTime).toBeGreaterThan(1400);
+    expect(imageSlowLoadTime).toBeLessThan(2000);
+    expect(imageSlowDuration).toBeGreaterThan(0);
+    expect(imageSlowDuration).toBeLessThan(20);
+
+    // Check lazy-image span
+    const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-image');
+    expect(lazyImageSpan).toBeDefined();
+    expect(lazyImageSpan?.data).toEqual({
+      'element.identifier': 'lazy-image',
+      'element.type': 'img',
+      'element.size': '600x179',
+      'element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
+      'element.paint-type': 'image-paint',
+      'element.render-time': expect.any(Number),
+      'element.load-time': expect.any(Number),
+      'sentry.op': 'ui.elementtiming',
+      'sentry.origin': 'auto.ui.browser.elementtiming',
+      'sentry.source': 'component',
+      'sentry.span-start-time-source': 'load-time',
+      route: '/index.html',
+    });
+    const lazyImageRenderTime = lazyImageSpan?.data['element.render-time'];
+    const lazyImageLoadTime = lazyImageSpan?.data['element.load-time'];
+    const lazyImageDuration = lazyImageSpan!.timestamp! - lazyImageSpan!.start_timestamp!;
+    expect(lazyImageRenderTime).toBeGreaterThan(1000);
+    expect(lazyImageRenderTime).toBeLessThan(1500);
+    expect(lazyImageLoadTime).toBeGreaterThan(1000);
+    expect(lazyImageLoadTime).toBeLessThan(1500);
+    expect(lazyImageDuration).toBeGreaterThan(0);
+    expect(lazyImageDuration).toBeLessThan(20);
+
+    // Check lazy-text span
+    const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-text');
+    expect(lazyTextSpan?.data).toMatchObject({
+      'element.identifier': 'lazy-text',
+      'element.type': 'p',
+      route: '/index.html',
+    });
+    const lazyTextRenderTime = lazyTextSpan?.data['element.render-time'];
+    const lazyTextLoadTime = lazyTextSpan?.data['element.load-time'];
+    const lazyTextDuration = lazyTextSpan!.timestamp! - lazyTextSpan!.start_timestamp!;
+    expect(lazyTextRenderTime).toBeGreaterThan(1000);
+    expect(lazyTextRenderTime).toBeLessThan(1500);
+    expect(lazyTextLoadTime).toBe(0);
+    expect(lazyTextDuration).toBe(0);
+
+    // the div1 entry does not emit an elementTiming entry because it's neither a text nor an image
+    expect(elementTimingSpans?.find(({ description }) => description === 'element[div1]')).toBeUndefined();
+  },
+);
+
+sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  serveAssets(page);
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  const pageloadEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'pageload');
+
+  const navigationEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'navigation');
+
+  await pageloadEventPromise;
+
+  await page.locator('#button1').click();
+
+  const navigationTransactionEvent = envelopeRequestParser(await navigationEventPromise);
+  const pageloadTransactionEvent = envelopeRequestParser(await pageloadEventPromise);
+
+  const navigationElementTimingSpans = navigationTransactionEvent.spans?.filter(({ op }) => op === 'ui.elementtiming');
+
+  expect(navigationElementTimingSpans?.length).toEqual(2);
+
+  const navigationStartTime = navigationTransactionEvent.start_timestamp!;
+  const pageloadStartTime = pageloadTransactionEvent.start_timestamp!;
+
+  const imageSpan = navigationElementTimingSpans?.find(
+    ({ description }) => description === 'element[navigation-image]',
+  );
+  const textSpan = navigationElementTimingSpans?.find(({ description }) => description === 'element[navigation-text]');
+
+  // Image started loading after navigation, but render-time and load-time still start from the time origin
+  // of the pageload. This is somewhat a limitation (though by design according to the ElementTiming spec)
+  expect((imageSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+    navigationStartTime,
+  );
+  expect((imageSpan!.data['element.load-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+    navigationStartTime,
+  );
+
+  expect(textSpan?.data['element.load-time']).toBe(0);
+  expect((textSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+    navigationStartTime,
+  );
+});
+
+// For element timing, we're fine with just always emitting a transaction,
+// regardless of a parent span being present or not (as in this case)
+sentryTest('emits element timing spans if no parent span is active', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  serveAssets(page);
+
+  const pageloadEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'pageload');
+
+  const elementTimingTransactionPromise1 = waitForTransactionRequest(
+    page,
+    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-image]',
+  );
+
+  const elementTimingTransactionPromise2 = waitForTransactionRequest(
+    page,
+    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-text]',
+  );
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  await pageloadEventPromise;
+
+  await page.locator('#button2').click();
+
+  const imageElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise1);
+  const textElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise2);
+
+  expect(imageElementTimingTransaction.spans?.length).toEqual(0);
+  expect(textElementTimingTransaction.spans?.length).toEqual(0);
+
+  const imageETattributes = imageElementTimingTransaction.contexts?.trace?.data;
+  const textETattributes = textElementTimingTransaction.contexts?.trace?.data;
+
+  expect(imageETattributes).toEqual({
+    'element.identifier': 'click-image',
+    'element.paint-type': 'image-paint',
+    'element.load-time': expect.any(Number),
+    'element.render-time': expect.any(Number),
+    'element.size': '600x179',
+    'element.type': 'img',
+    'element.url': 'https://sentry-test-site.example/path/to/image-click.png',
+    'sentry.span-start-time-source': 'load-time',
+    'sentry.op': 'ui.elementtiming',
+    'sentry.origin': 'auto.ui.browser.elementtiming',
+    'sentry.source': 'component',
+    route: '/index.html',
+  });
+
+  expect(textETattributes).toEqual({
+    'element.identifier': 'click-text',
+    'element.load-time': 0,
+    'element.render-time': expect.any(Number),
+    'element.paint-type': 'text-paint',
+    'element.type': 'p',
+    'sentry.span-start-time-source': 'render-time',
+    'sentry.op': 'ui.elementtiming',
+    'sentry.origin': 'auto.ui.browser.elementtiming',
+    'sentry.source': 'component',
+    route: '/index.html',
+  });
+});
+
+function serveAssets(page: Page) {
+  page.route(/image-(fast|lazy|navigation|click)\.png/, async (route: Route) => {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    return route.fulfill({
+      path: `${__dirname}/assets/sentry-logo-600x179.png`,
+    });
+  });
+
+  page.route('**/image-slow.png', async (route: Route) => {
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    return route.fulfill({
+      path: `${__dirname}/assets/sentry-logo-600x179.png`,
+    });
+  });
+}
diff --git a/packages/browser-utils/src/index.ts b/packages/browser-utils/src/index.ts
index f66446ea5159..0a2d9e85ade9 100644
--- a/packages/browser-utils/src/index.ts
+++ b/packages/browser-utils/src/index.ts
@@ -17,6 +17,8 @@ export {
   registerInpInteractionListener,
 } from './metrics/browserMetrics';
 
+export { startTrackingElementTiming } from './metrics/elementTiming';
+
 export { extractNetworkProtocol } from './metrics/utils';
 
 export { addClickKeypressInstrumentationHandler } from './instrument/dom';
diff --git a/packages/browser-utils/src/metrics/elementTiming.ts b/packages/browser-utils/src/metrics/elementTiming.ts
new file mode 100644
index 000000000000..645e93abd13f
--- /dev/null
+++ b/packages/browser-utils/src/metrics/elementTiming.ts
@@ -0,0 +1,118 @@
+import type { SpanAttributes } from '@sentry/core';
+import {
+  browserPerformanceTimeOrigin,
+  getActiveSpan,
+  getCurrentScope,
+  getRootSpan,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  spanToJSON,
+  startSpan,
+  timestampInSeconds,
+} from '@sentry/core';
+import { addPerformanceInstrumentationHandler } from './instrument';
+import { getBrowserPerformanceAPI, msToSec } from './utils';
+
+// ElementTiming interface based on the W3C spec
+interface PerformanceElementTiming extends PerformanceEntry {
+  renderTime: number;
+  loadTime: number;
+  intersectionRect: DOMRectReadOnly;
+  identifier: string;
+  naturalWidth: number;
+  naturalHeight: number;
+  id: string;
+  element: Element | null;
+  url?: string;
+}
+
+/**
+ * Start tracking ElementTiming performance entries.
+ */
+export function startTrackingElementTiming(): () => void {
+  const performance = getBrowserPerformanceAPI();
+  if (performance && browserPerformanceTimeOrigin()) {
+    return addPerformanceInstrumentationHandler('element', _onElementTiming);
+  }
+
+  return () => undefined;
+}
+
+/**
+ * exported only for testing
+ */
+export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }): void => {
+  entries.forEach(entry => {
+    const elementEntry = entry as PerformanceElementTiming;
+
+    // Skip entries without identifier (elementtiming attribute)
+    if (!elementEntry.identifier) {
+      return;
+    }
+
+    // `name` contains the type of the element paint. Can be `'image-paint'` or `'text-paint'`.
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming#instance_properties
+    const paintType = elementEntry.name as 'image-paint' | 'text-paint' | undefined;
+
+    const renderTime = elementEntry.renderTime;
+    const loadTime = elementEntry.loadTime;
+
+    // starting the span at:
+    // - `loadTime` if available (should be available for all "image-paint" entries, 0 otherwise)
+    // - `renderTime` if available (available for all entries, except 3rd party images, but these should be covered by `loadTime`, 0 otherwise)
+    // - `timestampInSeconds()` as a safeguard
+    // see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming/renderTime#cross-origin_image_render_time
+    const { spanStartTime, spanStartTimeSource } = loadTime
+      ? { spanStartTime: msToSec(loadTime), spanStartTimeSource: 'load-time' }
+      : renderTime
+        ? { spanStartTime: msToSec(renderTime), spanStartTimeSource: 'render-time' }
+        : { spanStartTime: timestampInSeconds(), spanStartTimeSource: 'entry-emission' };
+
+    const duration =
+      paintType === 'image-paint'
+        ? // for image paints, we can acually get a duration because image-paint entries also have a `loadTime`
+          // and `renderTime`. `loadTime` is the time when the image finished loading and `renderTime` is the
+          // time when the image finished rendering.
+          msToSec(Math.max(0, (renderTime ?? 0) - (loadTime ?? 0)))
+        : // for `'text-paint'` entries, we can't get a duration because the `loadTime` is always zero.
+          0;
+
+    const activeSpan = getActiveSpan();
+    const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;
+    const route = rootSpan ? spanToJSON(rootSpan).description : getCurrentScope().getScopeData().transactionName;
+
+    const attributes: SpanAttributes = {
+      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.elementtiming',
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.elementtiming',
+      // name must be user-entered, so we can assume low cardinality
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
+      // recording the source of the span start time, as it varies depending on available data
+      'sentry.span-start-time-source': spanStartTimeSource,
+      route,
+
+      'element.type': elementEntry.element?.tagName?.toLowerCase() || 'unknown',
+      'element.size':
+        elementEntry.naturalWidth && elementEntry.naturalHeight
+          ? `${elementEntry.naturalWidth}x${elementEntry.naturalHeight}`
+          : undefined,
+      'element.render-time': renderTime,
+      'element.load-time': loadTime,
+      // `url` is `0`(number) for text paints (hence we fall back to undefined)
+      'element.url': elementEntry.url || undefined,
+      'element.identifier': elementEntry.identifier,
+      'element.paint-type': paintType,
+    };
+
+    startSpan(
+      {
+        name: `element[${elementEntry.identifier}]`,
+        attributes,
+        startTime: spanStartTime,
+      },
+      span => {
+        span.end(spanStartTime + duration);
+      },
+    );
+  });
+};
diff --git a/packages/browser-utils/src/metrics/instrument.ts b/packages/browser-utils/src/metrics/instrument.ts
index cb84908ce55b..9fbf075a7712 100644
--- a/packages/browser-utils/src/metrics/instrument.ts
+++ b/packages/browser-utils/src/metrics/instrument.ts
@@ -13,7 +13,8 @@ type InstrumentHandlerTypePerformanceObserver =
   | 'navigation'
   | 'paint'
   | 'resource'
-  | 'first-input';
+  | 'first-input'
+  | 'element';
 
 type InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'fid' | 'ttfb' | 'inp';
 
diff --git a/packages/browser-utils/src/metrics/web-vitals/lib/observe.ts b/packages/browser-utils/src/metrics/web-vitals/lib/observe.ts
index 9af0116cd0b1..6071893dfa8e 100644
--- a/packages/browser-utils/src/metrics/web-vitals/lib/observe.ts
+++ b/packages/browser-utils/src/metrics/web-vitals/lib/observe.ts
@@ -28,6 +28,9 @@ interface PerformanceEntryMap {
   // our `instrumentPerformanceObserver` function also observes 'longtask'
   // entries.
   longtask: PerformanceEntry[];
+  // Sentry-specific change:
+  // We add element as a supported entry type for ElementTiming API
+  element: PerformanceEntry[];
 }
 
 /**
diff --git a/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts b/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts
new file mode 100644
index 000000000000..c1e76becd86c
--- /dev/null
+++ b/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts
@@ -0,0 +1,355 @@
+import * as sentryCore from '@sentry/core';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { _onElementTiming, startTrackingElementTiming } from '../../../src/metrics/elementTiming';
+import * as browserMetricsInstrumentation from '../../../src/metrics/instrument';
+import * as browserMetricsUtils from '../../../src/metrics/utils';
+
+describe('_onElementTiming', () => {
+  const spanEndSpy = vi.fn();
+  const startSpanSpy = vi.spyOn(sentryCore, 'startSpan').mockImplementation((opts, cb) => {
+    // @ts-expect-error - only passing a partial span. This is fine for the test.
+    cb({
+      end: spanEndSpy,
+    });
+  });
+
+  beforeEach(() => {
+    startSpanSpy.mockClear();
+    spanEndSpy.mockClear();
+  });
+
+  it('does nothing if the ET entry has no identifier', () => {
+    const entry = {
+      name: 'image-paint',
+      entryType: 'element',
+      startTime: 0,
+      duration: 0,
+      renderTime: 100,
+    } as Partial<PerformanceEntry>;
+
+    // @ts-expect-error - only passing a partial entry. This is fine for the test.
+    _onElementTiming({ entries: [entry] });
+
+    expect(startSpanSpy).not.toHaveBeenCalled();
+  });
+
+  describe('span start time', () => {
+    it('uses the load time as span start time if available', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 100,
+        loadTime: 50,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        {
+          name: 'element[test-element]',
+          startTime: 0.05,
+          attributes: expect.objectContaining({
+            'sentry.op': 'ui.elementtiming',
+            'sentry.span-start-time-source': 'load-time',
+            'element.render-time': 100,
+            'element.load-time': 50,
+          }),
+        },
+        expect.any(Function),
+      );
+    });
+
+    it('uses the render time as span start time if load time is not available', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 100,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        {
+          name: 'element[test-element]',
+          startTime: 0.1,
+          attributes: expect.objectContaining({
+            'sentry.span-start-time-source': 'render-time',
+            'element.render-time': 100,
+            'element.load-time': undefined,
+          }),
+        },
+        expect.any(Function),
+      );
+    });
+
+    it('falls back to the time of handling the entry if load and render time are not available', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        {
+          name: 'element[test-element]',
+          startTime: expect.any(Number),
+          attributes: expect.objectContaining({
+            'sentry.span-start-time-source': 'entry-emission',
+            'element.render-time': undefined,
+            'element.load-time': undefined,
+          }),
+        },
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe('span duration', () => {
+    it('uses (render-load) time as duration for image paints', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 1505,
+        loadTime: 1500,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'element[test-element]',
+          startTime: 1.5,
+          attributes: expect.objectContaining({
+            'element.render-time': 1505,
+            'element.load-time': 1500,
+            'element.paint-type': 'image-paint',
+          }),
+        }),
+        expect.any(Function),
+      );
+
+      expect(spanEndSpy).toHaveBeenCalledWith(1.505);
+    });
+
+    it('uses 0 as duration for text paints', () => {
+      const entry = {
+        name: 'text-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        loadTime: 0,
+        renderTime: 1600,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'element[test-element]',
+          startTime: 1.6,
+          attributes: expect.objectContaining({
+            'element.paint-type': 'text-paint',
+            'element.render-time': 1600,
+            'element.load-time': 0,
+          }),
+        }),
+        expect.any(Function),
+      );
+
+      expect(spanEndSpy).toHaveBeenCalledWith(1.6);
+    });
+
+    // per spec, no other kinds are supported but let's make sure we're defensive
+    it('uses 0 as duration for other kinds of entries', () => {
+      const entry = {
+        name: 'somethingelse',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        loadTime: 0,
+        renderTime: 1700,
+        identifier: 'test-element',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'element[test-element]',
+          startTime: 1.7,
+          attributes: expect.objectContaining({
+            'element.paint-type': 'somethingelse',
+            'element.render-time': 1700,
+            'element.load-time': 0,
+          }),
+        }),
+        expect.any(Function),
+      );
+
+      expect(spanEndSpy).toHaveBeenCalledWith(1.7);
+    });
+  });
+
+  describe('span attributes', () => {
+    it('sets element type, identifier, paint type, load and render time', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 100,
+        identifier: 'my-image',
+        element: {
+          tagName: 'IMG',
+        },
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          attributes: expect.objectContaining({
+            'element.type': 'img',
+            'element.identifier': 'my-image',
+            'element.paint-type': 'image-paint',
+            'element.render-time': 100,
+            'element.load-time': undefined,
+            'element.size': undefined,
+            'element.url': undefined,
+          }),
+        }),
+        expect.any(Function),
+      );
+    });
+
+    it('sets element size if available', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 100,
+        naturalWidth: 512,
+        naturalHeight: 256,
+        identifier: 'my-image',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          attributes: expect.objectContaining({
+            'element.size': '512x256',
+            'element.identifier': 'my-image',
+          }),
+        }),
+        expect.any(Function),
+      );
+    });
+
+    it('sets element url if available', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        url: 'https://santry.com/image.png',
+        identifier: 'my-image',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          attributes: expect.objectContaining({
+            'element.identifier': 'my-image',
+            'element.url': 'https://santry.com/image.png',
+          }),
+        }),
+        expect.any(Function),
+      );
+    });
+
+    it('sets sentry attributes', () => {
+      const entry = {
+        name: 'image-paint',
+        entryType: 'element',
+        startTime: 0,
+        duration: 0,
+        renderTime: 100,
+        identifier: 'my-image',
+      } as Partial<PerformanceEventTiming>;
+
+      // @ts-expect-error - only passing a partial entry. This is fine for the test.
+      _onElementTiming({ entries: [entry] });
+
+      expect(startSpanSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          attributes: expect.objectContaining({
+            'sentry.op': 'ui.elementtiming',
+            'sentry.origin': 'auto.ui.browser.elementtiming',
+            'sentry.source': 'component',
+            'sentry.span-start-time-source': 'render-time',
+            route: undefined,
+          }),
+        }),
+        expect.any(Function),
+      );
+    });
+  });
+});
+
+describe('startTrackingElementTiming', () => {
+  const addInstrumentationHandlerSpy = vi.spyOn(browserMetricsInstrumentation, 'addPerformanceInstrumentationHandler');
+
+  beforeEach(() => {
+    addInstrumentationHandlerSpy.mockClear();
+  });
+
+  it('returns a function that does nothing if the browser does not support the performance API', () => {
+    vi.spyOn(browserMetricsUtils, 'getBrowserPerformanceAPI').mockReturnValue(undefined);
+    expect(typeof startTrackingElementTiming()).toBe('function');
+
+    expect(addInstrumentationHandlerSpy).not.toHaveBeenCalled();
+  });
+
+  it('adds an instrumentation handler for elementtiming entries, if the browser supports the performance API', () => {
+    vi.spyOn(browserMetricsUtils, 'getBrowserPerformanceAPI').mockReturnValue({
+      getEntriesByType: vi.fn().mockReturnValue([]),
+    } as unknown as Performance);
+
+    const addInstrumentationHandlerSpy = vi.spyOn(
+      browserMetricsInstrumentation,
+      'addPerformanceInstrumentationHandler',
+    );
+
+    const stopTracking = startTrackingElementTiming();
+
+    expect(typeof stopTracking).toBe('function');
+
+    expect(addInstrumentationHandlerSpy).toHaveBeenCalledWith('element', expect.any(Function));
+  });
+});
diff --git a/packages/browser/src/tracing/browserTracingIntegration.ts b/packages/browser/src/tracing/browserTracingIntegration.ts
index 1ba733ac4ca8..cf02490a3bf4 100644
--- a/packages/browser/src/tracing/browserTracingIntegration.ts
+++ b/packages/browser/src/tracing/browserTracingIntegration.ts
@@ -26,6 +26,7 @@ import {
   addHistoryInstrumentationHandler,
   addPerformanceEntries,
   registerInpInteractionListener,
+  startTrackingElementTiming,
   startTrackingINP,
   startTrackingInteractions,
   startTrackingLongAnimationFrames,
@@ -115,6 +116,14 @@ export interface BrowserTracingOptions {
    */
   enableInp: boolean;
 
+  /**
+   * If true, Sentry will capture [element timing](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming)
+   * information and add it to the corresponding transaction.
+   *
+   * Default: true
+   */
+  enableElementTiming: boolean;
+
   /**
    * Flag to disable patching all together for fetch requests.
    *
@@ -268,6 +277,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
   enableLongTask: true,
   enableLongAnimationFrame: true,
   enableInp: true,
+  enableElementTiming: true,
   ignoreResourceSpans: [],
   ignorePerformanceApiSpans: [],
   linkPreviousTrace: 'in-memory',
@@ -299,6 +309,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 
   const {
     enableInp,
+    enableElementTiming,
     enableLongTask,
     enableLongAnimationFrame,
     _experiments: { enableInteractions, enableStandaloneClsSpans },
@@ -406,6 +417,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         startTrackingINP();
       }
 
+      if (enableElementTiming) {
+        startTrackingElementTiming();
+      }
+
       if (
         enableLongAnimationFrame &&
         GLOBAL_OBJ.PerformanceObserver &&

From 6d64a9bebffe108843a4024ee2affb1615cb710d Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 16 Jun 2025 13:50:47 +0200
Subject: [PATCH 02/10] skip on webkit (surprise surprise)

---
 .../suites/tracing/metrics/element-timing/test.ts    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index 830121c4a7de..9d0b16c4b3b3 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -5,8 +5,8 @@ import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest
 
 sentryTest(
   'adds element timing spans to pageload span tree for elements rendered during pageload',
-  async ({ getLocalTestUrl, page }) => {
-    if (shouldSkipTracingTest()) {
+  async ({ getLocalTestUrl, page, browserName }) => {
+    if (shouldSkipTracingTest() || browserName === 'webkit') {
       sentryTest.skip();
     }
 
@@ -161,8 +161,8 @@ sentryTest(
   },
 );
 
-sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl, page }) => {
-  if (shouldSkipTracingTest()) {
+sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl, page, browserName }) => {
+  if (shouldSkipTracingTest() || browserName === 'webkit') {
     sentryTest.skip();
   }
 
@@ -212,8 +212,8 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
 
 // For element timing, we're fine with just always emitting a transaction,
 // regardless of a parent span being present or not (as in this case)
-sentryTest('emits element timing spans if no parent span is active', async ({ getLocalTestUrl, page }) => {
-  if (shouldSkipTracingTest()) {
+sentryTest('emits element timing spans if no parent span is active', async ({ getLocalTestUrl, page, browserName }) => {
+  if (shouldSkipTracingTest() || browserName === 'webkit') {
     sentryTest.skip();
   }
 

From 140171b2f70ea52c45264e9106a4db4f326aa20b Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 16 Jun 2025 16:41:24 +0200
Subject: [PATCH 03/10] update time margins in tests to account for CI slowness

---
 .../suites/tracing/metrics/element-timing/test.ts           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index 9d0b16c4b3b3..46027fe0e44b 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -46,9 +46,9 @@ sentryTest(
       route: '/index.html',
     });
     expect(imageFastRenderTime).toBeGreaterThan(90);
-    expect(imageFastRenderTime).toBeLessThan(200);
+    expect(imageFastRenderTime).toBeLessThan(400);
     expect(imageFastLoadTime).toBeGreaterThan(90);
-    expect(imageFastLoadTime).toBeLessThan(200);
+    expect(imageFastLoadTime).toBeLessThan(400);
     expect(imageFastRenderTime).toBeGreaterThan(imageFastLoadTime as number);
     expect(duration).toBeGreaterThan(0);
     expect(duration).toBeLessThan(20);
@@ -72,7 +72,7 @@ sentryTest(
       route: '/index.html',
     });
     expect(text1RenderTime).toBeGreaterThan(0);
-    expect(text1RenderTime).toBeLessThan(100);
+    expect(text1RenderTime).toBeLessThan(300);
     expect(text1LoadTime).toBe(0);
     expect(text1RenderTime).toBeGreaterThan(text1LoadTime as number);
     expect(text1Duration).toBe(0);

From 7e66499380026e5e333f5db17a9b29fc57d59970 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 16 Jun 2025 16:43:12 +0200
Subject: [PATCH 04/10] size limit

---
 .size-limit.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index c1725577c856..833357ad1c2c 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -38,21 +38,21 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '39 KB',
+    limit: '40.5 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '77 KB',
+    limit: '78 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '70.1 KB',
+    limit: '71 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
 
@@ -75,7 +75,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '82 KB',
+    limit: '83 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
@@ -120,7 +120,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '41 KB',
+    limit: '42 KB',
   },
   // Vue SDK (ESM)
   {
@@ -135,7 +135,7 @@ module.exports = [
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '41 KB',
+    limit: '42 KB',
   },
   // Svelte SDK (ESM)
   {
@@ -156,7 +156,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '39 KB',
+    limit: '40 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',

From 043393907474775dbe723f2319f5d0f3cd266c0b Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 16 Jun 2025 16:51:21 +0200
Subject: [PATCH 05/10] send onlyIfParent

---
 .../tracing/metrics/element-timing/test.ts    | 83 -------------------
 .../src/metrics/elementTiming.ts              |  1 +
 2 files changed, 1 insertion(+), 83 deletions(-)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index 46027fe0e44b..246b08627537 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -209,86 +209,3 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
     navigationStartTime,
   );
 });
-
-// For element timing, we're fine with just always emitting a transaction,
-// regardless of a parent span being present or not (as in this case)
-sentryTest('emits element timing spans if no parent span is active', async ({ getLocalTestUrl, page, browserName }) => {
-  if (shouldSkipTracingTest() || browserName === 'webkit') {
-    sentryTest.skip();
-  }
-
-  serveAssets(page);
-
-  const pageloadEventPromise = waitForTransactionRequest(page, evt => evt.contexts?.trace?.op === 'pageload');
-
-  const elementTimingTransactionPromise1 = waitForTransactionRequest(
-    page,
-    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-image]',
-  );
-
-  const elementTimingTransactionPromise2 = waitForTransactionRequest(
-    page,
-    evt => evt.contexts?.trace?.op === 'ui.elementtiming' && evt.transaction === 'element[click-text]',
-  );
-
-  const url = await getLocalTestUrl({ testDir: __dirname });
-
-  await page.goto(url);
-
-  await pageloadEventPromise;
-
-  await page.locator('#button2').click();
-
-  const imageElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise1);
-  const textElementTimingTransaction = envelopeRequestParser(await elementTimingTransactionPromise2);
-
-  expect(imageElementTimingTransaction.spans?.length).toEqual(0);
-  expect(textElementTimingTransaction.spans?.length).toEqual(0);
-
-  const imageETattributes = imageElementTimingTransaction.contexts?.trace?.data;
-  const textETattributes = textElementTimingTransaction.contexts?.trace?.data;
-
-  expect(imageETattributes).toEqual({
-    'element.identifier': 'click-image',
-    'element.paint-type': 'image-paint',
-    'element.load-time': expect.any(Number),
-    'element.render-time': expect.any(Number),
-    'element.size': '600x179',
-    'element.type': 'img',
-    'element.url': 'https://sentry-test-site.example/path/to/image-click.png',
-    'sentry.span-start-time-source': 'load-time',
-    'sentry.op': 'ui.elementtiming',
-    'sentry.origin': 'auto.ui.browser.elementtiming',
-    'sentry.source': 'component',
-    route: '/index.html',
-  });
-
-  expect(textETattributes).toEqual({
-    'element.identifier': 'click-text',
-    'element.load-time': 0,
-    'element.render-time': expect.any(Number),
-    'element.paint-type': 'text-paint',
-    'element.type': 'p',
-    'sentry.span-start-time-source': 'render-time',
-    'sentry.op': 'ui.elementtiming',
-    'sentry.origin': 'auto.ui.browser.elementtiming',
-    'sentry.source': 'component',
-    route: '/index.html',
-  });
-});
-
-function serveAssets(page: Page) {
-  page.route(/image-(fast|lazy|navigation|click)\.png/, async (route: Route) => {
-    await new Promise(resolve => setTimeout(resolve, 100));
-    return route.fulfill({
-      path: `${__dirname}/assets/sentry-logo-600x179.png`,
-    });
-  });
-
-  page.route('**/image-slow.png', async (route: Route) => {
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    return route.fulfill({
-      path: `${__dirname}/assets/sentry-logo-600x179.png`,
-    });
-  });
-}
diff --git a/packages/browser-utils/src/metrics/elementTiming.ts b/packages/browser-utils/src/metrics/elementTiming.ts
index 645e93abd13f..7305eae27e6e 100644
--- a/packages/browser-utils/src/metrics/elementTiming.ts
+++ b/packages/browser-utils/src/metrics/elementTiming.ts
@@ -109,6 +109,7 @@ export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }):
         name: `element[${elementEntry.identifier}]`,
         attributes,
         startTime: spanStartTime,
+        onlyIfParent: true,
       },
       span => {
         span.end(spanStartTime + duration);

From 083d170f88b5a46c96db46d6b86a56d024097860 Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Tue, 17 Jun 2025 13:23:44 -0400
Subject: [PATCH 06/10] improvements for refactors

---
 .../src/metrics/elementTiming.ts              | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/browser-utils/src/metrics/elementTiming.ts b/packages/browser-utils/src/metrics/elementTiming.ts
index 7305eae27e6e..f746b16645af 100644
--- a/packages/browser-utils/src/metrics/elementTiming.ts
+++ b/packages/browser-utils/src/metrics/elementTiming.ts
@@ -43,6 +43,12 @@ export function startTrackingElementTiming(): () => void {
  * exported only for testing
  */
 export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }): void => {
+  const activeSpan = getActiveSpan();
+  const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;
+  const transactionName = rootSpan
+    ? spanToJSON(rootSpan).description
+    : getCurrentScope().getScopeData().transactionName;
+
   entries.forEach(entry => {
     const elementEntry = entry as PerformanceElementTiming;
 
@@ -63,11 +69,11 @@ export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }):
     // - `renderTime` if available (available for all entries, except 3rd party images, but these should be covered by `loadTime`, 0 otherwise)
     // - `timestampInSeconds()` as a safeguard
     // see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming/renderTime#cross-origin_image_render_time
-    const { spanStartTime, spanStartTimeSource } = loadTime
-      ? { spanStartTime: msToSec(loadTime), spanStartTimeSource: 'load-time' }
+    const [spanStartTime, spanStartTimeSource] = loadTime
+      ? [msToSec(loadTime), 'load-time']
       : renderTime
-        ? { spanStartTime: msToSec(renderTime), spanStartTimeSource: 'render-time' }
-        : { spanStartTime: timestampInSeconds(), spanStartTimeSource: 'entry-emission' };
+        ? [msToSec(renderTime), 'render-time']
+        : [timestampInSeconds(), 'entry-emission'];
 
     const duration =
       paintType === 'image-paint'
@@ -78,30 +84,26 @@ export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }):
         : // for `'text-paint'` entries, we can't get a duration because the `loadTime` is always zero.
           0;
 
-    const activeSpan = getActiveSpan();
-    const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;
-    const route = rootSpan ? spanToJSON(rootSpan).description : getCurrentScope().getScopeData().transactionName;
-
     const attributes: SpanAttributes = {
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.elementtiming',
       [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.elementtiming',
       // name must be user-entered, so we can assume low cardinality
       [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
       // recording the source of the span start time, as it varies depending on available data
-      'sentry.span-start-time-source': spanStartTimeSource,
-      route,
-
+      'sentry.span_start_time_source': spanStartTimeSource,
+      'sentry.transaction_name': transactionName,
+      'element.id': elementEntry.id,
       'element.type': elementEntry.element?.tagName?.toLowerCase() || 'unknown',
       'element.size':
         elementEntry.naturalWidth && elementEntry.naturalHeight
           ? `${elementEntry.naturalWidth}x${elementEntry.naturalHeight}`
           : undefined,
-      'element.render-time': renderTime,
-      'element.load-time': loadTime,
+      'element.render_time': renderTime,
+      'element.load_time': loadTime,
       // `url` is `0`(number) for text paints (hence we fall back to undefined)
       'element.url': elementEntry.url || undefined,
       'element.identifier': elementEntry.identifier,
-      'element.paint-type': paintType,
+      'element.paint_type': paintType,
     };
 
     startSpan(

From cf0b02eb5c295012e10f5dad959067452049fed7 Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Mon, 23 Jun 2025 22:40:31 -0400
Subject: [PATCH 07/10] serve pages func

---
 .../tracing/metrics/element-timing/test.ts       | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index 246b08627537..b7b46ca85af6 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -209,3 +209,19 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
     navigationStartTime,
   );
 });
+
+function serveAssets(page: Page) {
+  page.route(/image-(fast|lazy|navigation|click)\.png/, async (route: Route) => {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    return route.fulfill({
+      path: `${__dirname}/assets/sentry-logo-600x179.png`,
+    });
+  });
+
+  page.route('**/image-slow.png', async (route: Route) => {
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    return route.fulfill({
+      path: `${__dirname}/assets/sentry-logo-600x179.png`,
+    });
+  });
+}

From 127effd9e931700f21bdb8865604dc69a308de97 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Tue, 1 Jul 2025 15:06:47 +0200
Subject: [PATCH 08/10] fix tests

---
 .../tracing/metrics/element-timing/test.ts    | 74 +++++++++----------
 .../instrument/metrics/elementTiming.test.ts  | 72 ++++++++++--------
 2 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index b7b46ca85af6..5afa766244fe 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -26,8 +26,8 @@ sentryTest(
 
     // Check image-fast span (this is served with a 100ms delay)
     const imageFastSpan = elementTimingSpans?.find(({ description }) => description === 'element[image-fast]');
-    const imageFastRenderTime = imageFastSpan?.data['element.render-time'];
-    const imageFastLoadTime = imageFastSpan?.data['element.load-time'];
+    const imageFastRenderTime = imageFastSpan?.data['element.render_time'];
+    const imageFastLoadTime = imageFastSpan?.data['element.load_time'];
     const duration = imageFastSpan!.timestamp! - imageFastSpan!.start_timestamp!;
 
     expect(imageFastSpan).toBeDefined();
@@ -35,15 +35,15 @@ sentryTest(
       'sentry.op': 'ui.elementtiming',
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
-      'sentry.span-start-time-source': 'load-time',
+      'sentry.span_start_time_source': 'load-time',
       'element.identifier': 'image-fast',
       'element.type': 'img',
       'element.size': '600x179',
       'element.url': 'https://sentry-test-site.example/path/to/image-fast.png',
-      'element.render-time': expect.any(Number),
-      'element.load-time': expect.any(Number),
-      'element.paint-type': 'image-paint',
-      route: '/index.html',
+      'element.render_time': expect.any(Number),
+      'element.load_time': expect.any(Number),
+      'element.paint_type': 'image-paint',
+      'sentry.transaction_name': '/index.html',
     });
     expect(imageFastRenderTime).toBeGreaterThan(90);
     expect(imageFastRenderTime).toBeLessThan(400);
@@ -55,21 +55,21 @@ sentryTest(
 
     // Check text1 span
     const text1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'text1');
-    const text1RenderTime = text1Span?.data['element.render-time'];
-    const text1LoadTime = text1Span?.data['element.load-time'];
+    const text1RenderTime = text1Span?.data['element.render_time'];
+    const text1LoadTime = text1Span?.data['element.load_time'];
     const text1Duration = text1Span!.timestamp! - text1Span!.start_timestamp!;
     expect(text1Span).toBeDefined();
     expect(text1Span?.data).toEqual({
       'sentry.op': 'ui.elementtiming',
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
-      'sentry.span-start-time-source': 'render-time',
+      'sentry.span_start_time_source': 'render-time',
       'element.identifier': 'text1',
       'element.type': 'p',
-      'element.render-time': expect.any(Number),
-      'element.load-time': expect.any(Number),
-      'element.paint-type': 'text-paint',
-      route: '/index.html',
+      'element.render_time': expect.any(Number),
+      'element.load_time': expect.any(Number),
+      'element.paint_type': 'text-paint',
+      'sentry.transaction_name': '/index.html',
     });
     expect(text1RenderTime).toBeGreaterThan(0);
     expect(text1RenderTime).toBeLessThan(300);
@@ -83,8 +83,8 @@ sentryTest(
     expect(button1Span?.data).toMatchObject({
       'element.identifier': 'button1',
       'element.type': 'button',
-      'element.paint-type': 'text-paint',
-      route: '/index.html',
+      'element.paint_type': 'text-paint',
+      'sentry.transaction_name': '/index.html',
     });
 
     // Check image-slow span
@@ -95,17 +95,17 @@ sentryTest(
       'element.type': 'img',
       'element.size': '600x179',
       'element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
-      'element.paint-type': 'image-paint',
-      'element.render-time': expect.any(Number),
-      'element.load-time': expect.any(Number),
+      'element.paint_type': 'image-paint',
+      'element.render_time': expect.any(Number),
+      'element.load_time': expect.any(Number),
       'sentry.op': 'ui.elementtiming',
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
-      'sentry.span-start-time-source': 'load-time',
-      route: '/index.html',
+      'sentry.span_start_time_source': 'load-time',
+      'sentry.transaction_name': '/index.html',
     });
-    const imageSlowRenderTime = imageSlowSpan?.data['element.render-time'];
-    const imageSlowLoadTime = imageSlowSpan?.data['element.load-time'];
+    const imageSlowRenderTime = imageSlowSpan?.data['element.render_time'];
+    const imageSlowLoadTime = imageSlowSpan?.data['element.load_time'];
     const imageSlowDuration = imageSlowSpan!.timestamp! - imageSlowSpan!.start_timestamp!;
     expect(imageSlowRenderTime).toBeGreaterThan(1400);
     expect(imageSlowRenderTime).toBeLessThan(2000);
@@ -122,17 +122,17 @@ sentryTest(
       'element.type': 'img',
       'element.size': '600x179',
       'element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
-      'element.paint-type': 'image-paint',
-      'element.render-time': expect.any(Number),
-      'element.load-time': expect.any(Number),
+      'element.paint_type': 'image-paint',
+      'element.render_time': expect.any(Number),
+      'element.load_time': expect.any(Number),
       'sentry.op': 'ui.elementtiming',
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
-      'sentry.span-start-time-source': 'load-time',
-      route: '/index.html',
+      'sentry.span_start_time_source': 'load-time',
+      'sentry.transaction_name': '/index.html',
     });
-    const lazyImageRenderTime = lazyImageSpan?.data['element.render-time'];
-    const lazyImageLoadTime = lazyImageSpan?.data['element.load-time'];
+    const lazyImageRenderTime = lazyImageSpan?.data['element.render_time'];
+    const lazyImageLoadTime = lazyImageSpan?.data['element.load_time'];
     const lazyImageDuration = lazyImageSpan!.timestamp! - lazyImageSpan!.start_timestamp!;
     expect(lazyImageRenderTime).toBeGreaterThan(1000);
     expect(lazyImageRenderTime).toBeLessThan(1500);
@@ -146,10 +146,10 @@ sentryTest(
     expect(lazyTextSpan?.data).toMatchObject({
       'element.identifier': 'lazy-text',
       'element.type': 'p',
-      route: '/index.html',
+      'sentry.transaction_name': '/index.html',
     });
-    const lazyTextRenderTime = lazyTextSpan?.data['element.render-time'];
-    const lazyTextLoadTime = lazyTextSpan?.data['element.load-time'];
+    const lazyTextRenderTime = lazyTextSpan?.data['element.render_time'];
+    const lazyTextLoadTime = lazyTextSpan?.data['element.load_time'];
     const lazyTextDuration = lazyTextSpan!.timestamp! - lazyTextSpan!.start_timestamp!;
     expect(lazyTextRenderTime).toBeGreaterThan(1000);
     expect(lazyTextRenderTime).toBeLessThan(1500);
@@ -197,15 +197,15 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
 
   // Image started loading after navigation, but render-time and load-time still start from the time origin
   // of the pageload. This is somewhat a limitation (though by design according to the ElementTiming spec)
-  expect((imageSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+  expect((imageSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
     navigationStartTime,
   );
-  expect((imageSpan!.data['element.load-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+  expect((imageSpan!.data['element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
     navigationStartTime,
   );
 
-  expect(textSpan?.data['element.load-time']).toBe(0);
-  expect((textSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
+  expect(textSpan?.data['element.load_time']).toBe(0);
+  expect((textSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
     navigationStartTime,
   );
 });
diff --git a/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts b/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts
index c1e76becd86c..04456ceadc44 100644
--- a/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts
+++ b/packages/browser-utils/test/instrument/metrics/elementTiming.test.ts
@@ -49,16 +49,20 @@ describe('_onElementTiming', () => {
       _onElementTiming({ entries: [entry] });
 
       expect(startSpanSpy).toHaveBeenCalledWith(
-        {
+        expect.objectContaining({
           name: 'element[test-element]',
           startTime: 0.05,
           attributes: expect.objectContaining({
             'sentry.op': 'ui.elementtiming',
-            'sentry.span-start-time-source': 'load-time',
-            'element.render-time': 100,
-            'element.load-time': 50,
+            'sentry.origin': 'auto.ui.browser.elementtiming',
+            'sentry.source': 'component',
+            'sentry.span_start_time_source': 'load-time',
+            'element.render_time': 100,
+            'element.load_time': 50,
+            'element.identifier': 'test-element',
+            'element.paint_type': 'image-paint',
           }),
-        },
+        }),
         expect.any(Function),
       );
     });
@@ -77,15 +81,20 @@ describe('_onElementTiming', () => {
       _onElementTiming({ entries: [entry] });
 
       expect(startSpanSpy).toHaveBeenCalledWith(
-        {
+        expect.objectContaining({
           name: 'element[test-element]',
           startTime: 0.1,
           attributes: expect.objectContaining({
-            'sentry.span-start-time-source': 'render-time',
-            'element.render-time': 100,
-            'element.load-time': undefined,
+            'sentry.op': 'ui.elementtiming',
+            'sentry.origin': 'auto.ui.browser.elementtiming',
+            'sentry.source': 'component',
+            'sentry.span_start_time_source': 'render-time',
+            'element.render_time': 100,
+            'element.load_time': undefined,
+            'element.identifier': 'test-element',
+            'element.paint_type': 'image-paint',
           }),
-        },
+        }),
         expect.any(Function),
       );
     });
@@ -103,15 +112,20 @@ describe('_onElementTiming', () => {
       _onElementTiming({ entries: [entry] });
 
       expect(startSpanSpy).toHaveBeenCalledWith(
-        {
+        expect.objectContaining({
           name: 'element[test-element]',
           startTime: expect.any(Number),
           attributes: expect.objectContaining({
-            'sentry.span-start-time-source': 'entry-emission',
-            'element.render-time': undefined,
-            'element.load-time': undefined,
+            'sentry.op': 'ui.elementtiming',
+            'sentry.origin': 'auto.ui.browser.elementtiming',
+            'sentry.source': 'component',
+            'sentry.span_start_time_source': 'entry-emission',
+            'element.render_time': undefined,
+            'element.load_time': undefined,
+            'element.identifier': 'test-element',
+            'element.paint_type': 'image-paint',
           }),
-        },
+        }),
         expect.any(Function),
       );
     });
@@ -137,9 +151,9 @@ describe('_onElementTiming', () => {
           name: 'element[test-element]',
           startTime: 1.5,
           attributes: expect.objectContaining({
-            'element.render-time': 1505,
-            'element.load-time': 1500,
-            'element.paint-type': 'image-paint',
+            'element.render_time': 1505,
+            'element.load_time': 1500,
+            'element.paint_type': 'image-paint',
           }),
         }),
         expect.any(Function),
@@ -167,9 +181,9 @@ describe('_onElementTiming', () => {
           name: 'element[test-element]',
           startTime: 1.6,
           attributes: expect.objectContaining({
-            'element.paint-type': 'text-paint',
-            'element.render-time': 1600,
-            'element.load-time': 0,
+            'element.paint_type': 'text-paint',
+            'element.render_time': 1600,
+            'element.load_time': 0,
           }),
         }),
         expect.any(Function),
@@ -198,9 +212,9 @@ describe('_onElementTiming', () => {
           name: 'element[test-element]',
           startTime: 1.7,
           attributes: expect.objectContaining({
-            'element.paint-type': 'somethingelse',
-            'element.render-time': 1700,
-            'element.load-time': 0,
+            'element.paint_type': 'somethingelse',
+            'element.render_time': 1700,
+            'element.load_time': 0,
           }),
         }),
         expect.any(Function),
@@ -232,9 +246,9 @@ describe('_onElementTiming', () => {
           attributes: expect.objectContaining({
             'element.type': 'img',
             'element.identifier': 'my-image',
-            'element.paint-type': 'image-paint',
-            'element.render-time': 100,
-            'element.load-time': undefined,
+            'element.paint_type': 'image-paint',
+            'element.render_time': 100,
+            'element.load_time': undefined,
             'element.size': undefined,
             'element.url': undefined,
           }),
@@ -312,8 +326,8 @@ describe('_onElementTiming', () => {
             'sentry.op': 'ui.elementtiming',
             'sentry.origin': 'auto.ui.browser.elementtiming',
             'sentry.source': 'component',
-            'sentry.span-start-time-source': 'render-time',
-            route: undefined,
+            'sentry.span_start_time_source': 'render-time',
+            'sentry.transaction_name': undefined,
           }),
         }),
         expect.any(Function),

From b8dedcb49eab7b87b9ad3e237a486e4166d1547d Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Tue, 1 Jul 2025 15:39:36 +0200
Subject: [PATCH 09/10] fix integration tests

---
 .../suites/tracing/metrics/element-timing/template.html      | 4 ++--
 .../suites/tracing/metrics/element-timing/test.ts            | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
index a9bc15eb4c70..6f536f8d2aa4 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/template.html
@@ -5,10 +5,10 @@
   </head>
   <body>
     <!-- eagerly loaded image (image-paint) with fast load time -->
-    <img src="https://sentry-test-site.example/path/to/image-fast.png" elementtiming="image-fast" />
+    <img src="https://sentry-test-site.example/path/to/image-fast.png" elementtiming="image-fast" id="image-fast-id"/>
 
     <!-- eagerly rendered text (text-paint) -->
-    <p elementtiming="text1">
+    <p elementtiming="text1" id="text1-id">
       This is some text content
       <pan>with another nested span</pan>
       <small>and a small text</small>
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
index 5afa766244fe..e17cbbbda691 100644
--- a/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts
@@ -36,6 +36,7 @@ sentryTest(
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
       'sentry.span_start_time_source': 'load-time',
+      'element.id': 'image-fast-id',
       'element.identifier': 'image-fast',
       'element.type': 'img',
       'element.size': '600x179',
@@ -64,6 +65,7 @@ sentryTest(
       'sentry.origin': 'auto.ui.browser.elementtiming',
       'sentry.source': 'component',
       'sentry.span_start_time_source': 'render-time',
+      'element.id': 'text1-id',
       'element.identifier': 'text1',
       'element.type': 'p',
       'element.render_time': expect.any(Number),
@@ -91,6 +93,7 @@ sentryTest(
     const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'image-slow');
     expect(imageSlowSpan).toBeDefined();
     expect(imageSlowSpan?.data).toEqual({
+      'element.id': '',
       'element.identifier': 'image-slow',
       'element.type': 'img',
       'element.size': '600x179',
@@ -118,6 +121,7 @@ sentryTest(
     const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-image');
     expect(lazyImageSpan).toBeDefined();
     expect(lazyImageSpan?.data).toEqual({
+      'element.id': '',
       'element.identifier': 'lazy-image',
       'element.type': 'img',
       'element.size': '600x179',
@@ -144,6 +148,7 @@ sentryTest(
     // Check lazy-text span
     const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-text');
     expect(lazyTextSpan?.data).toMatchObject({
+      'element.id': '',
       'element.identifier': 'lazy-text',
       'element.type': 'p',
       'sentry.transaction_name': '/index.html',

From f6b225ce85a1b3366589b4f7c7d4ea11c24ee367 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Tue, 1 Jul 2025 15:41:29 +0200
Subject: [PATCH 10/10] increase size limit

---
 .size-limit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index 292868d07290..685b40b00fbe 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -206,7 +206,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '43 KB',
+    limit: '44 KB',
   },
   // SvelteKit SDK (ESM)
   {
@@ -215,7 +215,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '40 KB',
+    limit: '41 KB',
   },
   // Node SDK (ESM)
   {