feat(browser): Send additional LCP timing info

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts

@@ -29,4 +29,6 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
   // the button as LCP.
   expect(eventData.contexts?.trace?.data?.['lcp.element'].startsWith('body >')).toBe(true);
   expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0);
+  expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeGreaterThan(0);
+  expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0);
 });

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -635,6 +635,18 @@ function _setWebVitalAttributes(span: Span): void {
       span.setAttribute('lcp.url', _lcpEntry.url.trim().slice(0, 200));
     }
 
+    if (_lcpEntry.renderTime) {
+      // renderTime is the time portion of LCP that's related to rendering the LCP element.
+      // it's 0 if the LCP element is loaded from a 3rd party origin that doesn't send the
+      // `Timing-Allow-Origin` header.
+      span.setAttribute('lcp.renderTime', _lcpEntry.renderTime);
+    }
+
+    if (_lcpEntry.loadTime) {
+      // loadTime is the time portion of LCP that's related to loading the LCP element.
+      span.setAttribute('lcp.loadTime', _lcpEntry.loadTime);
+    }
+
     span.setAttribute('lcp.size', _lcpEntry.size);
   }