feat: show build error (#45)

app/app.vue

@@ -17,11 +17,22 @@
         <h3>Loading...</h3>
       </transition>
     </div>
-    <div v-else-if="hasErrors">
+    <div v-else-if="hasErrors && !errorDescription">
       <h3 class="hasErrors">
         An error occured, please look at Nuxt.js terminal.
       </h3>
     </div>
+    <div v-else-if="hasErrors && errorDescription">
+      <h3 class="hasErrors">
+        An error occured, please see below or look at Nuxt.js terminal for more info.
+
+      </h3>
+      <div class="errorStack">
+        <p class="hasErrors">{{ errorDescription }}</p>
+        <p class="pre" v-if="errorStack">{{ errorStack }}</p>
+      </div>
+      <p><span class="hasErrors">Note:</span> A manual restart of the Nuxt.js dev server may be required</p>
+    </div>
     <div v-else-if="preventReload" class="reload_prevented">
       <h3 class="hasErrors">Failed to show Nuxt.js app after {{ maxReloadCount }} reloads</h3>
       <p>
@@ -68,6 +79,8 @@ export default {
 
   data() {
     return {
+      error: false,
+      stack: false,
       allDone: false,
       hasErrors: false,
       isFinished: false,
@@ -144,20 +157,31 @@ export default {
     },
 
     onData(data) {
-      if (!data || !data.states || this._reloading) {
+      if (!data || this._reloading) {
         return
       }
 
-      // Update active bundles
-      this.bundles = data.states.map(state => state.name.toLowerCase())
+      const { error, states, hasErrors, allDone } = data
+
+      if (error) {
+        const { description, stack } = error
+
+        this.errorDescription = description
+        this.errorStack = stack
+        this.hasErrors = true
+        return
+      }
 
       // Ignore if no bundle is active
-      if (!this.bundles.length) {
+      if (!states || !states.length) {
         return
       }
 
+      // Update active bundles
+      this.bundles = states.map(state => state.name.toLowerCase())
+
       // Update bundle states
-      for (const state of data.states) {
+      for (const state of states) {
         const bundle = state.name.toLowerCase()
         if (!this.states[bundle]) {
           this.states[bundle] = {}
@@ -167,13 +191,13 @@ export default {
       }
 
       // Try to show nuxt app if allDone and no errors
-      if (!data.hasErrors && data.allDone && !this.allDone) {
+      if (!hasErrors && allDone && !this.allDone) {
         this.reload()
       }
 
       // Update state
-      this.allDone = data.allDone
-      this.hasErrors = data.hasErrors
+      this.allDone = allDone
+      this.hasErrors = hasErrors
     },
 
     canReload() {

app/css/loading.css

@@ -40,14 +40,28 @@ h3 {
   font-weight: 500;
   font-size: 18px;
   color: #383838;
-  margin-bottom: 10px;
+  margin: 1em 0;
   letter-spacing: 1px;
 }
 
-h3.hasErrors {
+.hasErrors {
   color: #D0021B;
 }
 
+.errorStack {
+  padding: 1.5em;
+  border: 1px solid #108775;
+  border-radius: 1em;
+  background-color: #eee;
+  margin: 1em 0;
+}
+
+p.pre {
+  margin-top: 1em;
+  line-height: 1.2em;
+  white-space: pre;
+}
+
 h4 {
   margin-bottom: 30px;
   font-size: 15px;

app/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
 import App from './app.vue'
 
+// Vue.config.devtools = true
 window._nuxtLoadingScreen = new Vue(App)

lib/loading.js

@@ -4,6 +4,7 @@ const serveStatic = require('serve-static')
 const fs = require('fs-extra')
 const { json, end, header } = require('node-res')
 
+const { parseStack } = require('./utils/error')
 const SSE = require('./sse')
 
 class LoadingUI {
@@ -43,19 +44,40 @@ class LoadingUI {
 
   get state () {
     return {
+      error: this.error,
       states: this.states,
       allDone: this.allDone,
       hasErrors: this.hasErrors
     }
   }
 
   setStates (states) {
+    this.clearError()
     this.states = states
     this.allDone = this.states.every(state => state.progress === 0 || state.progress === 100)
     this.hasErrors = this.states.some(state => state.hasErrors === true)
     this.broadcastState()
   }
 
+  setError (error) {
+    this.clearStates(true)
+    this.error = {
+      description: error.toString(),
+      stack: parseStack(error.stack).join('\n')
+    }
+    this.broadcastState()
+  }
+
+  clearError () {
+    this.error = undefined
+  }
+
+  clearStates (hasErrors) {
+    this.status = []
+    this.allDone = false
+    this.hasErrors = !!hasErrors
+  }
+
   broadcastState () {
     const now = new Date()
 

lib/module.js

@@ -17,6 +17,10 @@ module.exports = async function NuxtLoadingScreen () {
     loading.setStates(states)
   })
 
+  this.nuxt.hook('cli:buildError', (error) => {
+    loading.setError(error)
+  })
+
   this.nuxt.hook('server:nuxt:renderLoading', (req, res) => {
     loading.serveIndex(req, res)
   })

lib/utils/error.js

@@ -0,0 +1,17 @@
+import { sep } from 'path'
+
+// copied from https://github.com/nuxt/consola/blob/master/src/utils/error.js
+export function parseStack (stack) {
+  const cwd = process.cwd() + sep
+
+  const lines = stack
+    .split('\n')
+    .splice(1)
+    .map(l => l
+      .trim()
+      .replace('file://', '')
+      .replace(cwd, '')
+    )
+
+  return lines
+}