catch XMLHttpRequest connection errors

Author: samuelcolvin

.gitignore

@@ -7,3 +7,4 @@ test/e2e/reports
 selenium-debug.log
 .idea
 vanilla
+test-live.html

src/main.js

@@ -32,8 +32,8 @@ const ConfiguredVueRouter = config => new VueRouter({
 module.exports = function (config) {
   config = config || {}
 
-  if (config.root_url === undefined) {
-    config.root_url = process.env.SOCKET_API_URL
+  if (config.api_root === undefined) {
+    config.api_root = process.env.SOCKET_API_URL
   }
 
   if (config.element === undefined) {
@@ -72,7 +72,7 @@ module.exports = function (config) {
       // get_data is called by components, eg. grid
       get_data: function () {
         let xhr = new window.XMLHttpRequest()
-        let url = config.root_url + '/contractors.json'
+        let url = config.api_root + '/contractors.json'
         xhr.open('GET', url)
         xhr.onload = () => {
           let contractors
@@ -91,12 +91,19 @@ module.exports = function (config) {
 ${e.toString()}
 requested url:   "${url}"
 response status: ${xhr.status}
-
 response text:
 ${xhr.responseText}`
             Raven.captureException(new Error(this.error))
           }
         }
+        xhr.onerror = () => {
+          this.error = `\
+Connection error
+requested url:   "${url}"
+response status: ${xhr.status}
+response text: "${xhr.responseText}"`
+          Raven.captureException(new Error(this.error))
+        }
         xhr.send()
       }
     }

test/unit/specs/main.js

@@ -77,9 +77,26 @@ describe('main.vue', () => {
     setTimeout(() => {
       !expect(vm.error).to.not.equal(null)
       expect(vm.error).to.contain('Error: bad response 404')
+      expect(vm.error).to.contain('response status: 404')
       expect(vm.error).to.contain('response text:\nbadness')
+      expect(vm.error).to.not.contain('Connection error')
       done()
     }, 50)
   })
 })
 
+describe('main.vue', () => {
+  it('should show connection error', done => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket({api_root: 'http://localhost:12345678'})
+
+    setTimeout(() => {
+      expect(vm.error).to.contain('Connection error')
+      expect(vm.error).to.contain('response status: 0')
+      done()
+    }, 50)
+  })
+})