react-component-errors

This is a little utility that wraps you're ES6 (or even ES5) React Component's lifecycle methods with a try/catch and is useful in development because it exposes errors thrown that are swallowed by React by default. Now you can more easily diagnose errors

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-component-errors
5100.0.67 years ago7 years agoMinified + gzip package size for react-component-errors in KB

Readme

What is it?
This is a little utility that wraps you're ES6 (or even ES5) React Component's lifecycle methods with a try/catch and is useful in development because it exposes errors thrown that are swallowed by React by default. Now you can more easily diagnose errors during development. NOTE: It's not likely a good idea to run with this enabled in production as it could affect performance of your React components.

More details

You can follow this GitHub Issue for more details. Thanks to inspiration from skiano/react-safe-render.
Usage with an es7 @decorator
``` import wrapReactLifecycleMethodsWithTryCatch from 'react-component-errors' @wrapReactLifecycleMethodsWithTryCatch class MyComponent extends React.Component { componentDidMount(){
throw new Error("Test error");
} render(){
return <div>Hello</div>;
} } ```
Usage without a decorator
``` import wrapReactLifecycleMethodsWithTryCatch from 'react-component-errors' class MyComponent extends React.Component { componentDidMount(){
throw new Error("Test error");
} render(){
return <div>Hello</div>;
} } wrapReactLifecycleMethodsWithTryCatch(MyComponent); ```
Config
``` import {config} from 'react-component-errors' ``` config.enabled: default is true you can set to false to disable wrapping components with try/catch config.errorHandler: default will console.error a helpful error message. See example below to override and customize errorHandler.
Override errorHandler using config
You can see the below running in a plnkr where we give the helper our own errorHandler which uses Toastr to display error messages. ``` 'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import toastr from 'toastr'; import wrapReactLifecycleMethodsWithTryCatch, {config} from 'npm:react-component-errors'; config.errorHandler = (errorReport) => {
console.error(`Error in ${errorReport.component}.${errorReport.method}(${(errorReport.arguments ? '...' : '')}): ${errorReport.error}`, errorReport);
toastr.error(`Error in ${errorReport.component}.${errorReport.method}(${(errorReport.arguments ? '...' : '')}): ${errorReport.error}`);
}; @wrapReactLifecycleMethodsWithTryCatch class MyComponent extends React.Component { componentWillMount(){
throw new Error("Test error");
} render(){
return <div>{this.state.message}</div>;
} } ReactDOM.render(, document.getElementById('main')); ```