You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-error-boundaries

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-error-boundaries

React HOC for error boundaries.

1.1.4
latest
Source
npmnpm
Version published
Weekly downloads
130
-28.18%
Maintainers
1
Weekly downloads
 
Created
Source

react-error-boundaries

version downloads MIT License

A reusable React error boundaries component. Based on React 16.2.0.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Effect picture:

react-error-boundaries

Install

npm install react-error-boundaries

Usage

Import:

// import all
import { ErrorBoundary, withErrorHandler, errorHandlerDecorator, FallbackView } from 'react-error-boundaries'
// import default ErrorBoundary
import ErrorBoundary from 'react-error-boundaries'

Intro:

  • ErrorBoundary: React container component to handler error
  • withErrorHandler: React HOC to customize the errorCallback function and FallbackComponent
  • errorHandlerDecorator: By this, you can use error boundary as ES7 decorator
  • FallbackView: The default fallback component, show when error occur. props: { error: Objec, errorInfo: Object, closeErrorModal: Function }(Unable in production, if import you will got undefined)

Use as a component container:

// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'

const App = () => {
    return (
    <ErrorBoundary>
        <YourComponents />
    </ErrorBoundary>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

And you can handle errors by providing an onError callback, and customize the FallbackComponent by providing a Component.

FallbackComponent will receive props:

  • closeErrorModal: Function, call when click close button
  • error: An error that has been thrown.
  • errorInfo: An object with componentStack key. The property has information about component stack during thrown error.
// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'

function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.error('onError:', error.message);
}

const App = () => {
    return (
    <ErrorBoundary onError={onError} FallbackComponent={YourFallbackView}>
        <YourComponents />
    </ErrorBoundary>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

Use as class decorator:

// import first
import React from 'react'
import { errorHandlerDecorator } from 'react-error-boundaries'

// ES7 decorator, need babel plugin "transform-decorators-legacy"
@errorHandlerDecorator
class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        contents
      </div>
    );
  }
}
// or not use @decorator just like this:
// export default errorHandlerDecorator(YourComponent)

function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.log('onError:', error.message);
}

ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));

You can also customize the FallbackComponent in HOC way:

// import first, FallbackView is default Fallback Component
import { withErrorHandler, FallbackView } from 'react-error-boundaries'

// customize the errorCallback
function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.error('onError:', error.message);
}

/* example 1 */

const ComponentWithErrorBoundary = withErrorHandler(
  YourFallbackComponent, // Fallback Component to display errors, to replace default FallbackView
  YourComponent          // Component to decorate
);
ReactDOM.render(<ComponentWithErrorBoundary onError={onError} />, document.getElementById('root'));

/* example 2 */
// customize as a ES7 decorator
const yourErrorHandlerDecorator = withErrorHandler(
  YourFallbackComponent // Fallback Component to display errors, to replace default FallbackView
);

@yourErrorHandlerDecorator
class YourComponent extends React.component {
    //......
}
ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));

Try example

Input i in search input and error will throw.

# run example, auto open browser and enable hot loader
npm install
npm start

How to disable it

To enable it by set process.env.NODE_ENV or process.env.ERROR_ENV as development, so you can disable it by setting process.env.NODE_ENV to be production and not set process.env.ERROR_ENV as development.

With webpack by setting like this to disable it:

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: '"production"'
    }
  })
]

With config like this to enable it even in NODE_ENV is production:

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: '"production"',
      ERROR_ENV: '"development"'
    }
  })
]

License

MIT

Keywords

react

FAQs

Package last updated on 11 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts