gulp-notify: Making notifications, error logging, and watchers play nicely

I’ve been banging my head to get gulp-notify, gulp-plumber, and gulp-sass working for a few hours. The build works fine, but I’m struggling to get error notifications to play nice. What I want is:

OS notification that an error occurred
Error reported in the console
Watch task does not stop

It feels like none of the modules want this to happen.

First Attempt

I tried these .onError commands directly in the task stream, but that stops the watcher:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass())

    // First try
    .on('error', function () {
        notify({
            title: 'Gulp: CSS',
            message: 'Error'
        })
    })

    // Second try
    .on('error', notify.onError({
        title: 'Gulp: CSS',
        message: 'Error'
    }))

    // Third try
    .on('error', function (err) {
        return notify().write({
            title: 'Gulp: CSS',
            message: 'Error'
        });
    })
});

Note: I found all these different syntaxes in gulpfiles from others, but with no real explanations of why they should be used.

Second Attempt

Then I tried using gulp-sass callback for onError:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass({
        errLogToConsole: false,
        onError: notify.onError({
            title: 'Gulp: CSS',
            message: 'Error'
        })
    }))
});

But setting errLogToConsole: false means you can’t see the error. Changing to true means the watcher stops.

Third Attempt

Then I tried I’m using gulp-plumber so the watcher doesn’t stop.

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(plumber({
        errorHandler: reportError
    }))
    .pipe(sass())
    .on('error', reportError)
});

With the error handling function:

function reportError (error) {
    notify().write({
        title: 'Gulp: CSS',
        message: 'Error'
    });

    console.log(error.toString());
}

This sort of works, but notify.write() ignores the title property passed in. I couldn’t find any docs for this.

The watcher breaks but doesn’t stop. Correcting the CSS error and saving has no effect.

Even if that did work, the error handler would be hardcoded for the CSS task. I’m trying to re-use this for JS too.

Fourth Attempt

Then I tried to rewrite the second attempt to be self-contained and not rely on gulp-plumber with an anonymous function for error reporting + notification:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(sass({
        errLogToConsole: false,
        onError: function (err) {
            console.log(err);        
            notify().write({
                title: 'Gulp: CSS',
                message: 'Error'
            });
        }
    }))
});

This technically does all three things I want:

OS notification that an error occurred (but not nicely formatted)
Error reported in the console
Watch task does not to stop (and stays functional)

But it means I need another workaround for JS (or other tasks that may need error handling).

What am I missing here?

There has to be a better way.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

Okay, did a bunch of reading and think I have this sorted out. Here’s the list:

My simple error handler

Using this.emit('end') was the proper solution. I was actually close with attempt 3 and have expanded that as follows:

gulp.task('css', function () {
    return gulp.src('scss/**/*.scss')
    .pipe(plumber({
        errorHandler: reportError
    }))
    .pipe(sass())
    .on('error', reportError)
});

And the corrected error handler:

var reportError = function (error) {
    notify({
        title: 'Gulp Task Error',
        message: 'Check the console.'
    }).write(error);

    console.log(error.toString());

    this.emit('end');
}

In attempt 3, I was (blissfully ignorant) put notify’s config object into the write() function — which doesn’t work. Putting it inside notify() works as expected.

So that got me my three goals:

OS notification that an error occurred (but not nicely formatted)
Error reported in the console
Watch task does not to stop (and stays functional)

Stumbling over `notify().write()`

I have no idea what .write() does in Node / steams. I couldn’t find any documentation or issues mentioning it. But I figured out three things.

If you pass nothing write() the notification doesn’t happen on my Mac.
If you pass an empty string '' the notification shows a grey Gulp icon.
If you pass the error object (as I am) the notification shows a red Gulp icon. Presumably for errors. I like that.

My advanced error handler

After getting this working, I went back and made another list of enhancements. I was able to solve these:

Improve the error reporting in the console with more readable formatting.
Improve the notification to mention the task that failed + line number. Normally it will be the last file I saved that broke (Sass compiling) so this means I don’t need to check the console.
Play a sound on errors so two senses can detect a failed task.

Here’s what I ended up with. Make sure you install the gulp-util module.

var reportError = function (error) {
    var lineNumber = (error.lineNumber) ? 'LINE ' + error.lineNumber + ' -- ' : '';

    notify({
        title: 'Task Failed [' + error.plugin + ']',
        message: lineNumber + 'See console.',
        sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
    }).write(error);

    gutil.beep(); // Beep 'sosumi' again

    // Inspect the error object
    //console.log(error);

    // Easy error reporting
    //console.log(error.toString());

    // Pretty error reporting
    var report = '';
    var chalk = gutil.colors.white.bgRed;

    report += chalk('TASK:') + ' [' + error.plugin + ']\n';
    report += chalk('PROB:') + ' ' + error.message + '\n';
    if (error.lineNumber) { report += chalk('LINE:') + ' ' + error.lineNumber + '\n'; }
    if (error.fileName)   { report += chalk('FILE:') + ' ' + error.fileName + '\n'; }
    console.error(report);

    // Prevent the 'watch' task from stopping
    this.emit('end');
}

The console output and notification look like this. I’m pretty happy with it now, but it took close to six hours to work all this out.

screen shot 2015-05-08 at 11 54 49 pm

screen shot 2015-05-08 at 11 55 06 pm

+16

brendanfalkowski on May 9, 2015

@a-zhunusbekov — One of the packages changed the contents of the error object, and it broke a while back for me too. Currently I have these packages installed to support my error handler:

"gulp":              "3.9.1",
"gulp-if":           "2.0.2",
"gulp-notify":       "2.2.0",
"gulp-plumber":      "1.1.0",
"gulp-util":         "3.0.7",
"minimist":          "1.2.0"

And the revised handler code looks like this:

var reportError = function (error) {
    // [log]
    //console.log(error);

    // Format and ouput the whole error object
    //console.log(error.toString());


    // ----------------------------------------------
    // Pretty error reporting

    var report = '\n';
    var chalk = gutil.colors.white.bgRed;

    if (error.plugin) {
        report += chalk('PLUGIN:') + ' [' + error.plugin + ']\n';
    }

    if (error.message) {
        report += chalk('ERROR:\040') + ' ' + error.message + '\n';
    }

    console.error(report);


    // ----------------------------------------------
    // Notification

    if (error.line && error.column) {
        var notifyMessage = 'LINE ' + error.line + ':' + error.column + ' -- ';
    } else {
        var notifyMessage = '';
    }

    notify({
        title: 'FAIL: ' + error.plugin,
        message: notifyMessage + 'See console.',
        sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
    }).write(error);

    gutil.beep(); // System beep (backup)


    // ----------------------------------------------
    // Prevent the 'watch' task from stopping

    this.emit('end');
}

Hope that helps. Maybe I’ll get to putting this up in a nice repo over the holidays 😃

brendanfalkowski on Dec 22, 2016

@veremey — That’s still it (above). It gets used like this:

gulp.task('css', function () {
    return gulp.src(config.tasks.css.src)
        .pipe(sourcemaps.init())
        .pipe(plumber({
            errorHandler: reportError
        }))
        .pipe(sass(config.tasks.css.sassOptions))
        .pipe(autoprefixer(config.tasks.css.autoprefixerOptions))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tasks.css.dest))
        .pipe(gulpif(!isProduction, notify({
            title: 'CSS',
            message: '<%= file.relative %>',
            onLast: true
        })));
});

brendanfalkowski on Aug 7, 2017