better error display

Author: samuelcolvin

index.html

@@ -22,6 +22,7 @@
     <main>
       <div id="socket1"></div>
       <div id="socket2"></div>
+      <div id="socket3"></div>
     </main>
   </body>
   <script>
@@ -30,6 +31,10 @@
     })
     socket('f8d88b6562b3434ba4ef', {
       element: '#socket2',
+      mode: 'enquiry',
+    })
+    socket('f8d88b6562b3434ba4ef', {
+      element: '#socket3',
       mode: 'enquiry-modal',
     })
   </script>

src/app.vue

@@ -1,55 +1,14 @@
 <template>
   <div id="tcs-app">
-    <div v-if="$root.error" class="tcs-errors">
-      <h2>Error</h2>
-      <p>
-        An error occurred with TutorCruncher socket:
-      </p>
-      <p class="tcs-error-content">{{ $root.error }}</p>
-      <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>
-      <img src="./assets/error.svg">
-    </div>
-    <div v-else>
-      <router-view></router-view>
-    </div>
+    <error v-if="$root.error"></error>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-export default {}
-</script>
+import error from './components/error.vue'
 
-<style lang="scss" scoped>
-@import './conf';
-.tcs-errors {
-  background-color: $brand-colour;
-  color: white;
-  margin: 10px;
-  padding: 20px 30px;
-  img {
-    width: 100%;
-  }
-  .tcs-error-content {
-    font-family: monospace;
-    background-color: darken($brand-colour, 5%);
-    padding: 20px 10px;
-    white-space: pre-wrap;
-  }
-  dt {
-    margin: 15px 0 5px;
-    font-weight: 500;
-  }
+export default {
+  components: {error}
 }
-</style>
+</script>

src/components/error.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="tcs-errors">
+    <h2>Error</h2>
+    <p>
+      An error occurred with TutorCruncher socket:
+    </p>
+    <p class="tcs-error-content">{{ $root.error }}</p>
+    <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>
+    <img src="../assets/error.svg">
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+@import '../conf';
+.tcs-errors {
+  background-color: $brand-colour;
+  color: white;
+  margin: 10px;
+  padding: 20px 30px;
+  img {
+    width: 100%;
+  }
+  .tcs-error-content {
+    font-family: monospace;
+    background-color: darken($brand-colour, 5%);
+    padding: 20px 10px;
+    white-space: pre-wrap;
+  }
+  dt {
+    margin: 15px 0 5px;
+    font-weight: 500;
+  }
+}
+</style>

src/components/modal.vue

@@ -17,7 +17,8 @@
           </router-link>
         </div>
 
-        <slot>
+        <error v-if="$root.error"></error>
+        <slot v-else>
           Modal content.
         </slot>
 
@@ -29,6 +30,7 @@
 
 <script>
 import footer from './footer.vue'
+import error from './error.vue'
 
 export default {
   methods: {
@@ -37,7 +39,8 @@ export default {
     },
   },
   components: {
-    'tcs-footer': footer
+    'tcs-footer': footer,
+    'error': error,
   },
   props: {
     title: String,

src/main.js

@@ -11,7 +11,13 @@ import con_modal from './components/con-modal'
 import {to_markdown, clean, auto_url_root} from './utils'
 
 let dsn = process.env.NODE_ENV === 'production' && 'https://[email protected]/128441'
-Raven.config(dsn, {release: process.env.RELEASE}).addPlugin(RavenVue, Vue).install()
+let raven_config = {
+  release: process.env.RELEASE,
+  tags: {
+    host: window.location.host,
+  }
+}
+Raven.config(dsn, raven_config).addPlugin(RavenVue, Vue).install()
 
 Vue.use(VueRouter)
 
@@ -126,6 +132,7 @@ module.exports = function (public_key, config) {
       config[k] = STRINGS[k]
     }
   }
+  Raven.setUserContext(config)
 
   return new Vue({
     el: config.element,
@@ -199,7 +206,7 @@ response text:   "${xhr.responseText}"`)
         xhr.open('GET', url)
         xhr.onload = () => {
           if (xhr.status !== 200) {
-            throw new Error(`bad response ${xhr.status} at "${url}"`)
+            this.handle_error(`bad response ${xhr.status} at "${url}"`)
           } else {
             let con = JSON.parse(xhr.responseText)
             Vue.set(this.contractors_extra, link, con)
@@ -217,7 +224,11 @@ response text:   "${xhr.responseText}"`)
         xhr.open('GET', url)
         xhr.onload = () => {
           if (xhr.status !== 200) {
-            throw new Error(`bad response ${xhr.status} at "${url}"`)
+            this.handle_error(`\
+Connection error
+requested url:   "${url}"
+response status: ${xhr.status}
+response text:   "${xhr.responseText}"`)
           } else {
             this.enquiry_form_info = Object.assign({}, this.enquiry_form_info, JSON.parse(xhr.responseText))
           }