react-error-boundary - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

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];

dist/react-error-boundary.esm.js

@@ -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,

dist/react-error-boundary.umd.js

 (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];

dist/react-error-boundary.umd.min.js

@@ -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

package.json

 {
   "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"
     }
   }
 }

README.md

@@ -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 @@ )

No alert changes

Improved metrics

Total package byte prevSize

48985

10.66%

Lines of code

410

12.33%

Worsened metrics

Number of lines in readme file

449

-0.44%

Dependency changes

• Updated

  @babel/runtime@^7.11.2