feat(common): upgrade warning to logged error for lazy-loaded LCP images using NgOptimizedImage (#52004)

atcastle · alxhub · commit dde3fdabbd24 · 2023-10-04T11:36:01.000-07:00
Upgrade the existing warning so it now logs an error instead, when an LCP element is determined to not be usings the `priority` attribute. Error is logged, not thrown. PR Close #52004
diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md
@@ -65,7 +65,7 @@ Marking an image as `priority` applies the following optimizations:
 *   Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
 *   Automatically generates a [preload link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) if [rendering on the server](/guide/universal).
 
-Angular displays a warning during development if the LCP element is an image that does not have the `priority` attribute. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
+Angular logs an error during development if the LCP element is an image that does not have the `priority` attribute, as this can hurt loading performance significantly. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
 
 #### Step 5: Include Height and Width
 
diff --git a/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts b/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts
@@ -74,7 +74,7 @@ export class LCPImageObserver implements OnDestroy {
       if (!img) return;
       if (!img.priority && !img.alreadyWarnedPriority) {
         img.alreadyWarnedPriority = true;
-        logMissingPriorityWarning(imgSrc);
+        logMissingPriorityError(imgSrc);
       }
       if (img.modified && !img.alreadyWarnedModified) {
         img.alreadyWarnedModified = true;
@@ -118,9 +118,9 @@ export class LCPImageObserver implements OnDestroy {
   }
 }
 
-function logMissingPriorityWarning(ngSrc: string) {
+function logMissingPriorityError(ngSrc: string) {
   const directiveDetails = imgDirectiveDetails(ngSrc);
-  console.warn(formatRuntimeError(
+  console.error(formatRuntimeError(
       RuntimeErrorCode.LCP_IMG_MISSING_PRIORITY,
       `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` +
           `element but was not marked "priority". This image should be marked ` +
diff --git a/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.e2e-spec.ts
@@ -29,10 +29,9 @@ describe('NgOptimizedImage directive', () => {
 
     // Make sure that only one warning is in the console for image `a.png`,
     // since the `b.png` should be below the fold and not treated as an LCP element.
-    const logs = await collectBrowserLogs(logging.Level.WARNING);
-    expect(logs.length).toEqual(2);
+    const logs = await collectBrowserLogs(logging.Level.SEVERE);
+    expect(logs.length).toEqual(1);
     // Verify that the error code and the image src are present in the error message.
     expect(logs[0].message).toMatch(/NG02955.*?a\.png/);
-    expect(logs[1].message).toMatch(/NG02964.*?logo-500w\.jpg/);
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ export class LCPImageObserver implements OnDestroy {`
`74`	`74`	`if (!img) return;`
`75`	`75`	`if (!img.priority && !img.alreadyWarnedPriority) {`
`76`	`76`	`img.alreadyWarnedPriority = true;`
`77`		`- logMissingPriorityWarning(imgSrc);`
	`77`	`+ logMissingPriorityError(imgSrc);`
`78`	`78`	`}`
`79`	`79`	`if (img.modified && !img.alreadyWarnedModified) {`
`80`	`80`	`img.alreadyWarnedModified = true;`
`@@ -118,9 +118,9 @@ export class LCPImageObserver implements OnDestroy {`
`118`	`118`	`}`
`119`	`119`	`}`
`120`	`120`
`121`		`-function logMissingPriorityWarning(ngSrc: string) {`
	`121`	`+function logMissingPriorityError(ngSrc: string) {`
`122`	`122`	`const directiveDetails = imgDirectiveDetails(ngSrc);`
`123`		`- console.warn(formatRuntimeError(`
	`123`	`+ console.error(formatRuntimeError(`
`124`	`124`	`RuntimeErrorCode.LCP_IMG_MISSING_PRIORITY,`
`125`	`125`	`${directiveDetails} this image is the Largest Contentful Paint (LCP) ` +
`126`	`126`	`element but was not marked "priority". This image should be marked ` +