@invisionag/iris-react-error-boundary
v3.5.2
Published
```js import ErrorBoundary from '@invisionag/iris-react-errorboundary'; ```
Downloads
171
Maintainers
Keywords
Readme
import ErrorBoundary from '@invisionag/iris-react-errorboundary';
react-error-boundary
is a component that catches JavaScript errors anywhere in its child component tree and displays a fallback UI instead. This prevents the entire react app from unmounting by using React 16's componentDidCatch
lifecycle method.
Usage
Basic
Renders a fallback UI when <SomeComponent />
throws an error. (As seen in the default Story)
<ErrorBoundary>
<SomeComponent />
</ErrorBoundary>
showStackTrace
When using the default fallback UI the showStackTrace
prop controlles if the stacktrace is shown. By default the stacktrace isn't shown in the production enviroment.
// Will never show the stacktrace
<ErrorBoundary showStackTrace={false}>
<SomeComponent />
</ErrorBoundary>
renderError
The renderError
prop lets you render a custom fallback UI. It expects a function that takes an ErrorObject
and returns a React Node.
type ErrorObject = {
error: Error,
componentStack: string,
};
renderError = (errorObject: ErrorObject) => (
<SomeAlternateComponent errorObject={errorObject} />
);
<ErrorBoundary renderError={renderError}>
<SomeComponent />
</ErrorBoundary>