Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket

react-error-boundary

Package Overview
Dependencies
Maintainers
2
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-error-boundary - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

48

dist/react-error-boundary.cjs.js

@@ -5,7 +5,10 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
var React = require('react');
var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
var React = _interopDefault(require('react'));
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var changedArray = function (a, b) {

@@ -31,3 +34,3 @@ if (a === void 0) {

var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ErrorBoundary, _React$Component);
_inheritsLoose__default['default'](ErrorBoundary, _React$Component);

@@ -59,2 +62,8 @@ function ErrorBoundary() {

ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
return {
error: error
};
};
var _proto = ErrorBoundary.prototype;

@@ -67,3 +76,2 @@

this.setState({
error: error,
info: info

@@ -74,6 +82,8 @@ });

_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var error = this.state.error;
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var resetKeys = this.props.resetKeys;
if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
var _this$props$onResetKe, _this$props3;

@@ -87,5 +97,5 @@

_proto.render = function render() {
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var _this$state2 = this.state,
error = _this$state2.error,
info = _this$state2.info;
var _this$props4 = this.props,

@@ -97,2 +107,10 @@ fallbackRender = _this$props4.fallbackRender,

if (error !== null) {
// we'll get a re-render with the error state in getDerivedStateFromError
// but we don't have the info yet, so just render null
// note that this won't be committed to the DOM thanks to our componentDidCatch
// so the user won't see a flash of nothing, so this works fine.
// the benefit of doing things this way rather than just putting both the
// error and info setState within componentDidCatch is we avoid re-rendering
// busted stuff: https://github.com/bvaughn/react-error-boundary/issues/66
if (!info) return null;
var props = {

@@ -104,3 +122,3 @@ componentStack: info == null ? void 0 : info.componentStack,

if ( /*#__PURE__*/React.isValidElement(fallback)) {
if ( /*#__PURE__*/React__default['default'].isValidElement(fallback)) {
return fallback;

@@ -110,3 +128,3 @@ } else if (typeof fallbackRender === 'function') {

} else if (FallbackComponent) {
return /*#__PURE__*/React.createElement(FallbackComponent, props);
return /*#__PURE__*/React__default['default'].createElement(FallbackComponent, props);
} else {

@@ -121,7 +139,7 @@ throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');

return ErrorBoundary;
}(React.Component);
}(React__default['default'].Component);
function withErrorBoundary(Component, errorBoundaryProps) {
function Wrapped(props) {
return /*#__PURE__*/React.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React.createElement(Component, props));
return /*#__PURE__*/React__default['default'].createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__default['default'].createElement(Component, props));
} // Format for display in DevTools

@@ -136,3 +154,3 @@

function useErrorHandler(givenError) {
var _React$useState = React.useState(null),
var _React$useState = React__default['default'].useState(null),
error = _React$useState[0],

@@ -139,0 +157,0 @@ setError = _React$useState[1];

@@ -51,2 +51,8 @@ import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';

ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
return {
error: error
};
};
var _proto = ErrorBoundary.prototype;

@@ -59,3 +65,2 @@

this.setState({
error: error,
info: info

@@ -66,6 +71,8 @@ });

_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var error = this.state.error;
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var resetKeys = this.props.resetKeys;
if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
var _this$props$onResetKe, _this$props3;

@@ -79,5 +86,5 @@

_proto.render = function render() {
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var _this$state2 = this.state,
error = _this$state2.error,
info = _this$state2.info;
var _this$props4 = this.props,

@@ -89,2 +96,10 @@ fallbackRender = _this$props4.fallbackRender,

if (error !== null) {
// we'll get a re-render with the error state in getDerivedStateFromError
// but we don't have the info yet, so just render null
// note that this won't be committed to the DOM thanks to our componentDidCatch
// so the user won't see a flash of nothing, so this works fine.
// the benefit of doing things this way rather than just putting both the
// error and info setState within componentDidCatch is we avoid re-rendering
// busted stuff: https://github.com/bvaughn/react-error-boundary/issues/66
if (!info) return null;
var props = {

@@ -91,0 +106,0 @@ componentStack: info == null ? void 0 : info.componentStack,

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
(global = global || self, factory(global.ReactErrorBoundary = {}, global.React));
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactErrorBoundary = {}, global.React));
}(this, (function (exports, React) { 'use strict';
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function _inheritsLoose(subClass, superClass) {

@@ -62,2 +64,8 @@ subClass.prototype = Object.create(superClass.prototype);

ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
return {
error: error
};
};
var _proto = ErrorBoundary.prototype;

@@ -70,3 +78,2 @@

this.setState({
error: error,
info: info

@@ -77,6 +84,8 @@ });

_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var error = this.state.error;
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var resetKeys = this.props.resetKeys;
if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
var _this$props$onResetKe, _this$props3;

@@ -90,5 +99,5 @@

_proto.render = function render() {
var _this$state = this.state,
error = _this$state.error,
info = _this$state.info;
var _this$state2 = this.state,
error = _this$state2.error,
info = _this$state2.info;
var _this$props4 = this.props,

@@ -100,2 +109,10 @@ fallbackRender = _this$props4.fallbackRender,

if (error !== null) {
// we'll get a re-render with the error state in getDerivedStateFromError
// but we don't have the info yet, so just render null
// note that this won't be committed to the DOM thanks to our componentDidCatch
// so the user won't see a flash of nothing, so this works fine.
// the benefit of doing things this way rather than just putting both the
// error and info setState within componentDidCatch is we avoid re-rendering
// busted stuff: https://github.com/bvaughn/react-error-boundary/issues/66
if (!info) return null;
var props = {

@@ -107,3 +124,3 @@ componentStack: info == null ? void 0 : info.componentStack,

if ( /*#__PURE__*/React.isValidElement(fallback)) {
if ( /*#__PURE__*/React__default['default'].isValidElement(fallback)) {
return fallback;

@@ -113,3 +130,3 @@ } else if (typeof fallbackRender === 'function') {

} else if (FallbackComponent) {
return /*#__PURE__*/React.createElement(FallbackComponent, props);
return /*#__PURE__*/React__default['default'].createElement(FallbackComponent, props);
} else {

@@ -124,7 +141,7 @@ throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');

return ErrorBoundary;
}(React.Component);
}(React__default['default'].Component);
function withErrorBoundary(Component, errorBoundaryProps) {
function Wrapped(props) {
return /*#__PURE__*/React.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React.createElement(Component, props));
return /*#__PURE__*/React__default['default'].createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__default['default'].createElement(Component, props));
} // Format for display in DevTools

@@ -139,3 +156,3 @@

function useErrorHandler(givenError) {
var _React$useState = React.useState(null),
var _React$useState = React__default['default'].useState(null),
error = _React$useState[0],

@@ -142,0 +159,0 @@ setError = _React$useState[1];

@@ -1,2 +0,2 @@

!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r=r||self).ReactErrorBoundary={},r.React)}(this,(function(r,e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t={error:null,info:null},n=function(r){var n,o;function a(){for(var e,n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];return(e=r.call.apply(r,[this].concat(o))||this).state=t,e.resetErrorBoundary=function(){for(var r,n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];null==e.props.onReset||(r=e.props).onReset.apply(r,o),e.setState(t)},e}o=r,(n=a).prototype=Object.create(o.prototype),n.prototype.constructor=n,n.__proto__=o;var l=a.prototype;return l.componentDidCatch=function(r,e){var t,n;null==(t=(n=this.props).onError)||t.call(n,r,null==e?void 0:e.componentStack),this.setState({error:r,info:e})},l.componentDidUpdate=function(r){var e,n,o,a,l=this.state.error,i=this.props.resetKeys;null!==l&&(void 0===(o=r.resetKeys)&&(o=[]),void 0===(a=i)&&(a=[]),o.length!==a.length||o.some((function(r,e){return!Object.is(r,a[e])})))&&(null==(e=(n=this.props).onResetKeysChange)||e.call(n,r.resetKeys,i),this.setState(t))},l.render=function(){var r=this.state,t=r.error,n=r.info,o=this.props,a=o.fallbackRender,l=o.FallbackComponent,i=o.fallback;if(null!==t){var s={componentStack:null==n?void 0:n.componentStack,error:t,resetErrorBoundary:this.resetErrorBoundary};if(e.isValidElement(i))return i;if("function"==typeof a)return a(s);if(l)return e.createElement(l,s);throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop")}return this.props.children},a}(e.Component);r.ErrorBoundary=n,r.useErrorHandler=function(r){var t=e.useState(null),n=t[0],o=t[1];if(r)throw r;if(n)throw n;return o},r.withErrorBoundary=function(r,t){function o(o){return e.createElement(n,t,e.createElement(r,o))}var a=r.displayName||r.name||"Unknown";return o.displayName="withErrorBoundary("+a+")",o},Object.defineProperty(r,"__esModule",{value:!0})}));
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).ReactErrorBoundary={},e.React)}(this,(function(e,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(r);var o={error:null,info:null},a=function(e){var r,t;function a(){for(var r,t=arguments.length,n=new Array(t),a=0;a<t;a++)n[a]=arguments[a];return(r=e.call.apply(e,[this].concat(n))||this).state=o,r.resetErrorBoundary=function(){for(var e,t=arguments.length,n=new Array(t),a=0;a<t;a++)n[a]=arguments[a];null==r.props.onReset||(e=r.props).onReset.apply(e,n),r.setState(o)},r}t=e,(r=a).prototype=Object.create(t.prototype),r.prototype.constructor=r,r.__proto__=t,a.getDerivedStateFromError=function(e){return{error:e}};var l=a.prototype;return l.componentDidCatch=function(e,r){var t,n;null==(t=(n=this.props).onError)||t.call(n,e,null==r?void 0:r.componentStack),this.setState({info:r})},l.componentDidUpdate=function(e){var r,t,n,a,l=this.state,i=l.error,u=l.info,s=this.props.resetKeys;null!==i&&null!==u&&(void 0===(n=e.resetKeys)&&(n=[]),void 0===(a=s)&&(a=[]),n.length!==a.length||n.some((function(e,r){return!Object.is(e,a[r])})))&&(null==(r=(t=this.props).onResetKeysChange)||r.call(t,e.resetKeys,s),this.setState(o))},l.render=function(){var e=this.state,r=e.error,t=e.info,o=this.props,a=o.fallbackRender,l=o.FallbackComponent,i=o.fallback;if(null!==r){if(!t)return null;var u={componentStack:null==t?void 0:t.componentStack,error:r,resetErrorBoundary:this.resetErrorBoundary};if(n.default.isValidElement(i))return i;if("function"==typeof a)return a(u);if(l)return n.default.createElement(l,u);throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop")}return this.props.children},a}(n.default.Component);e.ErrorBoundary=a,e.useErrorHandler=function(e){var r=n.default.useState(null),t=r[0],o=r[1];if(e)throw e;if(t)throw t;return o},e.withErrorBoundary=function(e,r){function t(t){return n.default.createElement(a,r,n.default.createElement(e,t))}var o=e.displayName||e.name||"Unknown";return t.displayName="withErrorBoundary("+o+")",t},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-error-boundary.umd.min.js.map
{
"name": "react-error-boundary",
"version": "2.3.1",
"version": "2.3.2",
"description": "Simple reusable React error boundary component",

@@ -42,12 +42,12 @@ "main": "dist/react-error-boundary.cjs.js",

"dependencies": {
"@babel/runtime": "^7.10.5"
"@babel/runtime": "^7.11.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.1",
"@testing-library/react": "^10.4.7",
"@testing-library/user-event": "^12.0.11",
"kcd-scripts": "^6.2.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.2",
"@testing-library/user-event": "^12.1.4",
"kcd-scripts": "^6.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.9.7"
"typescript": "^4.0.2"
},

@@ -61,5 +61,6 @@ "peerDependencies": {

"react/prop-types": "off",
"react/no-did-update-set-state": "off"
"react/no-did-update-set-state": "off",
"babel/no-unused-expressions": "off"
}
}
}

@@ -342,3 +342,3 @@ <div align="center">

<input id="name" />
<button type="submit" onClick={handleClick}>
<button type="submit"}>
get a greeting

@@ -352,3 +352,3 @@ </button>

> Note, in case it's not clear what's happening here, you could also write
> `handleClick` like this:
> `handleSubmit` like this:

@@ -386,5 +386,3 @@ ```javascript

<input id="name" />
<button type="submit" onClick={handleClick}>
get a greeting
</button>
<button type="submit">get a greeting</button>
</form>

@@ -391,0 +389,0 @@ )

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc