core(link-elements): gracefully handle header parser error

core/gather/gatherers/link-elements.js

@@ -10,6 +10,8 @@ import FRGatherer from '../base-gatherer.js';
 import {pageFunctions} from '../../lib/page-functions.js';
 import DevtoolsLog from './devtools-log.js';
 import {MainResource} from '../../computed/main-resource.js';
+import {Util} from '../../../shared/util.js';
+import * as i18n from '../../lib/i18n/i18n.js';
 
 /* globals HTMLLinkElement getNodeDetails */
 
@@ -19,6 +21,17 @@ import {MainResource} from '../../computed/main-resource.js';
  * headers of the main resource.
  */
 
+const UIStrings = {
+  /**
+   * @description Warning message explaining that there was an error parsing a link header in an HTTP response. `error` will be an english string with more details on the error. `header` will be the value of the header that caused the error. `link` is a type of HTTP header and should not be translated.
+   * @example {Expected attribute delimiter at offset 94} error
+   * @example {<https://assets.calendly.com/assets/booking/css/booking-d0ac32b1.css>; rel=preload; as=style; nopush} error
+   */
+  headerParseWarning: 'Error parsing `link` header ({error}): `{header}`',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
 /**
  *
  * @param {string} url
@@ -126,7 +139,21 @@ class LinkElements extends FRGatherer {
     for (const header of mainDocument.responseHeaders) {
       if (header.name.toLowerCase() !== 'link') continue;
 
-      for (const link of LinkHeader.parse(header.value).refs) {
+      /** @type {LinkHeader.Reference[]} */
+      let parsedRefs = [];
+
+      try {
+        parsedRefs = LinkHeader.parse(header.value).refs;
+      } catch (err) {
+        const truncatedHeader = Util.truncate(header.value, 100);
+        const warning = str_(UIStrings.headerParseWarning, {
+          error: err.message,
+          header: truncatedHeader,
+        });
+        context.baseArtifacts.LighthouseRunWarnings.push(warning);
+      }
+
+      for (const link of parsedRefs) {
         linkElements.push({
           rel: link.rel || '',
           href: normalizeUrlOrNull(link.uri, context.baseArtifacts.URL.finalDisplayedUrl),
@@ -181,3 +208,4 @@ class LinkElements extends FRGatherer {
 }
 
 export default LinkElements;
+export {UIStrings};

core/test/gather/gatherers/link-elements-test.js

@@ -52,6 +52,7 @@ describe('Link Elements gatherer', () => {
       URL: {
         finalDisplayedUrl: url,
       },
+      LighthouseRunWarnings: [],
     };
     const passContext = {driver, url, baseArtifacts, computedCache: new Map()};
     return [passContext, {}];
@@ -107,4 +108,19 @@ describe('Link Elements gatherer', () => {
       link({source: 'headers', rel: 'prefetch', href: 'https://example.com/', as: 'image'}),
     ]);
   });
+
+  it('adds toplevel warning on parser error', async () => {
+    const linkElementsInDOM = [];
+    const headers = [
+      {name: 'Link', value: '<https://example.com/>a'},
+    ];
+
+    const passData = getPassData({linkElementsInDOM, headers});
+    const result = await new LinkElements().afterPass(...passData);
+    expect(result).toEqual([]);
+    expect(passData[0].baseArtifacts.LighthouseRunWarnings).toHaveLength(1);
+    expect(passData[0].baseArtifacts.LighthouseRunWarnings[0]).toBeDisplayString(
+      'Error parsing `link` header (Unexpected character "a" at offset 22): `<https://example.com/>a`'
+    );
+  });
 });