Friendly errors webpack plugin

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

Getting started

$3

``bash
npm install @d2js/friendly-errors-webpack-plugin --save-dev
`

$3

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

`javascript
var FriendlyErrorsWebpackPlugin = require("@d2js/friendly-errors-webpack-plugin");

var webpackConfig = {
// ...
plugins: [new FriendlyErrorsWebpackPlugin()],
// ...
};
`

$3

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

`javascript
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:

`javascript
// 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:

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

Options

You can pass options to the plugin:

`js
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 'warn'
},
// should the console be cleared between each compilation?
// default is true
clearConsole: true,

// INFO: all logs
// WARNING: warnings and errors
// ERROR: only errors
// SILENT: no log
logLevel: true,

// base: default
// consola: consola adapter
// can also be npm package name or reporter object
reporter: 'consola'

// 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.

`js
var NotifierPlugin = require('@d2js/friendly-errors-webpack-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

$3

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

1. Extract relevant info from webpack errors.
2. Apply transformers to all errors to identify and annotate well know errors and give them a priority
3. Get only top priority error or top priority warnings if no errors are thrown
4. Apply formatters to all annotated errors

You can add transformers and formatters.

$3

Reporter is a class for generating output of errors messages, structure is:

1. Include following levels log methods: success, info, note, warn, error.
1. Include method clearConsole` for clearing the terminal console.