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
Book a DemoInstallSign in

react-error-boundaries

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-error-boundaries - npm Package Compare versions

Comparing version

0.1.8
to
1.0.8

dist/index.js
dist/index.js.map
webpack.dev.config.js

2

example/package.json

@@ -21,3 +21,3 @@ {

"react-dom": "^16.2.0",
"react-error-boundaries": "^0.1.7"
"react-error-boundaries": "^1.0.3"
},

@@ -24,0 +24,0 @@ "devDependencies": {

7

example/src/FilterableProductTable.jsx
import React from 'react'
import { errorHandlerDecorator } from 'react-error-boundaries'
// import { errorHandlerDecorator } from '../../src/ErrorHandler'

@@ -97,2 +98,6 @@ class ProductCategoryRow extends React.PureComponent {

function onError(error, errorInfo, props) {
console.log('FilterableProductTable.onError:', error, errorInfo, props);
}
@errorHandlerDecorator // 类或者类中的函数才可以使用装饰器

@@ -153,1 +158,3 @@ export default class FilterableProductTable extends React.PureComponent {

export { PRODUCTS };
// or not use @decorator
// export default errorHandlerDecorator(FilterableProductTable)

13

example/src/index.jsx

@@ -5,12 +5,17 @@ import React from 'react'

import FilterableProductTable, { PRODUCTS } from './FilterableProductTable'
// import ErrorBoundary from 'react-error-boundaries'
import ErrorBoundary from 'react-error-boundaries'
// import ErrorBoundary from '../../src/ErrorHandler'
const App = () => {
return (
<div>
<FilterableProductTable products={PRODUCTS} />
</div>
<ErrorBoundary onError={onError}>
<FilterableProductTable onError={onError} products={PRODUCTS} />
</ErrorBoundary>
);
}
function onError(error, errorInfo, props) {
console.log('App.onError:', error, errorInfo, props);
}
ReactDOM.render(<App />, document.getElementById('root'));

28

lib/error-handler-hoc.js

@@ -17,2 +17,4 @@ 'use strict';

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -24,3 +26,3 @@

function withErrorHandler(errorCallback, FallbackComponent, Component) {
function withErrorHandler(FallbackComponent, Component) {
var WithErrorHandler = function (_React$PureComponent) {

@@ -54,3 +56,8 @@ _inherits(WithErrorHandler, _React$PureComponent);

// Report errors
errorCallback(error, info, this.props);
var _props2 = this.props,
onError = _props2.onError,
_props = _objectWithoutProperties(_props2, ['onError']);
this.props.onError && this.props.onError(error, info, _props);
}

@@ -60,3 +67,8 @@ }, {

value: function render() {
var _props3 = this.props,
onError = _props3.onError,
_props = _objectWithoutProperties(_props3, ['onError']);
// if state contains error and in development environment we render fallback component
if (this.state.hasError && process.env.NODE_ENV == 'development') {

@@ -67,3 +79,3 @@ var _state = this.state,

return _react2.default.createElement(FallbackComponent, _extends({}, this.props, {
return _react2.default.createElement(FallbackComponent, _extends({}, _props, {
closeErrorModal: this.closeErrorModal,

@@ -74,3 +86,3 @@ error: error,

}
return _react2.default.createElement(Component, this.props);
return _react2.default.createElement(Component, _props);
}

@@ -86,3 +98,2 @@ }]);

// 柯里化，延迟执行，一(3个参数)或两步(2个参数+1个参数)执行，两步执行时保留第一步执行的参数，到第二次输入全部参数方执行fn（并恢复参数到第一步时）
function curry(fn) {

@@ -96,8 +107,9 @@ if (typeof fn !== 'function') {

function _curry() {
var args = [].concat(_args); // 备份合并前参数
var args = [].concat(_args);
if (arguments.length >= _len) {
// 一次性传三个参数则舍弃之前参数
_args = [];
} else if (arguments.length + _args.length > _len) {
_args = [];
}
_args = _args.concat([].slice.call(arguments)); // arguments转数组拼接到之前数组
_args = _args.concat([].slice.call(arguments));
if (_args.length === _len) {

@@ -104,0 +116,0 @@ var rst = fn.apply(null, _args);

11

lib/ErrorHandler.js

@@ -22,13 +22,4 @@ 'use strict';

// 错误报告函数示例
function reportErrorToService(error, info, props) {
console.error({
error: error,
info: info,
props: props
});
}
var errorHandlerDecorator = (0, _errorHandlerHoc2.default)(_Fallback2.default);
var errorHandlerDecorator = (0, _errorHandlerHoc2.default)(reportErrorToService, _Fallback2.default);
var ErrorBoundary = errorHandlerDecorator(function (props) {

@@ -35,0 +26,0 @@ return _react2.default.createElement(

12

lib/Fallback.js

@@ -56,14 +56,2 @@ 'use strict';

function replacer(key, value) {
if (typeof value === 'function') {
return 'function ' + value.name + '() {...}';
}
return value;
}
function stringify(value) {
return JSON.stringify(value, replacer, 2);
}
function Fallback(props) {

@@ -70,0 +58,0 @@ var error = props.error,

5

package.json
{
"name": "react-error-boundaries",
"version": "0.1.8",
"version": "1.0.8",
"description": "React HOC for error boundaries.",

@@ -29,3 +29,4 @@ "main": "lib/index.js",

"react": "^16.2.0",
"react-dom": "^16.2.0"
"react-dom": "^16.2.0",
"react-error-boundaries": "^1.0.6"
},

@@ -32,0 +33,0 @@ "devDependencies": {

105

README.md
# react-error-boundaries
A reusable React error boundaries component.
[![version](https://img.shields.io/npm/v/react-error-boundaries.svg?style=flat-square)](http://npm.im/react-popconfirm)

@@ -9,20 +7,14 @@ [![downloads](https://img.shields.io/npm/dm/react-error-boundaries.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-popconfirm&from=2017-04-07)

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](https://raw.githubusercontent.com/Chyrain/MDPictures/master/res/react_error_boundaries.png)
Base on React 16.2.0, babel required:
## Install
```json
{
"presets": [
"stage-3",
"react"
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties",
"transform-object-rest-spread"
]
}
```s
npm install react-error-boundaries
```

@@ -32,2 +24,18 @@

Import:
```js
// 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 }
Use as a component container:

@@ -48,3 +56,25 @@

}
ReactDOM.render(<App />, document.getElementById('root'));
```
And you can handle errors by providing an onError callback:
```js
// 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}>
<YourComponents />
</ErrorBoundary>
);
}
ReactDOM.render(<App />, document.getElementById('root'));

@@ -60,4 +90,5 @@ ```

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

@@ -75,21 +106,38 @@ super(props);

}
// 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'));
```
By using it as a HOC. You can also customize the errorCallback function and FallbackComponent for better appearance:
In HOC way, you can also customize the FallbackComponent for better appearance:
```js
// import first
import { withErrorHandler } from 'react-error-boundaries'
// 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(
errorCallback, // report Error to service
FallbackComponent, // Component to display errors
YourComponent // Component to decorate
)
YourFallbackComponent, // Fallback Component to display errors, to replace default FallbackView
YourComponent // Component to decorate
);
ReactDOM.render(<ComponentWithErrorBoundary onError={onError} />, document.getElementById('root'));
// or customize as a ES7 decorator
/* example 2 */
// customize as a ES7 decorator
const yourErrorHandlerDecorator = withErrorHandler(
errorCallback, // report Error to service
FallbackComponent, // Component to display errors
)
YourFallbackComponent // Fallback Component to display errors, to replace default FallbackView
);

@@ -100,4 +148,3 @@ @yourErrorHandlerDecorator

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

@@ -104,0 +151,0 @@

19

src/error-handler-hoc.js
import React from 'react'
function withErrorHandler (errorCallback, FallbackComponent, Component) {
function withErrorHandler (FallbackComponent, Component) {
class WithErrorHandler extends React.PureComponent {

@@ -25,6 +25,8 @@ constructor () {

// Report errors
errorCallback(error, info, this.props);
const {onError, ..._props} = this.props;
this.props.onError && this.props.onError(error, info, _props);
}
render () {
const {onError, ..._props} = this.props;
// if state contains error and in development environment we render fallback component

@@ -35,3 +37,3 @@ if (this.state.hasError && process.env.NODE_ENV == 'development') {

<FallbackComponent
{...this.props}
{..._props}
closeErrorModal={this.closeErrorModal}

@@ -43,3 +45,3 @@ error={error}

}
return <Component {...this.props} />
return <Component {..._props} />
}

@@ -51,3 +53,2 @@ }

// 柯里化，延迟执行，一(3个参数)或两步(2个参数+1个参数)执行，两步执行时保留第一步执行的参数，到第二次输入全部参数方执行fn（并恢复参数到第一步时）
function curry(fn) {

@@ -60,7 +61,9 @@ if (typeof fn !== 'function') {

function _curry() {
var args = [].concat(_args); // 备份合并前参数
if (arguments.length >= _len) { // 一次性传三个参数则舍弃之前参数
var args = [].concat(_args);
if (arguments.length >= _len) {
_args = [];
} else if (arguments.length + _args.length > _len) {
_args = [];
}
_args = _args.concat([].slice.call(arguments)); // arguments转数组拼接到之前数组
_args = _args.concat([].slice.call(arguments));
if (_args.length === _len) {

@@ -67,0 +70,0 @@ var rst = fn.apply(null, _args);

14

src/ErrorHandler.js

@@ -6,16 +6,4 @@ import React from 'react'

// 错误报告函数示例
function reportErrorToService(error, info, props) {
console.error({
error,
info,
props
});
}
const errorHandlerDecorator = withErrorHandler(FallbackView)
const errorHandlerDecorator = withErrorHandler(
reportErrorToService,
FallbackView
);
const ErrorBoundary = errorHandlerDecorator(props =>

@@ -22,0 +10,0 @@ <React.Fragment>{props.children}</React.Fragment>

12

src/Fallback.js

@@ -39,14 +39,2 @@ // Fallback.jsx

function replacer(key, value) {
if (typeof value === 'function') {
return `function ${value.name}() {...}`
}
return value
}
function stringify(value) {
return JSON.stringify(value, replacer, 2)
}
export default function Fallback(props) {

@@ -53,0 +41,0 @@ const { error, errorInfo, closeErrorModal } = props;