
Security News
Knip Hits 500 Releases with v5.62.0, Improving TypeScript Config Detection and Plugin Integrations
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.
react-error-boundaries
Advanced tools
A reusable React error boundaries component. Based on React 16.2.0.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
Effect picture:
npm install react-error-boundaries
Import:
// import all
import { ErrorBoundary, withErrorHandler, errorHandlerDecorator, FallbackView } from 'react-error-boundaries'
// import default ErrorBoundary
import ErrorBoundary from 'react-error-boundaries'
Intro:
{ error: Objec, errorInfo: Object, closeErrorModal: Function }
(Unable in production, if import you will got undefined)Use as a component container:
// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'
const App = () => {
return (
<ErrorBoundary>
<YourComponents />
</ErrorBoundary>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
And you can handle errors by providing an onError callback, and customize the FallbackComponent by providing a Component.
FallbackComponent will receive props:
// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'
function onError(error, errorInfo, props) {
// you can report Error to service here
console.error('onError:', error.message);
}
const App = () => {
return (
<ErrorBoundary onError={onError} FallbackComponent={YourFallbackView}>
<YourComponents />
</ErrorBoundary>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Use as class decorator:
// import first
import React from 'react'
import { errorHandlerDecorator } from 'react-error-boundaries'
// ES7 decorator, need babel plugin "transform-decorators-legacy"
@errorHandlerDecorator
class YourComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
contents
</div>
);
}
}
// or not use @decorator just like this:
// export default errorHandlerDecorator(YourComponent)
function onError(error, errorInfo, props) {
// you can report Error to service here
console.log('onError:', error.message);
}
ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));
You can also customize the FallbackComponent in HOC way:
// import first, FallbackView is default Fallback Component
import { withErrorHandler, FallbackView } from 'react-error-boundaries'
// customize the errorCallback
function onError(error, errorInfo, props) {
// you can report Error to service here
console.error('onError:', error.message);
}
/* example 1 */
const ComponentWithErrorBoundary = withErrorHandler(
YourFallbackComponent, // Fallback Component to display errors, to replace default FallbackView
YourComponent // Component to decorate
);
ReactDOM.render(<ComponentWithErrorBoundary onError={onError} />, document.getElementById('root'));
/* example 2 */
// customize as a ES7 decorator
const yourErrorHandlerDecorator = withErrorHandler(
YourFallbackComponent // Fallback Component to display errors, to replace default FallbackView
);
@yourErrorHandlerDecorator
class YourComponent extends React.component {
//......
}
ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));
Input i
in search input and error will throw.
# run example, auto open browser and enable hot loader
npm install
npm start
To enable it by set process.env.NODE_ENV
or process.env.ERROR_ENV
as development
, so you can disable it by setting process.env.NODE_ENV
to be production
and not set process.env.ERROR_ENV
as development
.
With webpack by setting like this to disable it:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"'
}
})
]
With config like this to enable it even in NODE_ENV is production:
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"',
ERROR_ENV: '"development"'
}
})
]
MIT
FAQs
React HOC for error boundaries.
The npm package react-error-boundaries receives a total of 121 weekly downloads. As such, react-error-boundaries popularity was classified as not popular.
We found that react-error-boundaries demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.