Last active
November 22, 2020 00:46
-
-
Save morajabi/55eb6ddffa063e51638c97a1ad8d1d01 to your computer and use it in GitHub Desktop.
React 16 Error Boundary component - for electron app (https://there.pm)
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
import React, { Component } from 'react' | |
class ErrorBoundary extends Component { | |
state = { | |
error: null, | |
hasError: false, | |
showError: false, | |
} | |
componentDidCatch(e) { | |
this.setState({ hasError: true, error: e.message }) | |
} | |
render() { | |
return this.state.hasError ? ( | |
<div> | |
<h1>Uh, there was an error 😞</h1> | |
<p> | |
Engineering team already notified of the catch, but you can go ahead | |
and chat with us. | |
</p> | |
{!this.state.showError && ( | |
<button onClick={() => this.setState({ showError: true })}> | |
Show error → | |
</button> | |
)} | |
{this.state.showError && <pre><code>{this.state.error}</code></pre>} | |
</div> | |
) : ( | |
this.props.children | |
) | |
} | |
} | |
export default ErrorBoundary | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I removed styling to make it focused just on the error handling and
componentDidCatch
usage.