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 33090b871b680..a8f69b7bb98ab 100644
--- a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx
+++ b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx
@@ -18,13 +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 |
+| 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 |
@@ -188,6 +189,25 @@ 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.
@@ -236,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"],
}),
],
});
@@ -252,7 +272,7 @@ Ignore spans created from `performance.mark()` and `performance.measure()`:
Sentry.init({
integrations: [
Sentry.browserTracingIntegration({
- ignorePerformanceApiSpans: ['myMeasurement', /myMark/],
+ ignorePerformanceApiSpans: ["myMeasurement", /myMark/],
}),
],
});
@@ -285,7 +305,11 @@ Sentry.init({
}),
],
tracesSampleRate: 1.0,
- tracePropagationTargets: ["localhost", /^\//, /^https:\/\/yourserver\.io\/api/],
+ tracePropagationTargets: [
+ "localhost",
+ /^\//,
+ /^https:\/\/yourserver\.io\/api/,
+ ],
});
```