use-error-boundary - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

lib/index.js

@@ -1,2 +0,2 @@
-var r,e=require("react"),t=(r=e)&&"object"==typeof r&&"default"in r?r.default:r,n=function(r){var e,t;function n(e){var t;return(t=r.call(this,e)||this).state={hasError:!1,error:null},t}t=r,(e=n).prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,e){return this.props.onDidCatch(r,e)},o.render=function(){var r=this.state,e=this.props,t=e.render,n=e.children,o=e.renderError;return r.hasError?o?o({error:r.error}):null:t?t():n||null},n}(e.PureComponent),o=function(r,e){switch(e.type){case"catch":return{didCatch:!0,error:e.error};default:return r}};function c(r){var c,u,a=e.useReducer(o,{didCatch:!1,error:null}),d=a[0],i=a[1],h=e.useRef(null);return{ErrorBoundary:(u=h.current,null!==u||(c=function(e,t){i({type:"catch",error:e}),r&&r.onDidCatch&&r.onDidCatch(e,t)},h.current=u=function(r){return t.createElement(n,{onDidCatch:c,children:r.children,render:r.render,renderError:r.renderError})}),u),didCatch:d.didCatch,error:d.error}}Object.assign(c,{useErrorBoundary:c}),module.exports=c;
+var r=require("react");function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var t=e(r),n=function(r){var e,t;function n(e){var t;return(t=r.call(this,e)||this).state={hasError:!1,error:null},t}t=r,(e=n).prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,e){return this.props.onDidCatch(r,e)},o.render=function(){var r=this.state,e=this.props,t=e.render,n=e.children,o=e.renderError;return r.hasError?o?o({error:r.error}):null:t?t():n||null},n}(r.PureComponent),o=function(r,e){switch(e.type){case"catch":return{didCatch:!0,error:e.error};case"reset":return{didCatch:!1,error:null};default:return r}};function u(e){var u=r.useReducer(o,{didCatch:!1,error:null}),c=u[0],a=u[1],i=r.useRef(null);function d(){return r=function(r,t){a({type:"catch",error:r}),e&&e.onDidCatch&&e.onDidCatch(r,t)},function(e){return t.default.createElement(n,{onDidCatch:r,children:e.children,render:e.render,renderError:e.renderError})};var r}var l,s=r.useCallback(function(){i.current=d(),a({type:"reset"})},[]);return{ErrorBoundary:(l=i.current,null!==l?l:(i.current=d(),i.current)),didCatch:c.didCatch,error:c.error,reset:s}}Object.assign(u,{useErrorBoundary:u}),module.exports=u;
 //# sourceMappingURL=index.js.map

lib/index.modern.js

@@ -1,2 +0,2 @@
-import r,{PureComponent as e,useReducer as t,useRef as n}from"react";class o extends e{constructor(r){super(r),this.state={hasError:!1,error:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,e){return this.props.onDidCatch(r,e)}render(){const{hasError:r,error:e}=this.state,{render:t,children:n,renderError:o}=this.props;return r?o?o({error:e}):null:t?t():n||null}}const c=(r,e)=>{switch(e.type){case"catch":return{didCatch:!0,error:e.error};default:return r}};function d(e){const[d,a]=t(c,{didCatch:!1,error:null}),u=n(null);return{ErrorBoundary:function(){let t=u.current;return null!==t||(n=(r,t)=>{a({type:"catch",error:r}),e&&e.onDidCatch&&e.onDidCatch(r,t)},t=function(e){return r.createElement(o,{onDidCatch:n,children:e.children,render:e.render,renderError:e.renderError})},u.current=t),t;var n}(),didCatch:d.didCatch,error:d.error}}export default d;export{d as useErrorBoundary};
+import r,{PureComponent as e,useReducer as t,useRef as n,useCallback as o}from"react";class c extends e{constructor(r){super(r),this.state={hasError:!1,error:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,e){return this.props.onDidCatch(r,e)}render(){const{hasError:r,error:e}=this.state,{render:t,children:n,renderError:o}=this.props;return r?o?o({error:e}):null:t?t():n||null}}const d=(r,e)=>{switch(e.type){case"catch":return{didCatch:!0,error:e.error};case"reset":return{didCatch:!1,error:null};default:return r}};function u(e){const[u,a]=t(d,{didCatch:!1,error:null}),s=n(null);function i(){return t=(r,t)=>{a({type:"catch",error:r}),e&&e.onDidCatch&&e.onDidCatch(r,t)},function(e){return r.createElement(c,{onDidCatch:t,children:e.children,render:e.render,renderError:e.renderError})};var t}const h=o(()=>{s.current=i(),a({type:"reset"})},[]);return{ErrorBoundary:function(){let r=s.current;return null!==r?r:(s.current=i(),s.current)}(),didCatch:u.didCatch,error:u.error,reset:h}}export default u;export{u as useErrorBoundary};
 //# sourceMappingURL=index.modern.js.map

lib/index.module.js

@@ -1,2 +0,2 @@
-import r,{PureComponent as t,useReducer as e,useRef as n}from"react";var o=function(r){var t,e;function n(t){var e;return(e=r.call(this,t)||this).state={hasError:!1,error:null},e}e=r,(t=n).prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,t){return this.props.onDidCatch(r,t)},o.render=function(){var r=this.state,t=this.props,e=t.render,n=t.children,o=t.renderError;return r.hasError?o?o({error:r.error}):null:e?e():n||null},n}(t),c=function(r,t){switch(t.type){case"catch":return{didCatch:!0,error:t.error};default:return r}};function a(t){var a,u,i=e(c,{didCatch:!1,error:null}),d=i[0],h=i[1],l=n(null);return{ErrorBoundary:(u=l.current,null!==u||(a=function(r,e){h({type:"catch",error:r}),t&&t.onDidCatch&&t.onDidCatch(r,e)},l.current=u=function(t){return r.createElement(o,{onDidCatch:a,children:t.children,render:t.render,renderError:t.renderError})}),u),didCatch:d.didCatch,error:d.error}}export default a;export{a as useErrorBoundary};
+import r,{PureComponent as t,useReducer as e,useRef as n,useCallback as o}from"react";var c=function(r){var t,e;function n(t){var e;return(e=r.call(this,t)||this).state={hasError:!1,error:null},e}e=r,(t=n).prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,t){return this.props.onDidCatch(r,t)},o.render=function(){var r=this.state,t=this.props,e=t.render,n=t.children,o=t.renderError;return r.hasError?o?o({error:r.error}):null:e?e():n||null},n}(t),u=function(r,t){switch(t.type){case"catch":return{didCatch:!0,error:t.error};case"reset":return{didCatch:!1,error:null};default:return r}};function a(t){var a=e(u,{didCatch:!1,error:null}),i=a[0],d=a[1],h=n(null);function l(){return e=function(r,e){d({type:"catch",error:r}),t&&t.onDidCatch&&t.onDidCatch(r,e)},function(t){return r.createElement(c,{onDidCatch:e,children:t.children,render:t.render,renderError:t.renderError})};var e}var p,s=o(function(){h.current=l(),d({type:"reset"})},[]);return{ErrorBoundary:(p=h.current,null!==p?p:(h.current=l(),h.current)),didCatch:i.didCatch,error:i.error,reset:s}}export default a;export{a as useErrorBoundary};
 //# sourceMappingURL=index.module.js.map

lib/index.umd.js

@@ -1,2 +0,2 @@
-!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(r=r||self).useErrorBoundary=e(r.react)}(this,function(r){var e="default"in r?r.default:r,t=function(r){var e,t;function n(e){var t;return(t=r.call(this,e)||this).state={hasError:!1,error:null},t}t=r,(e=n).prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,e){return this.props.onDidCatch(r,e)},o.render=function(){var r=this.state,e=this.props,t=e.render,n=e.children,o=e.renderError;return r.hasError?o?o({error:r.error}):null:t?t():n||null},n}(r.PureComponent),n=function(r,e){switch(e.type){case"catch":return{didCatch:!0,error:e.error};default:return r}};function o(o){var u,c,d=r.useReducer(n,{didCatch:!1,error:null}),i=d[0],a=d[1],s=r.useRef(null);return{ErrorBoundary:(c=s.current,null!==c||(u=function(r,e){a({type:"catch",error:r}),o&&o.onDidCatch&&o.onDidCatch(r,e)},s.current=c=function(r){return e.createElement(t,{onDidCatch:u,children:r.children,render:r.render,renderError:r.renderError})}),c),didCatch:i.didCatch,error:i.error}}return Object.assign(o,{useErrorBoundary:o}),o});
+!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(r||self).useErrorBoundary=e(r.react)}(this,function(r){function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var t=e(r),n=function(r){var e,t;function n(e){var t;return(t=r.call(this,e)||this).state={hasError:!1,error:null},t}t=r,(e=n).prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t,n.getDerivedStateFromError=function(r){return{hasError:!0,error:r}};var o=n.prototype;return o.componentDidCatch=function(r,e){return this.props.onDidCatch(r,e)},o.render=function(){var r=this.state,e=this.props,t=e.render,n=e.children,o=e.renderError;return r.hasError?o?o({error:r.error}):null:t?t():n||null},n}(r.PureComponent),o=function(r,e){switch(e.type){case"catch":return{didCatch:!0,error:e.error};case"reset":return{didCatch:!1,error:null};default:return r}};function u(e){var u=r.useReducer(o,{didCatch:!1,error:null}),c=u[0],a=u[1],i=r.useRef(null);function d(){return r=function(r,t){a({type:"catch",error:r}),e&&e.onDidCatch&&e.onDidCatch(r,t)},function(e){return t.default.createElement(n,{onDidCatch:r,children:e.children,render:e.render,renderError:e.renderError})};var r}var l,s=r.useCallback(function(){i.current=d(),a({type:"reset"})},[]);return{ErrorBoundary:(l=i.current,null!==l?l:(i.current=d(),i.current)),didCatch:c.didCatch,error:c.error,reset:s}}return Object.assign(u,{useErrorBoundary:u}),u});
 //# sourceMappingURL=index.umd.js.map

lib/use-error-boundary.d.ts

@@ -8,2 +8,3 @@ import { UseErrorBoundaryWrapper } from "./create-error-boundary";
     ErrorBoundary: UseErrorBoundaryWrapper;
+    reset: () => void;
 }
@@ -10,0 +11,0 @@ /**

package.json

 {
   "name": "use-error-boundary",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "React hook for using error boundaries",
@@ -47,3 +47,3 @@ "source": "src/index.ts",
     "jest": "^26.4.2",
-    "microbundle": "^0.12.3",
+    "microbundle": "^0.13.3",
     "react": "^16.13.1",
@@ -59,2 +59,2 @@ "react-dom": "^16.13.1",
   }
-}
+}

README.md

 # use-error-boundary
 
 [![npm version](https://img.shields.io/npm/v/use-error-boundary.svg)](https://www.npmjs.com/package/use-error-boundary)
-![build status](https://travis-ci.org/JoschuaSchneider/use-error-boundary.svg?branch=master)
+![TypeScript](https://badgen.net/badge/-/TypeScript/blue?icon=typescript&label)
+![build workflow](https://github.com/JoschuaSchneider/use-error-boundary/actions/workflows/build.yml/badge.svg?branch=master)
+![test workflow](https://github.com/JoschuaSchneider/use-error-boundary/actions/workflows/test.yml/badge.svg?branch=master)
 ![license](https://img.shields.io/npm/l/use-error-boundary.svg)
@@ -9,5 +11,5 @@
 
-It lets you keep track of the error state of child components, by wrapping them in a provided `ErrorBoundary` component.
+It lets you keep track of the error state of child components, by wrapping them in the provided `ErrorBoundary` component.
 
-:warning: Read more about error boundaries and their intended use in the [React documentation](https://reactjs.org/docs/error-boundaries.html), this will only catch errors when rendering your children!
+:warning: Read more about error boundaries and their intended use in the [React documentation](https://reactjs.org/docs/error-boundaries.html), this will only catch errors during the render phase!
 
@@ -20,8 +22,12 @@ ### Installation
 
+```bash
+yarn add use-error-boundary
+```
+
 ### Breaking changes in `2.x`
 
-If you are upgrading from version `1.x` please make sure you are not using the `errorInfo` object.
-The hook itself and the `renderError` callback no longer provide this object.
+While upgrading from version `1.x` make sure you are not using the `errorInfo` object.
+The hook and the `renderError` callback no longer provide this object.
 
-For advanced use, please refer to [Custom handling of error and errorInfo](#custom-handling-of-error-and-errorinfo).
+For advanced use, please refer to [Custom handling of error and errorInfo](#handling-error-and-errorinfo-outside-of-markup).
 
@@ -39,3 +45,3 @@ ## Examples and usage
 
-Please read more info on the [returned properties](#returned-properties) by the hook.
+Learn more about the [properties that are returned](#returned-properties).
 
@@ -48,6 +54,7 @@ ```javascript
     didCatch,
-    error
+    error,
+    reset
   } = useErrorBoundary()
 
-  ...
+  //...
 
@@ -57,8 +64,9 @@ }
 
-### Use without render props
+### Usage without render props
 
-Wrap your components in the provided `ErrorBoundary`,
-if it catches an error the hook provides you with the changed state and the boundary Component will render nothing. So you have to handle rendering some error display yourself.
+Wrap your components in the provided `ErrorBoundary`.
+When it catches an error the hook provides you the changed error-state and the boundary Component will render nothing.
+You have to handle rendering some error display yourself.
 
-If you want the boundary to also render your error display, you can [use it with render props](#use-with-render-props)
+You can get the ErrorBoundary component to render your custom error display by [using the `renderError` render-prop.](#use-with-render-props)
 
@@ -76,3 +84,3 @@ ```javascript
       {didCatch ? (
-        <p>An error has been catched: {error.message}</p>
+        <p>An error has been caught: {error.message}</p>
       ) : (
@@ -88,9 +96,9 @@ <ErrorBoundary>
 
-### Use with render props
+### Usage with render props
 
-Optionally, you can pass a `render` and `renderError` function to render the components to display errors in the boundary itself:
+Optionally, you can pass a `render` and `renderError` function to render your UI and error-state inside the boundary.
 
 ```javascript
 /**
- * The renderError function also passes the error and errorInfo, so that you can display it using
+ * The renderError function also passes the error, so that you can display it using
  * render props.
@@ -106,5 +114,5 @@ */
 
-## Custom handling of `error` and `errorInfo`
+## Handling `error` and `errorInfo` outside of markup
 
-The hook now accepts an `options` object that you can pass a `onDidCatch` callback that gets called when the ErrorBoundary catches an error.
+The hook now accepts an `options` object that you can pass a `onDidCatch` callback that gets called when the ErrorBoundary catches an error. Use this for logging or reporting of errors.
 
@@ -123,17 +131,43 @@ ```js
 
-| Property        | Type                   | Description                                                                                                                                                                                                                                                                           |
-| --------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ErrorBoundary` | React Component        | Special error boundary component that provides state changes to the hook. <br>:warning: **You need to use this as the error boundary! Otherwise, the state will not update when errors are catched!** <br> The ErrorBoundary is **guaranteed referential equality** across rerenders. |
-| `didCatch`      | Boolean                | `true` if an error has been catched                                                                                                                                                                                                                                                   |
-| `error`         | Error Object or `null` | The error catched by the Boundary                                                                                                                                                                                                                                                     |
+### `ErrorBoundary`
+`Type: React Component`
 
+
+Special error boundary component that provides state changes to the hook.
+
+:warning: **You need to use this as the error boundary! Otherwise, the state will not update when errors are caught!**
+
+The ErrorBoundary is **guaranteed referential equality** across rerenders and only updates after a reset.
+
+### `didCatch`
+`Type: boolean`
+
+The error state, `true` if an error has ben caught.
+
+
+### `error`
+`Type: any | null`
+
+The error caught by the boundary, or `null`.
+
+### `reset`
+`Type: function`
+
+Function the reset the error state.
+Forces react to recreate the boundary by creating a new ErrorBoundary
+
+Your boundary can now catch errors again.
+
 If you are searching for the `errorInfo` property, please read [Breaking Changes in 2.x](#breaking-changes-in-2x).
 
-## Why should I use this?
+## Why should I use this hook?
 
 React does not provide a way to catch errors within the same functional component and you have to handle that in a class Component with special lifecycle methods.
-If you are new to ErrorBoundaries, I recommend implementing this yourself!
 
-This packages purpose is to provide an easy drop in replacement for projects that are being migrated to hooks and to pull the error presentation out of the boundary itself by putting it on the same level you are catching the errors.
+If you are new to ErrorBoundaries, building this yourself is a good way to get started!
 
+This packages purpose is to provide an easy drop in replacement for projects that are being migrated to hooks.
+
+This also pulls the error presentation out of the error boundary, and on the same level you are handling errors.
+
 ## Contributing
@@ -140,0 +174,0 @@

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

Improved metrics

Total package byte prevSize

50876

increased by5.85%

Lines of code

119

increased by2.59%

Number of lines in readme file

169

increased by25.19%

No dependency changes