Created
June 21, 2017 17:28
-
-
Save wildlyinaccurate/684a96ad048dea0df8bd7608ad978b3f to your computer and use it in GitHub Desktop.
Proof-of-concept for making React components "safe" or "optional" by catching errors during rendering.
This file contains hidden or 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
// Paste this into https://preactjs.com/repl to see it working | |
// This function takes any component, and returns a higher-order (wrapper) | |
// component. This wrapper attempts to render the wrapped component, catching | |
// any errors. | |
const safeComponent = (Component) => function WrappedComponent () { | |
// Handle both class components and stateless functional components | |
const wrappedRender = Component.prototype.render || Component | |
try { | |
// Attempt to render the wrapped component | |
return wrappedRender.apply(this, arguments) | |
} catch (e) { | |
// Wrapped component render failed; render an error message | |
return <div style="color: red">{e.message}</div> | |
} | |
} | |
class NewsPromo extends Component { | |
render({ number, throwError }) { | |
if (throwError) { | |
throw new Error(`NewsPromo #${number} blew up!`) | |
} | |
return <div>I am promo #{number}</div> | |
} | |
} | |
const StatelessNewsPromo = ({ number, throwError }) => { | |
if (throwError) { | |
throw new Error(`NewsPromo #${number} blew up!`) | |
} | |
return <div>I am promo #{number}</div> | |
} | |
export default class NewsTopStories extends Component { | |
render() { | |
const SafeNewsPromo = safeComponent(NewsPromo) | |
// To show that it works with stateless functional components too | |
// const SafeNewsPromo = safeComponent(StatelessNewsPromo) | |
return ( | |
<div> | |
<SafeNewsPromo number="1" /> | |
<SafeNewsPromo number="2" /> | |
<SafeNewsPromo number="3" throwError /> | |
<SafeNewsPromo number="4" /> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment