delicate-error-reporter

This one displays error unobtrusively. It won't jump on you.

Usage

Feed component with fresh errors.

Specifically designed to work with react-transform-webpack-hmr and react-transform-catch-errors. See example.

May even work with react-hot-loader, but I haven't tested it. Sidenote: All hail to the new king, react-transform-webpack-hmr!

The right way to get things done:

Install the Babel plugin:

npm install --save-dev babel-plugin-react-transform

Then, install the transform:

npm install --save-dev react-transform-catch-errors

Finally, install this one package for rendering errors:

npm install --save-dev delicate-error-reporter

Now edit your .babelrc to include extra.babel-plugin-react-transform.

{
  "stage": 0,
  "plugins": [
    "react-transform"
  ],
  "extra": {
    "react-transform": [{
      "target": "react-transform-catch-errors",
      "imports": ["react", "delicate-error-reporter"]
    }]
  }
}

And that's it.

Programmatic usage

import DelicateErrorReporter from 'delicate-error-reporter';
const e = new Error('Ergh');
 
ReactDOM.render(<DelicateErrorReporter error={ e } />, root);

Apologies

I must say that I borrowed a lot of redbox-react's code. I really feel myself ashamed :(

Thanks

Many thanks goes to @gaearon for his awesome work and many thanks goes to @KeywordBrain for inspiration.

License

MIT, see LICENSE for details.