Resolve LCP if exists

Author: jonathanKingston

injected/src/features/breakage-reporting.js

@@ -4,15 +4,15 @@ import { getExpandedPerformanceMetrics, getJsPerformanceMetrics } from './breaka
 export default class BreakageReporting extends ContentFeature {
     init() {
         const isExpandedPerformanceMetricsEnabled = this.getFeatureSettingEnabled('expandedPerformanceMetrics', 'enabled');
-        this.messaging.subscribe('getBreakageReportValues', () => {
+        this.messaging.subscribe('getBreakageReportValues', async () => {
             const jsPerformance = getJsPerformanceMetrics();
             const referrer = document.referrer;
             const result = {
                 jsPerformance,
                 referrer,
             };
             if (isExpandedPerformanceMetricsEnabled) {
-                const expandedPerformanceMetrics = getExpandedPerformanceMetrics();
+                const expandedPerformanceMetrics = await getExpandedPerformanceMetrics();
                 if (expandedPerformanceMetrics.success) {
                     result.expandedPerformanceMetrics = expandedPerformanceMetrics.metrics;
                 }

injected/src/features/breakage-reporting/utils.js

@@ -19,11 +19,50 @@ function returnError(errorMessage) {
     return { error: errorMessage, success: false };
 }
 
+/**
+ * @returns {Promise<number | null>}
+ */
+function waitForLCP(timeoutMs = 500) {
+    return new Promise((resolve) => {
+        let timeoutId;
+        let observer;
+
+        const cleanup = () => {
+            if (observer) observer.disconnect();
+            if (timeoutId) clearTimeout(timeoutId);
+        };
+
+        // Set timeout
+        timeoutId = setTimeout(() => {
+            cleanup();
+            resolve(null); // Resolve with null instead of hanging
+        }, timeoutMs);
+
+        // Try to get existing LCP
+        observer = new PerformanceObserver((list) => {
+            const entries = list.getEntries();
+            const lastEntry = entries[entries.length - 1];
+            if (lastEntry) {
+                cleanup();
+                resolve(lastEntry.startTime);
+            }
+        });
+
+        try {
+            observer.observe({ type: 'largest-contentful-paint', buffered: true });
+        } catch (error) {
+            // Handle browser compatibility issues
+            cleanup();
+            resolve(null);
+        }
+    });
+}
+
 /**
  * Get the expanded performance metrics
- * @returns {ErrorObject | PerformanceMetricsResponse}
+ * @returns {Promise<ErrorObject | PerformanceMetricsResponse>}
  */
-export function getExpandedPerformanceMetrics() {
+export async function getExpandedPerformanceMetrics() {
     try {
         if (document.readyState !== 'complete') {
             return returnError('Document not ready');
@@ -38,15 +77,8 @@ export function getExpandedPerformanceMetrics() {
 
         // Get largest contentful paint if available
         let largestContentfulPaint = null;
-        if (
-            window.PerformanceObserver &&
-            PerformanceObserver.supportedEntryTypes &&
-            PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint')
-        ) {
-            const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
-            if (lcpEntries.length > 0) {
-                largestContentfulPaint = lcpEntries[lcpEntries.length - 1].startTime;
-            }
+        if (PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint')) {
+            largestContentfulPaint = await waitForLCP();
         }
 
         // Calculate total resource sizes

injected/src/features/performance-metrics.js

@@ -20,8 +20,8 @@ export default class PerformanceMetrics extends ContentFeature {
         }
     }
 
-    triggerExpandedPerformanceMetrics() {
-        const expandedPerformanceMetrics = getExpandedPerformanceMetrics();
+    async triggerExpandedPerformanceMetrics() {
+        const expandedPerformanceMetrics = await getExpandedPerformanceMetrics();
         this.messaging.notify('expandedPerformanceMetricsResult', expandedPerformanceMetrics);
     }
 }