From 1cbcfb500f826455f9be3422f93fb5bd5e4ac935 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 10 Feb 2026 17:13:29 +0100 Subject: [PATCH 1/2] feat(js): Document element timing option in browser tracing Add documentation for the enableElementTiming option that captures performance data for elements marked with the elementtiming attribute. Closes #16334 Co-Authored-By: Claude Sonnet 4.5 --- .../automatic-instrumentation.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx index 33090b871b680..46b70adbbae01 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -25,6 +25,7 @@ Once you enable tracing, the SDK automatically captures performance data without | **HTTP requests** | All fetch/XHR calls | Duration, status, URL | | **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) | | **Long tasks** | Main thread blocking > 50ms | Duration, attribution | +| **Element timing** | Elements marked with `elementtiming` attribute | Render/load times for critical UI elements | @@ -188,6 +189,24 @@ Enable/disable spans for long animation frames. Falls back to long tasks if brow + + +Enable/disable automatic spans for [Element Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming) entries. When enabled, Sentry captures performance data for elements marked with the `elementtiming` attribute. + +This is useful for tracking when critical UI elements (like hero images or important text) are rendered on the page: + +```html + +

Welcome

+``` + +Element timing spans will appear in your trace with names like `element[hero-image]` and include metrics such as: +- Render time +- Load time (for images) +- Element size and type + + + Mark pageload/navigation spans as "cancelled" when the tab moves to background. Recommended to keep enabled for accurate measurements. From b2079cca80ad9b90d8d66c7a571a755e44c28fda Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 10 Feb 2026 17:21:26 +0100 Subject: [PATCH 2/2] formatting, add availableSince, fix broken link --- .../integrations/browsertracing.mdx | 2 +- .../automatic-instrumentation.mdx | 29 +++++++++++-------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/docs/platforms/javascript/common/configuration/integrations/browsertracing.mdx b/docs/platforms/javascript/common/configuration/integrations/browsertracing.mdx index 0a27d56ede813..738ae9d99f294 100644 --- a/docs/platforms/javascript/common/configuration/integrations/browsertracing.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/browsertracing.mdx @@ -39,4 +39,4 @@ Sentry.init({ }); ``` -See Configuration Options for a full list of available options for `browserTracingIntegration` +See Configuration Options for a full list of available options for `browserTracingIntegration` diff --git a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx index 46b70adbbae01..a8f69b7bb98ab 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -18,14 +18,14 @@ Capturing spans requires that you first set up trac Once you enable tracing, the SDK automatically captures performance data without additional code: -| What | Description | Metrics | -|------|-------------|---------| -| **Page loads** | Full page load performance | LCP, CLS, TTFB | -| **Navigations** | Client-side route changes | Duration, Web Vitals | -| **HTTP requests** | All fetch/XHR calls | Duration, status, URL | -| **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) | -| **Long tasks** | Main thread blocking > 50ms | Duration, attribution | -| **Element timing** | Elements marked with `elementtiming` attribute | Render/load times for critical UI elements | +| What | Description | Metrics | +| --------------------- | ---------------------------------------------- | ------------------------------------------ | +| **Page loads** | Full page load performance | LCP, CLS, TTFB | +| **Navigations** | Client-side route changes | Duration, Web Vitals | +| **HTTP requests** | All fetch/XHR calls | Duration, status, URL | +| **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) | +| **Long tasks** | Main thread blocking > 50ms | Duration, attribution | +| **Element timing** | Elements marked with `elementtiming` attribute | Render/load times for critical UI elements | @@ -189,7 +189,7 @@ Enable/disable spans for long animation frames. Falls back to long tasks if brow - + Enable/disable automatic spans for [Element Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming) entries. When enabled, Sentry captures performance data for elements marked with the `elementtiming` attribute. @@ -201,6 +201,7 @@ This is useful for tracking when critical UI elements (like hero images or impor ``` Element timing spans will appear in your trace with names like `element[hero-image]` and include metrics such as: + - Render time - Load time (for images) - Element size and type @@ -255,7 +256,7 @@ Ignore specific resource span categories by their `op` (e.g., `resource.script`, Sentry.init({ integrations: [ Sentry.browserTracingIntegration({ - ignoreResourceSpans: ['resource.css', 'resource.script'], + ignoreResourceSpans: ["resource.css", "resource.script"], }), ], }); @@ -271,7 +272,7 @@ Ignore spans created from `performance.mark()` and `performance.measure()`: Sentry.init({ integrations: [ Sentry.browserTracingIntegration({ - ignorePerformanceApiSpans: ['myMeasurement', /myMark/], + ignorePerformanceApiSpans: ["myMeasurement", /myMark/], }), ], }); @@ -304,7 +305,11 @@ Sentry.init({ }), ], tracesSampleRate: 1.0, - tracePropagationTargets: ["localhost", /^\//, /^https:\/\/yourserver\.io\/api/], + tracePropagationTargets: [ + "localhost", + /^\//, + /^https:\/\/yourserver\.io\/api/, + ], }); ```