How handle watchify errors in gulp. Watchify prevent error from being reported

Question

When I include watchify plugin in a browserify bundler and there is an compile time error, the error is not logged.

const gulp        = require('gulp');
const browserify  = require('browserify');            //js bundler
const watchify    = require('watchify');              //allows incremental bundling
const hbsfy       = require('hbsfy');                 //precompiles hbs files
const babelify    = require('babelify');              //ES2015 to ES5
const source      = require('vinyl-source-stream');   //Gulp and NodeJS stream interop. Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream ecosystem.
const buffer      = require('vinyl-buffer');          //Convert streaming vinyl files to use buffers. Usually used with vinyl-source-stream and gulp-sourcemaps
const uglify      = require('gulp-uglify');           //uglifyjs (js minimalizer) plugin for gulp (would be nice to use uglyfyjs directly)
const sourcemaps  = require('gulp-sourcemaps');       //generate source maps when tranforming js or css 
const gutil       = require('gulp-util');             //utlis for gulp, e.g. console logging

gulp.task("watch-js", function(done){
    var b = browserify({
        entries: 'main.js',
        debug: true,
        cache: {},
        packageCache: {},
      });
    b.external(config.vendorJsLibs);
    b.transform(hbsfy);
    b.transform(babelify, { presets: ['es2015'] });

    b.plugin(watchify); //when I comment this, errors are reported
    b.on('error', function(err){
       gutil.log(err.toString());
       this.emit('end');
       done();
    });
    compileJs(b, 'app.js');
    b.on('update', function(evt){
        gutil.log('watchify update '+ evt);
        compileJs(b, 'app.js');
    });    
});     

function compileJs(bundler, bundleFileName){
    return bundler.bundle()
        .pipe(source(bundleFileName))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
            // Add transformation tasks to the pipeline here.
            .pipe(uglify())
            .on('error', function(error){
                gutil.log(error);
                this.emit('end');
            })
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(dest + '/scripts'));
}

Answer 1

You don't have any error handlers on your bundle, that's why node crashes and prints a stack trace. This is a safety mechanism that ensures error events are either handled or execution is aborted.

Watchify listens to error events on bundler for internal logic. This satisfies nodes error handling requirement.

In your code you should listen for error events on the stream returned by b.bundle(). The following code should do the trick:

function compileJs(bundler, bundleFileName){
    return bundler.bundle()
        .on('error', gutil.log)
        ...
}