Merge pull request #392 from beakerbrowser/enhanced-error-page

Enhanced error page
beakerbrowser · Apr 10, 2017 · cb62376 · cb62376
2 parents f050ca9 + 5448c24
commit cb62376
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 12 deletions.
diff --git a/app/lib/error-page.js b/app/lib/error-page.js
@@ -53,8 +53,6 @@ body {
 .btn.primary {
   -webkit-font-smoothing: antialiased;
   font-weight: 800;
-}
-.btn.primary {
   background: #007aff;
   color: #fff;
   border: none;
@@ -69,14 +67,15 @@ a.btn span {
 div.error-page-content {
   max-width: 550px;
   margin: auto;
-  margin-top: 35vh;
+  margin-top: 30vh;
 }
-div.error-page-content p {
+div.error-page-content .description {
   font-size: 14px;
-  margin: 20px 0;
-}
-div.error-page-content p .error {
   color: #707070;
+
+  p {
+    margin: 20px 0;
+  }
 }
 div.error-page-content i {
   margin-right: 5px;
@@ -92,16 +91,63 @@ h1 {
   padding-bottom: 10px;
   border-bottom: 1px solid #d9d9d9;
 }
+.icon {
+  float: right;
+}
+.icon.warning {
+  color: #e60b00;
+}
 `
 
-export default function (err) {
+export default function (e) {
+  var title = 'This site can’t be reached'
+  var info = ''
+  var icon = 'fa-info-circle'
+  var button = '<a class="btn" href="javascript:window.location.reload()">Try again</a>'
+  var errorDescription
+
+  if (typeof e === 'object') {
+    errorDescription = e.errorDescription
+    // remove trailing slash
+    var origin = e.validatedURL.slice(0, e.validatedURL.length - 1)
+
+    // strip protocol
+    if (origin.startsWith('https://')) {
+      origin = origin.slice(8)
+    } else if (origin.startsWith('http://')) {
+      origin = origin.slice(7)
+    }
+
+    switch (e.errorCode) {
+      case -106:
+        title = 'No internet connection'
+        info = '<p>Your computer is not connected to the internet.</p><p>Try:</p><ul><li>Resetting your Wi-Fi connection<li>Checking your router and modem.</li></ul>'
+        break
+      case -105:
+        info = `<p>Couldn’t resolve the DNS address for <strong>${origin}</strong></p>`
+        break
+      case -501:
+        title = 'Your connection is not secure'
+        info = `<p>Beaker cannot establish a secure connection to the server for <strong>${origin}</strong>.</p>`
+        icon = 'fa-warning warning'
+        button = '<a class="btn" href="javascript:window.history.back()">Go back</a>'
+        break
+    }
+  } else {
+    errorDescription = e
+  }
+
   return `
     <body>
       <style>${errorPageCSS}</style>
+      <link rel="stylesheet" href="beaker://assets/font-awesome.css">
       <div class="error-page-content">
-        <h1>This site can’t be reached</h1>
-        <p class="error">${err}</p>
-        <a class="btn primary" href="javascript:window.location.reload()">Try again</a>
+        <h1>${title} <i class="icon fa ${icon}"></i></h1>
+        <div class="description">
+          ${info}
+          <p>${errorDescription}</p>
+        </div>
+        ${button}
       </div>
     </body>`.replace(/\n/g,'')
 }
diff --git a/app/shell-window/pages.js b/app/shell-window/pages.js
@@ -745,7 +745,7 @@ function onDidFailLoad (e) {
     }
 
     // render failure page
-    var errorPageHTML = errorPage(e.errorDescription)
+    var errorPageHTML = errorPage(e)
     page.webviewEl.getWebContents().executeJavaScript('document.documentElement.innerHTML = \''+errorPageHTML+'\'')
   }
 }