friendly-errors-plugin

friendly-errors-plugin

Friendly-errors-plugin recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience.

It is easy to add types of errors so if you would like to see more errors get handled, please open a PR!

Getting started

Installation

npm install friendly-errors-plugin --save-dev

Basic usage

Simply add FriendlyErrorsPlugin to the plugin section in your Webpack config.

var FriendlyErrorsPlugin = require('friendly-errors-plugin');

var webpackConfig = {
  // ...
  plugins: [
    new FriendlyErrorsPlugin(),
  ],
  // ...
}

Turn off errors

You need to turn off all error logging by setting your webpack config quiet option to true.

app.use(require('webpack-dev-middleware')(compiler, {
  // ...
  logLevel: 'silent',
  // ...
}));

If you use the webpack-dev-server, there is a setting in webpack's devServer options:

// webpack config root
{
  // ...
  devServer: {
    // ...
    quiet: true,
    // ...
  },
  // ...
}

If you use webpack-hot-middleware, that is done by setting the log option to false. You can do something sort of like this, depending upon your setup:

app.use(require('webpack-hot-middleware')(compiler, {
  log: false
}));

Thanks to webpack-dashboard for this piece of info.

Demo

Build success

eslint-loader errors

babel-loader syntax errors

Module not found

Options

You can pass options to the plugin:

new FriendlyErrorsPlugin({
  compilationSuccessInfo: {
    messages: ['You application is running here http://localhost:3000'],
    notes: ['Some additional notes to be displayed upon successful compilation']
  },
  onErrors: function (severity, errors) {
    // You can listen to errors transformed and prioritized by the plugin
    // severity can be 'error' or 'warning'
  },
  // should the console be cleared between each compilation?
  // default is true
  clearConsole: true,

  // add formatters and transformers (see below)
  additionalFormatters: [],
  additionalTransformers: []
})

Adding desktop notifications

The plugin has no native support for desktop notifications but it is easy to add them thanks to node-notifier for instance.

var NotifierPlugin = require('friendly-errors-plugin');
var notifier = require('node-notifier');
var ICON = path.join(__dirname, 'icon.png');

new NotifierPlugin({
    onErrors: (severity, errors) => {
      if (severity !== 'error') {
        return;
      }
      const error = errors[0];
      notifier.notify({
        title: "Webpack error",
        message: severity + ': ' + error.name,
        subtitle: error.file || '',
        icon: ICON
      });
    }
  })
]

API

Transformers and formatters

Webpack's errors processing, is done in four phases:

• Extract relevant info from webpack errors. This is done by the plugin here
• Apply transformers to all errors to identify and annotate well know errors and give them a priority
• Get only top priority error or top priority warnings if no errors are thrown
• Apply formatters to all annotated errors

You can add transformers and formatters. Please see transformErrors, and formatErrors in the source code and take a look a the default transformers and the default formatters.

TODO

• Make it compatible with node 4