Better error handling with messages sent to the client

Author: Guillaume Chau

packages/vue-component-dev-client/client/dev-client.js

@@ -199,6 +199,19 @@ Meteor.startup(function () {
     _deferReload = 3000
   })
 
+  // Message
+  _socket.on('message', function ({ type, message }) {
+    let func
+    if (type === 'error') {
+      func = console.error
+    } else if (type === 'warn') {
+      func = console.warn
+    } else {
+      func = console.log
+    }
+    func(`[HMR] ${message}`)
+  })
+
   // Reg
   const jsImportsReg = /module\.import\((['"])(.+?)\1/g
 })

packages/vue-component/plugin/utils.js

@@ -109,20 +109,27 @@ printSourceMap = function(map) {
   console.log(map)
 }
 
-throwCompileError = function throwCompileError({
-  inputFile,
-  path,
-  action,
-  message,
-  line,
-  column,
-  tag,
-  lang,
-  charIndex,
-  error,
-  showError = false,
-  showStack = false
-}) {
+throwCompileError = function throwCompileError(options) {
+  options = Object.assign({}, {
+    showError: false,
+    showStack: false,
+  }, options)
+
+  const {
+    inputFile,
+    path,
+    action,
+    message,
+    line,
+    column,
+    tag,
+    lang,
+    charIndex,
+    error,
+    showError,
+    showStack,
+  } = options
+
   let output = '[vue-component] Error';
 
   // Action
@@ -135,14 +142,18 @@ throwCompileError = function throwCompileError({
     output += ' in tag <' + tag + '>';
   }
 
+  if(column) {
+    output += ' col:' + column;
+  }
+
   // Lang
   if(lang) {
     output += ' using lang ' + lang;
   }
 
   // Message
   if(message) {
-    if(action) {
+    if(!action) {
       output += ': ';
     } else {
       output += ' ';
@@ -154,13 +165,13 @@ throwCompileError = function throwCompileError({
   let errMsg = `${output}`;
 
   // Error location
-
+  let file
   if(path) {
-    output += ' -> in ' + path;
+    file = path;
   } else if(inputFile) {
-    output += ' -> in ' + getFullPathInApp(inputFile);
+    file = getFullPathInApp(inputFile);
   } else {
-    output += ' (unknown source file)';
+    file = '(unknown source file)';
   }
 
   let lineNumber = line;
@@ -172,27 +183,40 @@ throwCompileError = function throwCompileError({
       lineNumber = lineResult;
     }
   }
-  if(lineNumber) {
-    output += ' at line ' + lineNumber;
+  if (!lineNumber) {
+    lineNumber = 1
   }
 
-  if(column) {
-    output += ' col ' + column;
+  // Native error
+  if(showError) {
+    output += ` ${error.message}`
   }
 
   // Stack
   if(showStack && error && error.stack) {
     ouput += '\n' + error.stack;
   }
 
-  console.error(output);
-
-  // Native error
-  if(showError) {
-    console.error(error);
+  if (isDevelopment()) {
+    global._dev_server.emit('message', {
+      type: 'error',
+      message: `${file}:${lineNumber}  ${output}`,
+    })
   }
 
-  let err = new Error(errMsg);
-  err.line = lineNumber;
+  const err = new TemplatingTools.CompileError();
+  err.message = output
+  err.file = file
+  err.line = lineNumber
   throw err;
 }
+
+getFileContents = (path) => {
+  if (!fs.existsSync(path)) {
+    throw new Error('file-not-found')
+  } else {
+    return fs.readFileSync(path, {
+      encoding: 'utf8',
+    })
+  }
+}

packages/vue-component/plugin/vue-compiler.js

@@ -5,6 +5,7 @@ import async from 'async';
 import { Meteor } from 'meteor/meteor';
 import { EventEmitter } from 'events';
 import _ from 'lodash';
+import 'colors';
 
 let templateCompiler, transpile;
 
@@ -554,11 +555,27 @@ function generateJs (vueId, inputFile, compileResult, isHotReload = false) {
     } else if(vueVersion === 2) {
       const templateCompilationResult = templateCompiler.compile(compileResult.template, {
         id: vueId,
+        warn: (message) => {
+          const msg = `${inputFilePath}: ${message}`
+          console.warn(`   (!) Warning: ${msg}`.yellow)
+          if (isDev) {
+            global._dev_server.emit('message', {
+              type: 'warn',
+              message: msg,
+            })
+          }
+        },
       });
       if(templateCompilationResult.errors && templateCompilationResult.errors.length !== 0) {
-        console.error(templateCompilationResult.errors);
+        console.error(...templateCompilationResult.errors);
         js += `__vue_options__.render = function(){};\n`;
         js += `__vue_options__.staticRenderFns = [];\n`;
+        if (isDev) {
+          global._dev_server.emit('message', {
+            type: 'error',
+            message: templateCompilationResult.errors.map(e => e.toString()).join('\n'),
+          })
+        }
       } else {
         render = toFunction(templateCompilationResult.render)
         staticRenderFns = `[${ templateCompilationResult.staticRenderFns.map(toFunction).join(',')}]`