Extension: add report issue button (GoogleChrome#944)

* Includes error message, stack trace, chrome and lighthouse versions in issue body
andrewrota · Jan 13, 2017 · 7172fe2 · 7172fe2
1 parent c1101f1
commit 7172fe2
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/lighthouse-extension/app/src/popup.js b/lighthouse-extension/app/src/popup.js
@@ -37,6 +37,33 @@ document.addEventListener('DOMContentLoaded', _ => {
   const optionsList = document.body.querySelector('.options__list');
   const okButton = document.getElementById('ok');
 
+  function getLighthouseVersion() {
+    return chrome.runtime.getManifest().version;
+  }
+
+  function getChromeVersion() {
+    return /Chrome\/([0-9.]+)/.exec(navigator.userAgent)[1];
+  }
+
+  function buildReportErrorLink(err) {
+    const reportErrorEl = document.createElement('a');
+    reportErrorEl.className = 'button button--report-error';
+
+    let qsBody = '**Lighthouse Version**: ' + getLighthouseVersion() + '\n';
+    qsBody += '**Chrome Version**: ' + getChromeVersion() + '\n';
+    qsBody += '**Error Message**: ' + err.message + '\n';
+    qsBody += '**Stack Trace**:\n ```' + err.stack + '```';
+
+    const base = 'https://github.com/googlechrome/lighthouse/issues/new?';
+    const title = encodeURI('title=Lighthouse Extension Error');
+    const body = '&body=' + encodeURI(qsBody);
+
+    reportErrorEl.href = base + title + body;
+    reportErrorEl.textContent = 'Report Error';
+    reportErrorEl.target = '_blank';
+    return reportErrorEl;
+  }
+
   let spinnerAnimation;
 
   function startSpinner() {
@@ -132,16 +159,26 @@ document.addEventListener('DOMContentLoaded', _ => {
     })
     .catch(err => {
       let message = err.message;
-      if (message.toLowerCase().startsWith('another debugger')) {
+
+      const debuggerExists = message.toLowerCase().startsWith('another debugger');
+      const multipleTabs = message.toLowerCase().includes('multiple tabs');
+
+      if (debuggerExists) {
         message = 'You probably have DevTools open.' +
           ' Close DevTools to use lighthouse';
       }
-      if (message.toLowerCase().includes('multiple tabs')) {
+      if (multipleTabs) {
         message = 'You probably have multiple tabs open to the same origin.' +
           ' Close the other tabs to use lighthouse.';
       }
 
       feedbackEl.textContent = message;
+
+      if (!multipleTabs && !debuggerExists) {
+        feedbackEl.className = 'feedback-error';
+        feedbackEl.appendChild(buildReportErrorLink(err));
+      }
+
       stopSpinner();
       background.console.error(err);
     });

diff --git a/lighthouse-extension/app/styles/lighthouse.css b/lighthouse-extension/app/styles/lighthouse.css
@@ -143,6 +143,16 @@ body {
   margin: 0 auto;
 }
 
+.button--report-error {
+  background: rgba(239, 83, 80, 0.81);
+  text-decoration: none;
+  padding: 3px 5px;
+  font-size: .8em;
+  text-align: center;
+  display: inline;
+  margin-left: 5px;
+}
+
 .subpage {
   position: fixed;
   top: 0;
@@ -192,6 +202,16 @@ body {
   line-height: 1.45;
 }
 
+.feedback-error {
+  background: #49525F;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  width: 180px;
+  line-height: 1.45;
+  font-size: .9em;
+}
+
 /* 1. scrollbar when extension is too small */
 .options {
   overflow: auto; /* [1] */