friendly-errors-webpack-plugin

What is friendly-errors-webpack-plugin?

The friendly-errors-webpack-plugin is a Webpack plugin that aims to make Webpack error messages more readable and user-friendly. It cleans up the error messages and provides concise, easy-to-understand output, which can be particularly useful during development.

What are friendly-errors-webpack-plugin's main functionalities?

Basic Setup

This code demonstrates the basic setup of the friendly-errors-webpack-plugin in a Webpack configuration. By including the plugin in the plugins array, it will automatically clean up and format error messages.

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
  // other webpack config options
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
  ],
};

Custom Error Messages

This code shows how to customize the success messages and clear the console using the friendly-errors-webpack-plugin. The `compilationSuccessInfo` option allows you to specify custom messages to display when the compilation is successful.

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
  // other webpack config options
  plugins: [
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['Your application is running here: http://localhost:3000'],
      },
      clearConsole: true,
    }),
  ],
};

Custom Error Formatters

This code demonstrates how to use the `onErrors` option to create custom error formatters. The function provided to `onErrors` will be called with the severity and errors, allowing you to customize how errors are displayed.

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
  // other webpack config options
  plugins: [
    new FriendlyErrorsWebpackPlugin({
      onErrors: function (severity, errors) {
        if (severity !== 'error') {
          return;
        }
        const error = errors[0];
        console.error(error.name);
        console.error(error.message);
      },
    }),
  ],
};

Other packages similar to friendly-errors-webpack-plugin

webpack-notifier

webpack-notifier is a Webpack plugin that uses system notifications to alert developers of build errors and warnings. Unlike friendly-errors-webpack-plugin, which focuses on console output, webpack-notifier provides desktop notifications, making it useful for developers who prefer visual alerts.

webpack-dashboard

webpack-dashboard is a CLI dashboard for Webpack that provides a more visual and interactive way to monitor the build process. It offers a different approach compared to friendly-errors-webpack-plugin by providing a full dashboard interface rather than just cleaning up error messages.

clean-webpack-plugin

clean-webpack-plugin is a Webpack plugin that helps in cleaning up the output directory before each build. While it doesn't directly deal with error messages, it complements friendly-errors-webpack-plugin by ensuring that the build directory is clean, which can help in reducing build errors.

README

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.

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-webpack-plugin --save-dev

Basic usage

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

var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

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

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, {
  quiet: true,
  publicPath: config.output.publicPath,
}));

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 additionnal notes to be displayed unpon 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-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

Transformers and formatters

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

1. Extract relevant info from webpack errors. This is done by the plugin here
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. 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