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/, + ], }); ```