Nodeschool Public Materials
    Have ideas to improve npm?Join in the discussion! »

    @nuxt/friendly-errors-webpack-plugin

    2.5.1 • Public • Published

    Friendly-errors-webpack-plugin

    npm Build Status Build status

    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 @nuxtjs/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, {
      // ...
      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

    success

    eslint-loader errors

    lint

    babel-loader syntax errors

    babel

    Module not found

    babel

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

    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.

    Customize Reporters

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

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

    You can take a look at source code as example base reporter

    Install

    npm i @nuxt/friendly-errors-webpack-plugin

    DownloadsWeekly Downloads

    358,437

    Version

    2.5.1

    License

    MIT

    Unpacked Size

    37.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar