Catching Browserify parse error (standalone option)

Question

I'm using gulp + browserify to build and package my javascript library. Now there is one thing that bothers me: I'm running a simple server with livereload for development via gulp. This works fine, but whenever my javascript contains a syntax error, browserify throws an error causing the server to stop.

The browserify code I use (note that I've added an error handler):

browserify("./src/main.js")
   .bundle({standalone: "SomeName", debug: false}).on('error', notify.onError({
            message: "Error: <%= error.message %>",
            title: "Failed running browserify"
    })
);

Now comes the interesting part: When I remove the standalone setting (and my js is syntacticaly incorrect), the error handler fires. However, when I use this standalone setting, the error handler does not fire (resulting in the server launched by gulp stopping)

Does anybody know how to deal with this issue? I could always manually validate my js files in gulp, but would like to avoid this workaround

Answer 1

The on('error') event is still fired. However, browserify stream is a bit different from other Gulp stream. In the error handler function of browserify, you need to explicitly call this.emit("end")

An example gulp task

var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  // create new bundle
  var b = browserify();
  // add transform if you want
  b.transform(reactify);
  // add file to browserify
  b.add("./src/main.js");
  // start bundling
  return b.bundle()
    .on('error', function(err){
      // print the error (can replace with gulp-util)
      console.log(err.message);
      // end this stream
      this.emit('end');
    })
    .pipe(source('main.js'))
    // pipe other plugin here if you want
    .pipe(gulp.dest('./dist'));
});

the error function handler prevents gulp from crashing, this.emit("end") stops the current stream, not let it run to the next pipes. The event handler can also catch error in the transform plugin.

For more information, you can read here http://truongtx.me/2014/07/15/handle-errors-while-using-gulp-watch/

Answer 2

As nobody posted an answer (feel free to correct me if you've got a better solution!), here is the workaround I've added to get my use-case to work. I've understood the planned Gulp version (v4) will have better support for error handling, possibly solving this issue. However, for now I use the js validator

var jsValidate = require('gulp-jsvalidate');
var notify = require("gulp-notify");
gulp.task('browserify', function() {
    gulp.src("./src/*.js").pipe(jsValidate()).on('error', notify.onError({
            message: "Error: <%= error.message %>",
            title: "Failed running browserify"
        })).on('finish', function(){
            browserify("./src/main.js")
            .bundle({standalone: "SomeName", debug: true}).on('error', notify.onError({
                message: "Error: <%= error.message %>",
                title: "Failed running browserify"
              }))
        .pipe(source('output.js'))
    });
});

Answer 3

After searching for a solution which doesn't crash gulp and continues watching/livereload even if browserify transforms crash, I finally found one. I wrote a small blog post about it:

http://latviancoder.com/story/error-handling-browserify-gulp

Answer 4

Here is the code that prevents gulp task from crashing in case of bundling errors. It's a slightly modified version of the code that @tmtxt has posted. The problem that I had with his version was that 'gulp.watch' stopped updating after the first failure occurs.

var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");

gulp.task('browserify', function () {
    browserify(paths.src.client.app)
    .bundle()
    .on('error', function(err){
        console.log(err.message);
    })
    .pipe(source(paths.dest.client.bundle))
    .pipe(gulp.dest(paths.dest.client.scripts));
});

gulp.task('watch-browserify', function () {
    gulp.watch([paths.src.client.scripts], ['browserify'])
});

Answer 5

Well, Because I could not find any solutions that will continue to watch gulp file with browserify, I resolve to this

var exec = require('child_process').exec;
var fs = require('fs');
//watching changes from watchFile command
fs.watchFile('prim.js',[ { interval: 100 }] , function (curr, prev) {
//running cli command on change
  exec('powershell.exe -Command "browserify prim.js -o main.js"', function(err, stdout, stderr) {
    console.log(stdout);
  })
  .stdin.end();
});

Just add a helper.js (name it as you wish) file in your current folder, set paths, and run that file in node from CLI. You even don't need to install browserify locally if you have it globally. Hope this helps.