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.

0.1.3
Source
npmnpm
Version published
Weekly downloads
140
44.33%
Maintainers
1
Weekly downloads
 
Created
Source

react-error-boundaries

A reusable React error boundaries component.

version downloads MIT License

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.

react-error-boundaries

Base on React 16.2.0, babel required:

{
    "presets": [
        "stage-3",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

Usage

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'));

Use as class decorator:

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

@errorHandlerDecorator
export default class FilterableProductTable extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        contents
      </div>
    );
  }
}

Define your errorCallback function and FallbackComponent:

// import first
import { withErrorHandler } from 'react-error-boundaries'

const yourErrorHandler = withErrorHandler(
  errorCallback,    // report Error to service
  FallbackComponent // Component to display errors
)

Try example

Input 'i' in search input and error will throw.

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

License

MIT

Keywords

react

FAQs

Package last updated on 21 Dec 2017

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