zertosh/errorify

Browserify plugin to write failed build error messages to the output file

errorify

A browserify plugin that writes the error message of a failed build to the output file, rendering it in the browser.

Example

watchify index.js -o bundle.js -p errorify

After adding the plugin to your browserify instance, errorify prevents bundle() from emitting error's. All errors are trapped, including: invalid syntax in the source, a missing dependency, a failed transform, etc. When the error message is written to the output file, it is written to the DOM in a <pre> tag (or console.error if we are not in a browser environment).

During development, it might look like this:

Only the bundle() stream is rewritten. If you pass in a callback, it'll get the expected err and body arguments.

errorify is meant to be used with something like watchify. It saves you a trip to the terminal to see why a build failed.

Keep in mind that since errors are no longer emitted, all builds appear "successful". Careful not to deploy broken code.

Note: Only tested with Browserify 9+

Usage

API

var browserify = require('browserify');
var errorify = require('errorify');
var b = browserify({ /*...*/ });
b.plugin(errorify, /* errorify options */);

Options

• replacer (optional) is a function that takes an error as its first argument, and returns a string that will be used as the output bundle.

CLI

After installing errorify as a local devDependency, you can use the --plugin or -p option like so:

watchify index.js -o bundle.js -p errorify

CSS Customization

The added <pre> tag has the class name errorify, so you can customize errors in your page like so:

body > .errorify {
  color: red;
  font-family: 'Consolas', monospace;
  padding: 5px 10px;
}

License

MIT.

errorify's Issues

babelify@6

The error is no longer so pretty with babelify@6

babel/babelify#72

I can submit a PR that looks something like this:

  var message;
  if (err.codeFrame) { //[email protected]
    message = [err.message, err.codeFrame].join('\n\n');
  } else { //[email protected] and browserify
    message = err.annotated || err.message;
  }

  //normalize error properties
  err = {
    message: message,
    ...

DOM / CSS

I like the idea of this and would be interested in bringing it into my workflow, but I find Beefy's DOM-based error reporting (using <pre>) to be a bit cleaner and less jarring/disruptive than a modal alert().

There's also more potential for colors, err.stack, etc rather than just a string message.

Are you open to this? Or would you rather it be in another module?

A simple template ends up looking like this: (mostly from Beefy)

function(error) {
  console.error(error)
  var doc = typeof document === 'undefined' ? null : document
  if (!doc)
    return

  if(!doc.body) {
    return doc.addEventListener('DOMContentLoaded', function() {
      output()
    })
  } else
    output()

  function output() {
    var pre = doc.createElement('pre')
    pre.textContent = error
    if (doc.body.children.length)
      doc.body.insertBefore(pre, doc.body.children[0])
    else
      doc.body.appendChild(pre)
  }
}

Error event or something?

Is it possible to emit/catch an error event or something so I can attach a custom callback function to execute in addition to the default console.error (for example trigger a system beep)?

This is my code:

let b = browserify(file, {
    debug: true,
    cache: {},
    packageCache: {}
});

let bundle = () => b.bundle().pipe(fs.createWriteStream(outFile));

b.transform('babelify', {sourceMapsAbsolute: true})
    .transform('brfs')
    .plugin('minifyify', {
        map: `${path.basename(outFile)}.map`,
        output: `${outFile}.map`
    });

bundle();
b.plugin(errorify)
    .plugin(watchify, {poll: true})
    .on('update', bundle)
    .on('log', (msg) => console.log('Bundle %s created. %s', file, msg));

I've tried attaching to .on('error') but it does not get triggered.

incompatible with [email protected]+

errorify works with [email protected]. Using watchify 3.5-3.7, when there is an error, nothing happens at all. No bundle file is created, or if the file already exists, nothing is written to it.