Created
February 3, 2021 09:54
-
-
Save caelinsutch/2789b50931af28ffd496d4c146979488 to your computer and use it in GitHub Desktop.
Buggy Component with Error Boundary
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class ErrorBoundary extends Component { | |
| state = { | |
| errorMessage: '' | |
| } | |
| static getDerivedStateFromError(error) { | |
| return {errorMessage: error.toString()} | |
| } | |
| componentDidCatch(error, info) { | |
| this.logErrorToServices(error.toString(), info.componentStack) | |
| } | |
| // A fake logging service 😬 | |
| logErrorToServices = console.log | |
| render() { | |
| if (this.state.errorMessage) { | |
| return ( | |
| <p> | |
| {this.state.errorMessage} | |
| </p> | |
| ) | |
| } | |
| return this.props.children | |
| } | |
| } | |
| class BuggyCounter extends Component { | |
| // nothing was modified :P | |
| } | |
| function App() { | |
| refreshPage = () => history.go(0) | |
| return ( | |
| <div> | |
| <ErrorBoundary> | |
| <BuggyCounter /> | |
| </ErrorBoundary> | |
| <hr /> | |
| <button onClick={this.refreshPage}> | |
| Refresh Page | |
| </button> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment