nicer error message

Author: samuelcolvin

dist.js

@@ -8,7 +8,7 @@ let version = `${process.env.npm_package_version}-${process.env.TRAVIS_COMMIT}`
 if (process.env.TRAVIS_TAG) {
   console.log(`detected TRAVIS_TAG "${process.env.TRAVIS_TAG}", building for release deploy.`)
   if (process.env.TRAVIS_TAG !== process.env.npm_package_version) {
-    throw `travis tag doesn't match npm_package_version: ${process.env.TRAVIS_TAG} vs ${process.env.npm_package_version}`
+    throw `TRAVIS_TAG contradicts npm_package_version: ${process.env.TRAVIS_TAG} vs ${process.env.npm_package_version}`
   }
   prod_build_dir = path.resolve(__dirname, 'dist', process.env.npm_package_version)
   env.PUBLIC_URL = 'https://cdn.tutorcruncher.com/socket/' + process.env.npm_package_version + '/'
@@ -23,6 +23,7 @@ if (process.env.TRAVIS_TAG) {
   env.PUBLIC_URL = 'https://cdn.tutorcruncher.com/socket/dev/'
 } else {
   console.log('no tag, branch or commit detected, assuming on netlify')
+  version = process.env.npm_package_version
   env.PUBLIC_URL = '/'
 }
 console.log(`build directory: "${prod_build_dir}"`)

src/components/shared/Error.js

@@ -2,25 +2,16 @@ import React from 'react'
 
 const Error = ({children}) => (
   <div className="tcs-errors">
-    <h2>Error</h2>
     <p>
       An error occurred with TutorCruncher socket:
     </p>
     <p className="tcs-error-content">{children}</p>
-    <dl>
-      <dt>If you're visiting this site:</dt>
-      <dd>
-        Get in touch with the owners of the site and let them know their TutorCruncher socket plugin isn't working.
-      </dd>
-
-      <dt>If you're developing this site:</dt>
-      <dd>
-        You might get more information from the developer console, if you can't work out what's wrong contact
-        [email protected].
-      </dd>
-    </dl>
+    <p>
+      It's likely that you've configured socket wrongly. You might get more information from the developer console, or
+      <a target="_blank" rel="noopener noreferrer" href="https://help.tutorcruncher.com/tc-socket/">help.tutorcruncher.com/tc-socket/</a>,
+      if you can't work out what's wrong contact [email protected].
+    </p>
   </div>
 )
 
 export default Error
-

src/styles/tools.scss

@@ -39,8 +39,6 @@
 }
 
 .tcs-errors {
-  background-color: $brand-colour;
-  color: white;
   margin: 5px;
   padding: 10px 10px;
   font-size: 13px;
@@ -49,7 +47,7 @@
   }
   .tcs-error-content {
     font-family: monospace;
-    background-color: darken($brand-colour, 5%);
+    background-color: darken(white, 5%);
     padding: 20px 10px;
     white-space: pre-wrap;
     word-wrap: break-word;

src/tests/index.test.js

@@ -22,7 +22,7 @@ it('converts contractor filter', () => {
   div.setAttribute('id', 'socket')
   document.body.appendChild(div)
   const r = window.socket('good', {
-    // router_mode: 'history',
+    router_mode: 'history',
     mode: 'grid',
     labels_include: ['foobar'],
     labels_exclude: ['spam'],
@@ -33,5 +33,4 @@ it('converts contractor filter', () => {
     'label': ['foobar'],
     'label_exclude': ['spam'],
   })
-  // console.log(pretty_html(div.innerHTML))
 })

src/tests/utils.js

@@ -39,7 +39,7 @@ const RESPONSES = {
   })
 }
 
-export function MockXMLHttpRequest () {
+function MockXMLHttpRequest () {
   let _method, _url
   const _headers = {}
   this.open = function (method, url) {

src/utils.js

@@ -98,8 +98,8 @@ function request (app, path, send_data, method, expected_statuses) {
     const xhr = new XMLHttpRequest()
     const on_error = msg => {
       console.error('request error', msg, url, xhr)
-      reject(msg)
       app.setState({error: msg})
+      reject(msg)
     }
     xhr.open(method, url)
     xhr.setRequestHeader('Accept', 'application/json')
@@ -116,10 +116,10 @@ function request (app, path, send_data, method, expected_statuses) {
           })
         }
       } else {
-        on_error(`wrong response code ${xhr.status}`)
+        on_error(`wrong response code ${xhr.status}, Response: ${xhr.responseText.substr(0, 500)}`)
       }
     }
-    xhr.onerror = () => on_error(`${xhr.statusText}: ${xhr.status}`)
+    xhr.onerror = () => on_error(`Error requesting data ${xhr.statusText}: ${xhr.status}`)
     xhr.send(send_data)
   })
 }