react-error-boundary-material-ui v1.0.0
This project was bootstrapped with Create React App.
git clone https://github.com/RatneshChauhan/react-error-boundary.git
Title
React Error Boundary
Description
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”. 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.
How did I develop this?
Create React App with Typescript
create-react-app error-boundaries --scripts-version=react-scripts-ts
cd error-boundaries/
npm install
npm start
Install Material-UI because we want things to be pretty
Material-UI is available as an npm package.
npm install material-ui
npm install @types/material-ui
How it works
When error occurs during rendering, in lifecycle methods, and in constructors of the whole tree below them, a material-ui error dialog appears to the end user
Note
Fall back UI will be visible in Production mode. In Develoment mode, you will see the react error overlay, close it to see the fall back UI
Published as npm package
This is available as an npm package. Run npm i react-error-boundary-material-ui to install it.
Author
Ratnesh Chauhan, Full Stack Developer
Note: Everything is tested on Windows environment
License
The MIT License (MIT)
Copyright (c) 2018 Ratnesh Chauhan
Permission is hereby granted, free of charge, to any person obtaining a copy of this application and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.
6 years ago