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