React Recipe: Components Error Handling

This article is about the Errors Handling in React Components using TypeScript

Not handled error in any part of the UI could crash the whole application.

Error Boundaries only catch errors in the components below them in the tree.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.

Catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

Use JS error reporting services, so that you can learn about unhandled exceptions as they happen in production, and fix them.

---- ### Error Handling Prior to React v16.0 I've used quite straightforward way to figure out what went wrong, or why I see `<!-- react-empty: xxx -->` instead of my component: ```typescript render() { try { return ( <div className="my-component"> <p>{props.message}</p> </div> ); } catch (e) { // tslint:disable-next-line console.error('My Component Error', e); return null; } } ``` **Note:** If you're facing with `TypeError` when used `try / catch` statement in `render` just return `null`. ---- ### Error Handling Since React v16.0: <div class="bs-callout bs-callout-info"> As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. </div> ```typescript //... componentDidCatch(error: Error, info: ErrorInfo) { // display fallback UI this.setState(() => { return { error: error }; }); console.error('Caught an error: ', error); } render() { if (this.state.error ) { return <h2>{'Caught an error! ' + this.state.error}</h2>; } return ( <div className="my-component"> <p>{props.message}</p> </div> ); } ``` **Note:** `info` is an object with `componentStack` key. So in case of error instead of your component you will something like following message in UI: ```html Caught an error! Error: Testing Error Boundaries ``` <div class="bs-callout bs-callout-warning"> Error boundaries DO NOT catch errors inside event handlers. </div> ### Error Boundary as a Component: We could write ErrorBoundary component once and use it wherever we need ^_^ ```typescript export class ErrorBoundary extends Component<{children?: any}, {error: Error | null}> { state = { error: null } componentDidCatch(error: Error, info: ErrorInfo) { // display fallback UI this.setState(() => { return { error: error }; }); // tslint:disable-next-line console.error('Caught an error: ', error); } render() { if (this.state.error) { return <h2>{'Caught an error! ' + this.state.error}</h2>; } return this.props.children; } } ``` So now we could use it in my component `render` as well as in other components: ```typescript //... render() { return ( <ErrorBoundary> <div className="my-component"> <p>{props.message}</p> </div> </ErrorBoundary> ); } ``` ---- ### Conclusion React Error Boundaries is a step forward into more controlled way to build a solid applications. It allows not only to allocate the problem fast, but to degrade gracefully as well. ---- ## see Also * [React Docs - Error Boundaries](https://reactjs.org/docs/error-boundaries.html) * [Sneak Peek: Beyond React 16](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) * [Redux - Ecosystem](http://redux.js.org/docs/introduction/Ecosystem.html) * [@angular-redux/store](https://github.com/angular-redux/store) * [Github - Angular CLI](https://github.com/angular/angular-cli)