Catching Browserify parse error (standalone option)

Laurens Rietveld picture Laurens Rietveld · Apr 18, 2014 · Viewed 14.9k times · Source

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

tmtxt picture tmtxt · Jul 18, 2014

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/