react-error-boundary - npm Package Compare versions

Comparing version 2.3.2 to 3.0.0

dist/react-error-boundary.cjs.js

@@ -28,4 +28,3 @@ 'use strict';
 var initialState = {
-  error: null,
-  info: null
+  error: null
 };
@@ -45,2 +44,3 @@
     _this.state = initialState;
+    _this.updatedWithError = false;
 
@@ -56,3 +56,3 @@ _this.resetErrorBoundary = function () {
 
-      _this.setState(initialState);
+      _this.reset();
     };
@@ -71,22 +71,32 @@
 
+  _proto.reset = function reset() {
+    this.updatedWithError = false;
+    this.setState(initialState);
+  };
+
   _proto.componentDidCatch = function componentDidCatch(error, info) {
     var _this$props$onError, _this$props2;
 
-    (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info == null ? void 0 : info.componentStack);
-    this.setState({
-      info: info
-    });
+    (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this$state = this.state,
-        error = _this$state.error,
-        info = _this$state.info;
-    var resetKeys = this.props.resetKeys;
+    var error = this.state.error;
+    var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
 
-    if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+    if (error !== null && !this.updatedWithError) {
+      this.updatedWithError = true;
+      return;
+    }
+
+    if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
       var _this$props$onResetKe, _this$props3;
 
       (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
-      this.setState(initialState);
+      this.reset();
     }
@@ -96,5 +106,3 @@ };
   _proto.render = function render() {
-    var _this$state2 = this.state,
-        error = _this$state2.error,
-        info = _this$state2.info;
+    var error = this.state.error;
     var _this$props4 = this.props,
@@ -106,12 +114,3 @@ 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 = {
-        componentStack: info == null ? void 0 : info.componentStack,
         error: error,
@@ -118,0 +117,0 @@ resetErrorBoundary: this.resetErrorBoundary

dist/react-error-boundary.esm.js

@@ -19,4 +19,3 @@ import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 var initialState = {
-  error: null,
-  info: null
+  error: null
 };
@@ -36,2 +35,3 @@
     _this.state = initialState;
+    _this.updatedWithError = false;
 
@@ -47,3 +47,3 @@ _this.resetErrorBoundary = function () {
 
-      _this.setState(initialState);
+      _this.reset();
     };
@@ -62,22 +62,32 @@
 
+  _proto.reset = function reset() {
+    this.updatedWithError = false;
+    this.setState(initialState);
+  };
+
   _proto.componentDidCatch = function componentDidCatch(error, info) {
     var _this$props$onError, _this$props2;
 
-    (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info == null ? void 0 : info.componentStack);
-    this.setState({
-      info: info
-    });
+    (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this$state = this.state,
-        error = _this$state.error,
-        info = _this$state.info;
-    var resetKeys = this.props.resetKeys;
+    var error = this.state.error;
+    var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
 
-    if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+    if (error !== null && !this.updatedWithError) {
+      this.updatedWithError = true;
+      return;
+    }
+
+    if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
       var _this$props$onResetKe, _this$props3;
 
       (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
-      this.setState(initialState);
+      this.reset();
     }
@@ -87,5 +97,3 @@ };
   _proto.render = function render() {
-    var _this$state2 = this.state,
-        error = _this$state2.error,
-        info = _this$state2.info;
+    var error = this.state.error;
     var _this$props4 = this.props,
@@ -97,12 +105,3 @@ 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 = {
-        componentStack: info == null ? void 0 : info.componentStack,
         error: error,
@@ -109,0 +108,0 @@ resetErrorBoundary: this.resetErrorBoundary

dist/react-error-boundary.umd.js

@@ -32,4 +32,3 @@ (function (global, factory) {
   var initialState = {
-    error: null,
-    info: null
+    error: null
   };
@@ -49,2 +48,3 @@
       _this.state = initialState;
+      _this.updatedWithError = false;
 
@@ -60,3 +60,3 @@ _this.resetErrorBoundary = function () {
 
-        _this.setState(initialState);
+        _this.reset();
       };
@@ -75,22 +75,32 @@
 
+    _proto.reset = function reset() {
+      this.updatedWithError = false;
+      this.setState(initialState);
+    };
+
     _proto.componentDidCatch = function componentDidCatch(error, info) {
       var _this$props$onError, _this$props2;
 
-      (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info == null ? void 0 : info.componentStack);
-      this.setState({
-        info: info
-      });
+      (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
     };
 
     _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-      var _this$state = this.state,
-          error = _this$state.error,
-          info = _this$state.info;
-      var resetKeys = this.props.resetKeys;
+      var error = this.state.error;
+      var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
+      // happens to *also* be in the resetKeys array, we'd end up resetting
+      // the error boundary immediately. This would likely trigger a second
+      // error to be thrown.
+      // So we make sure that we don't check the resetKeys on the first call
+      // of cDU after the error is set
 
-      if (error !== null && info !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      if (error !== null && !this.updatedWithError) {
+        this.updatedWithError = true;
+        return;
+      }
+
+      if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
         var _this$props$onResetKe, _this$props3;
 
         (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
-        this.setState(initialState);
+        this.reset();
       }
@@ -100,5 +110,3 @@ };
     _proto.render = function render() {
-      var _this$state2 = this.state,
-          error = _this$state2.error,
-          info = _this$state2.info;
+      var error = this.state.error;
       var _this$props4 = this.props,
@@ -110,12 +118,3 @@ 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 = {
-          componentStack: info == null ? void 0 : info.componentStack,
           error: error,
@@ -122,0 +121,0 @@ resetErrorBoundary: this.resetErrorBoundary

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

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

package.json

 {
   "name": "react-error-boundary",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "Simple reusable React error boundary component",
@@ -5,0 +5,0 @@ "main": "dist/react-error-boundary.cjs.js",

README.md

@@ -73,3 +73,3 @@ <div align="center">
 
-function ErrorFallback({error, componentStack, resetErrorBoundary}) {
+function ErrorFallback({error, resetErrorBoundary}) {
   return (
@@ -79,3 +79,2 @@ <div role="alert">
       <pre>{error.message}</pre>
-      <pre>{componentStack}</pre>
       <button onClick={resetErrorBoundary}>Try again</button>
@@ -103,3 +102,3 @@ </div>
 
-const myErrorHandler = (error: Error, componentStack: string) => {
+const myErrorHandler = (error: Error, info: {componentStack: string}) => {
   // Do something with the error
@@ -124,3 +123,3 @@ // E.g. log to an error logging client here
   FallbackComponent: ErrorBoundaryFallbackComponent,
-  onError(error, componentStack) {
+  onError(error, info) {
     // Do something with the error
@@ -142,3 +141,3 @@ // E.g. log to an error logging client here
 ```jsx
-function ErrorFallback({error, componentStack, resetErrorBoundary}) {
+function ErrorFallback({error, resetErrorBoundary}) {
   return (
@@ -148,3 +147,2 @@ <div role="alert">
       <pre>{error.message}</pre>
-      <pre>{componentStack}</pre>
       <button onClick={resetErrorBoundary}>Try again</button>
@@ -207,5 +205,5 @@ </div>
 This is a component you want rendered in the event of an error. As props it will
-be passed the `error`, `componentStack`, and `resetErrorBoundary` (which will
-reset the error boundary's state when called, useful for a "try again" button
-when used in combination with the `onReset` prop).
+be passed the `error` and `resetErrorBoundary` (which will reset the error
+boundary's state when called, useful for a "try again" button when used in
+combination with the `onReset` prop).
 
@@ -220,4 +218,3 @@ This is required if no `fallback` or `fallbackRender` prop is provided.
 
-It will be called with an object that has `error`, `componentStack`, and
-`resetErrorBoundary`:
+It will be called with an object that has `error` and `resetErrorBoundary`:
 
@@ -275,3 +272,3 @@ ```jsx
 This will be called when there's been an error that the `ErrorBoundary` has
-handled. It will be called with two arguments: `error`, `componentStack`.
+handled. It will be called with two arguments: `error`, `info`.
 
@@ -278,0 +275,0 @@ #### `onReset`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

47363

decreased by-3.31%

Lines of code

401

decreased by-2.2%

Number of lines in readme file

446

decreased by-0.67%

No dependency changes