core(console-messages): use source-location

lighthouse-core/audits/deprecations.js

@@ -13,6 +13,7 @@
 
 const Audit = require('./audit.js');
 const i18n = require('../lib/i18n/i18n.js');
+const ConsoleMessages = require('../gather/gatherers/console-messages.js');
 
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on the use of deprecated APIs. This descriptive title is shown to users when the page does not use deprecated APIs. */
@@ -57,33 +58,16 @@ class Deprecations extends Audit {
     const entries = artifacts.ConsoleMessages;
 
     const deprecations = entries.filter(log => log.source === 'deprecation').map(log => {
-      // HTML deprecations will have no url and no way to attribute to a specific line.
-      /** @type {LH.Audit.Details.SourceLocationValue=} */
-      let source;
-      if (log.url) {
-        // JS deprecations will have a stack trace.
-        // CSS deprecations only expose a line number.
-        const topCallFrame = log.stackTrace && log.stackTrace.callFrames[0];
-        const line = log.lineNumber || 0;
-        const column = topCallFrame ? topCallFrame.columnNumber : 0;
-        source = {
-          type: 'source-location',
-          url: log.url,
-          urlProvider: 'network',
-          line,
-          column,
-        };
-      }
       return {
         value: log.text,
-        source,
+        source: ConsoleMessages.createSourceLocation(log),
       };
     });
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'value', itemType: 'text', text: str_(UIStrings.columnDeprecate)},
-      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
     const details = Audit.makeTableDetails(headings, deprecations);
 

lighthouse-core/audits/dobetterweb/geolocation-on-start.js

@@ -51,8 +51,7 @@ class GeolocationOnStart extends ViolationAudit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnLocation)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
     // TODO(bckenny): there should actually be a ts error here. results[0].stackTrace
     // should violate the results type. Shouldn't be removed from details items regardless.

lighthouse-core/audits/dobetterweb/no-document-write.js

@@ -67,8 +67,7 @@ class NoDocWriteAudit extends ViolationAudit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnLocation)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
     // TODO(bckenny): see TODO in geolocation-on-start
     const details = ViolationAudit.makeTableDetails(headings, results);

lighthouse-core/audits/dobetterweb/notification-on-start.js

@@ -50,8 +50,7 @@ class NotificationOnStart extends ViolationAudit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnLocation)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
     // TODO(bckenny): see TODO in geolocation-on-start
     const details = ViolationAudit.makeTableDetails(headings, results);

lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js

@@ -50,8 +50,7 @@ class PassiveEventsAudit extends ViolationAudit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnLocation)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
     // TODO(bckenny): see TODO in geolocation-on-start
     const details = ViolationAudit.makeTableDetails(headings, results);

lighthouse-core/audits/errors-in-console.js

@@ -13,6 +13,7 @@
 const log = require('lighthouse-logger');
 const Audit = require('./audit.js');
 const i18n = require('../lib/i18n/i18n.js');
+const ConsoleMessages = require('../gather/gatherers/console-messages.js');
 
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on browser errors. This descriptive title is shown to users when no browser errors were logged into the devtools console. */
@@ -48,7 +49,6 @@ class ErrorLogs extends Audit {
     return {};
   }
 
-
   /**
    * @template {{description: string | undefined}} T
    * @param {Array<T>} items
@@ -81,14 +81,15 @@ class ErrorLogs extends Audit {
     /** @type {AuditOptions} */
     const auditOptions = context.options;
 
-    /** @type {Array<{source: string, description: string|undefined, url: string|undefined}>} */
+    /** @type {Array<{source: string, description: string|undefined, sourceLocation: LH.Audit.Details.SourceLocationValue|undefined}>} */
     const consoleRows = artifacts.ConsoleMessages
       .filter(item => item.level === 'error')
       .map(item => {
         return {
           source: item.source,
           description: item.text,
           url: item.url,
+          sourceLocation: ConsoleMessages.createSourceLocation(item),
         };
       });
 
@@ -97,7 +98,7 @@ class ErrorLogs extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'sourceLocation', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
       {key: 'description', itemType: 'code', text: str_(i18n.UIStrings.columnDescription)},
     ];
 

lighthouse-core/audits/no-unload-listeners.js

@@ -47,7 +47,7 @@ class NoUnloadListeners extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
     ];
 
     // Look up scriptId to script URL via the JsUsage artifact.

lighthouse-core/audits/violation-audit.js

@@ -6,26 +6,38 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const ConsoleMessages = require('../gather/gatherers/console-messages.js');
 
 class ViolationAudit extends Audit {
   /**
    * @param {LH.Artifacts} artifacts
    * @param {RegExp} pattern
-   * @return {Array<{label: string, url?: string}>}
+   * @return {Array<{source: LH.Audit.Details.SourceLocationValue}>}
    */
   static getViolationResults(artifacts, pattern) {
+    /**
+     * @template T
+     * @param {T} value
+     * @return {value is Exclude<T, undefined>}
+     */
+    function filterUndefined(value) {
+      return value !== undefined;
+    }
+
     const seen = new Set();
     return artifacts.ConsoleMessages
         .filter(entry => entry.url && entry.source === 'violation' && pattern.test(entry.text))
-        .map(entry => ({label: `line: ${entry.lineNumber}`, url: entry.url}))
-        .filter(entry => {
-          // Filter out duplicate entries by URL/label since they are not differentiable to the user
+        .map(entry => ConsoleMessages.createSourceLocation(entry))
+        .filter(filterUndefined)
+        .filter(source => {
+          // Filter out duplicate entries since they are not differentiable to the user
           // @see https://github.com/GoogleChrome/lighthouse/issues/5218
-          const key = `${entry.url}!${entry.label}`;
+          const key = `${source.url}!${source.line}!${source.column}`;
           if (seen.has(key)) return false;
           seen.add(key);
           return true;
-        });
+        })
+        .map(source => ({source}));
   }
 }
 

lighthouse-core/gather/gatherers/console-messages.js

@@ -31,6 +31,22 @@ function remoteObjectToString(obj) {
 }
 
 class ConsoleMessages extends Gatherer {
+  /**
+   * @param {LH.Artifacts.ConsoleMessage} entry
+   * @return {LH.Audit.Details.SourceLocationValue | undefined}
+   */
+  static createSourceLocation(entry) {
+    if (!entry.url) return;
+
+    return {
+      type: 'source-location',
+      url: entry.url,
+      urlProvider: 'network',
+      line: entry.lineNumber || 0,
+      column: entry.columnNumber || 0,
+    };
+  }
+
   constructor() {
     super();
     /** @type {LH.Artifacts.ConsoleMessage[]} */
@@ -51,13 +67,15 @@ class ConsoleMessages extends Gatherer {
       // Only gather warnings and errors for brevity.
       return;
     }
+
     /** @type {LH.Crdp.Runtime.RemoteObject[]} */
     const args = event.args || [];
     const text = args.map(remoteObjectToString).join(' ');
     if (!text && !event.stackTrace) {
       // No useful information from Chrome. Skip.
       return;
     }
+
     const {url, lineNumber, columnNumber} =
       event.stackTrace && event.stackTrace.callFrames[0] || {};
     /** @type {LH.Artifacts.ConsoleMessage} */
@@ -107,6 +125,11 @@ class ConsoleMessages extends Gatherer {
    */
   onLogEntry(event) {
     const {source, level, text, stackTrace, timestamp, url, lineNumber} = event.entry;
+
+    // JS events have a stack trace, which we use to get the column.
+    // CSS/HTML events only expose a line number.
+    const {columnNumber} = event.entry.stackTrace && event.entry.stackTrace.callFrames[0] || {};
+
     this._logEntries.push({
       eventType: 'protocolLog',
       source,
@@ -116,6 +139,7 @@ class ConsoleMessages extends Gatherer {
       timestamp,
       url,
       lineNumber,
+      columnNumber,
     });
   }
 

types/artifacts.d.ts

@@ -773,9 +773,9 @@ declare global {
         stackTrace?: Crdp.Runtime.StackTrace;
         /** The URL of the log/exception, if known. */
         url?: string;
-        /** Line number in the script (0-based), if known. */
+        /** Line number in the script (0-indexed), if known. */
         lineNumber?: number;
-        /** Column number in the script (0-based), if known. */
+        /** Column number in the script (0-indexed), if known. */
         columnNumber?: number;
       }