Updated notebooklab library

app/assets/javascripts/blob/notebook_viewer.js

@@ -5,11 +5,7 @@ import NotebookLab from 'vendor/notebooklab';
 Vue.use(VueResource);
 Vue.use(NotebookLab);
 
-Vue.config.errorHandler = (err) => {
-  console.log(err);
-}
-
-$(() => {
+document.addEventListener('DOMContentLoaded', () => {
   const el = document.getElementById('js-notebook-viewer');
 
   new Vue({
@@ -17,21 +13,53 @@ $(() => {
     data() {
       return {
         error: false,
+        loadError: false,
         loading: true,
         json: {},
       };
     },
     template: `
-      <div class="container-fluid">
-        <i
-          class="fa fa-spinner fa-spin"
-          v-if="loading">
-        </i>
+      <div class="container-fluid md prepend-top-default append-bottom-default">
+        <div
+          class="text-center loading"
+          v-if="loading && !error">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="iPython notebook loading">
+          </i>
+        </div>
         <notebook-lab
-          v-if="!loading"
+          v-if="!loading && !error"
           :notebook="json" />
+        <p
+          class="text-center"
+          v-if="error">
+          <span v-if="loadError">
+            An error occured whilst loading the file. Please try again later.
+          </span>
+          <span v-else>
+            An error occured whilst parsing the file.
+          </span>
+        </p>
       </div>
     `,
+    methods: {
+      loadFile() {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          })
+          .catch((e) => {
+            if (e.status) {
+              this.loadError = true;
+            }
+
+            this.error = true;
+          });
+      },
+    },
     mounted() {
       $('<link>', {
         rel: 'stylesheet',
@@ -40,11 +68,7 @@ $(() => {
       }).appendTo('head');
 
       $.getScript(gon.katex_js_url, () => {
-        this.$http.get(el.dataset.endpoint)
-          .then((res) => {
-            this.json = res.json();
-            this.loading = false;
-          });
+        this.loadFile();
       });
     },
   });