RPP: guard against CruxManager errors

[email protected]

Bug: 441265851
Change-Id: I6b133db41dc6fcced066136fe47f7669b92b823d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6953785
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: jackfranklin

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -919,6 +919,70 @@ Available insights:
     example question: How can I reduce the amount of legacy JavaScript on my page?
 === end content
 
+Title: PerformanceTraceFormatter formatTraceSummary deals with CrUX manager errors
+Content:
+URL: http://localhost/image-delivery-cases.html
+Bounds: {min: 59728641874, max: 59734400108}
+CPU throttling: 1x
+Network throttling: No throttling
+Metrics (lab / observed):
+  - LCP: 663 ms, event: (eventKey: r-14753, ts: 59729312744)
+  - LCP breakdown:
+    - TTFB: 7 ms, bounds: {min: 59728649746, max: 59728656735}
+    - Load delay: 45.6 ms, bounds: {min: 59728656735, max: 59728702313}
+    - Load duration: 506.3 ms, bounds: {min: 59728702313, max: 59729208600}
+    - Render delay: 104.1 ms, bounds: {min: 59729208600, max: 59729312744}
+  - CLS: 0.31, event: (eventKey: s--1, ts: 59729100192)
+Metrics (field / real users): n/a – no data for this page in CrUX
+Available insights:
+  - insight name: Cache
+    description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
+    relevant trace bounds: {min: 59728702014, max: 59728867430}
+    estimated metric savings: FCP 0 ms, LCP 150 ms
+    estimated wasted bytes: 971.5 kB
+    example question: What caching strategies can I apply to improve my page performance?
+  - insight name: ImageDelivery
+    description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
+    relevant trace bounds: {min: 59728701403, max: 59729395208}
+    estimated metric savings: FCP 0 ms, LCP 100 ms
+    estimated wasted bytes: 2 MB
+    example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
+    example question: Are all images on my site optimized?
+  - insight name: LCPBreakdown
+    description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
+    relevant trace bounds: {min: 59728649746, max: 59729312744}
+    example question: Help me optimize my LCP score
+    example question: Which LCP phase was most problematic?
+    example question: What can I do to reduce the LCP time for this page load?
+  - insight name: LCPDiscovery
+    description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
+    relevant trace bounds: {min: 59728656735, max: 59729209036}
+    example question: Suggest fixes to reduce my LCP
+    example question: What can I do to reduce my LCP discovery time?
+    example question: Why is LCP discovery time important?
+  - insight name: CLSCulprits
+    description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
+    relevant trace bounds: {min: 59729100192, max: 59730317334}
+    example question: Help me optimize my CLS score
+    example question: How can I prevent layout shifts on this page?
+  - insight name: DocumentLatency
+    description: Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
+    relevant trace bounds: {min: 59728651057, max: 59728790724}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 1.6 kB
+    example question: How do I decrease the initial loading time of my page?
+    example question: Did anything slow down the request for this document?
+  - insight name: Viewport
+    description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
+    relevant trace bounds: {min: 59728649746, max: 59734400108}
+    estimated metric savings: INP 0 ms
+    example question: How do I make sure my page is optimized for mobile viewing?
+  - insight name: ThirdParties
+    description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
+    relevant trace bounds: {min: 59728701403, max: 59729465969}
+    example question: Which third parties are having the largest impact on my page performance?
+=== end content
+
 Title: PerformanceTraceFormatter formatTraceSummary image-delivery.json.gz
 Content:
 URL: http://localhost/image-delivery-cases.html

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {SnapshotTester} from '../../../testing/SnapshotTester.js';
@@ -42,6 +43,15 @@ describeWithEnvironment('PerformanceTraceFormatter', () => {
       snapshotTester.assert(this, output);
     });
 
+    it('deals with CrUX manager errors', async function() {
+      const {formatter} = await createFormatter(this, 'image-delivery.json.gz');
+      sinon.stub(CrUXManager.CrUXManager, 'instance').callsFake(() => {
+        throw new Error('something went wrong with CrUX Manager');
+      });
+      const output = formatter.formatTraceSummary();
+      snapshotTester.assert(this, output);
+    });
+
     // This one has field data.
     it('image-delivery.json.gz', async function() {
       const {formatter} = await createFormatter(this, 'image-delivery.json.gz');

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -31,6 +31,81 @@ export class PerformanceTraceFormatter {
     return `{min: ${bounds.min}, max: ${bounds.max}}`;
   }
 
+  /**
+   * Fetching the Crux summary can error outside of DevTools, hence the
+   * try-catch around it here.
+   */
+  #getCruxTraceSummary(insightSet: Trace.Insights.Types.InsightSet|null): string[] {
+    if (insightSet === null) {
+      return [];
+    }
+    try {
+      const cruxScope = CrUXManager.CrUXManager.instance().getSelectedScope();
+      const parts: string[] = [];
+      const fieldMetrics =
+          Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, this.#parsedTrace.metadata, cruxScope);
+      const fieldLcp = fieldMetrics?.lcp;
+      const fieldInp = fieldMetrics?.inp;
+      const fieldCls = fieldMetrics?.cls;
+
+      if (fieldLcp || fieldInp || fieldCls) {
+        parts.push('Metrics (field / real users):');
+
+        const serializeFieldMetricTimingResult =
+            (fieldMetric: Trace.Insights.Common.CrUXFieldMetricTimingResult): string => {
+              return `${Math.round(fieldMetric.value / 1000)} ms (scope: ${fieldMetric.pageScope})`;
+            };
+
+        const serializeFieldMetricNumberResult =
+            (fieldMetric: Trace.Insights.Common.CrUXFieldMetricNumberResult): string => {
+              return `${fieldMetric.value.toFixed(2)} (scope: ${fieldMetric.pageScope})`;
+            };
+
+        if (fieldLcp) {
+          parts.push(`  - LCP: ${serializeFieldMetricTimingResult(fieldLcp)}`);
+
+          const fieldLcpBreakdown = fieldMetrics?.lcpBreakdown;
+          if (fieldLcpBreakdown &&
+              (fieldLcpBreakdown.ttfb || fieldLcpBreakdown.loadDelay || fieldLcpBreakdown.loadDuration ||
+               fieldLcpBreakdown.renderDelay)) {
+            parts.push('  - LCP breakdown:');
+            if (fieldLcpBreakdown.ttfb) {
+              parts.push(`    - TTFB: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.ttfb)}`);
+            }
+            if (fieldLcpBreakdown.loadDelay) {
+              parts.push(`    - Load delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDelay)}`);
+            }
+            if (fieldLcpBreakdown.loadDuration) {
+              parts.push(`    - Load duration: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDuration)}`);
+            }
+            if (fieldLcpBreakdown.renderDelay) {
+              parts.push(`    - Render delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.renderDelay)}`);
+            }
+          }
+        }
+        if (fieldInp) {
+          parts.push(`  - INP: ${serializeFieldMetricTimingResult(fieldInp)}`);
+        }
+        if (fieldCls) {
+          parts.push(`  - CLS: ${serializeFieldMetricNumberResult(fieldCls)}`);
+        }
+
+        parts.push(
+            '  - The above data is from CrUX–Chrome User Experience Report. It\'s how the page performs for real users.');
+        parts.push('  - The values shown above are the p75 measure of all real Chrome users');
+        parts.push('  - The scope indicates if the data came from the entire origin, or a specific url');
+        parts.push(
+            '  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation ' +
+            'of results from real-world users. Best practice is to prioritize metrics that are bad in field data. ' +
+            'Lab metrics may be better or worse than fields metrics depending on the developer\'s machine, network, or the ' +
+            'actions performed while tracing.');
+      }
+      return parts;
+    } catch {
+      return [];
+    }
+  }
+
   formatTraceSummary(): string {
     const parsedTrace = this.#parsedTrace;
     const insightSet = this.#insightSet;
@@ -78,64 +153,9 @@ export class PerformanceTraceFormatter {
       parts.push('Metrics (lab / observed): n/a');
     }
 
-    const fieldMetrics = insightSet &&
-        Trace.Insights.Common.getFieldMetricsForInsightSet(
-            insightSet, traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
-    const fieldLcp = fieldMetrics?.lcp;
-    const fieldInp = fieldMetrics?.inp;
-    const fieldCls = fieldMetrics?.cls;
-
-    if (fieldLcp || fieldInp || fieldCls) {
-      parts.push('Metrics (field / real users):');
-
-      const serializeFieldMetricTimingResult =
-          (fieldMetric: Trace.Insights.Common.CrUXFieldMetricTimingResult): string => {
-            return `${Math.round(fieldMetric.value / 1000)} ms (scope: ${fieldMetric.pageScope})`;
-          };
-
-      const serializeFieldMetricNumberResult =
-          (fieldMetric: Trace.Insights.Common.CrUXFieldMetricNumberResult): string => {
-            return `${fieldMetric.value.toFixed(2)} (scope: ${fieldMetric.pageScope})`;
-          };
-
-      if (fieldLcp) {
-        parts.push(`  - LCP: ${serializeFieldMetricTimingResult(fieldLcp)}`);
-
-        const fieldLcpBreakdown = fieldMetrics?.lcpBreakdown;
-        if (fieldLcpBreakdown &&
-            (fieldLcpBreakdown.ttfb || fieldLcpBreakdown.loadDelay || fieldLcpBreakdown.loadDuration ||
-             fieldLcpBreakdown.renderDelay)) {
-          parts.push('  - LCP breakdown:');
-          if (fieldLcpBreakdown.ttfb) {
-            parts.push(`    - TTFB: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.ttfb)}`);
-          }
-          if (fieldLcpBreakdown.loadDelay) {
-            parts.push(`    - Load delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDelay)}`);
-          }
-          if (fieldLcpBreakdown.loadDuration) {
-            parts.push(`    - Load duration: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.loadDuration)}`);
-          }
-          if (fieldLcpBreakdown.renderDelay) {
-            parts.push(`    - Render delay: ${serializeFieldMetricTimingResult(fieldLcpBreakdown.renderDelay)}`);
-          }
-        }
-      }
-      if (fieldInp) {
-        parts.push(`  - INP: ${serializeFieldMetricTimingResult(fieldInp)}`);
-      }
-      if (fieldCls) {
-        parts.push(`  - CLS: ${serializeFieldMetricNumberResult(fieldCls)}`);
-      }
-
-      parts.push(
-          '  - The above data is from CrUX–Chrome User Experience Report. It\'s how the page performs for real users.');
-      parts.push('  - The values shown above are the p75 measure of all real Chrome users');
-      parts.push('  - The scope indicates if the data came from the entire origin, or a specific url');
-      parts.push(
-          '  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation ' +
-          'of results from real-world users. Best practice is to prioritize metrics that are bad in field data. ' +
-          'Lab metrics may be better or worse than fields metrics depending on the developer\'s machine, network, or the ' +
-          'actions performed while tracing.');
+    const cruxParts = insightSet && this.#getCruxTraceSummary(insightSet);
+    if (cruxParts?.length) {
+      parts.push(...cruxParts);
     } else {
       parts.push('Metrics (field / real users): n/a – no data for this page in CrUX');
     }