* Do not crash the whole UI when loading an invalid column * Add error boundary component to catch Web UI crashes * Add stack trace on supported browsers * Add component stack info, pre-format everything for github * Make “Reload” a clickable link that calls window.location.reload() * Remove elephant friend from error boundary, make title stand out more * Simplify error boundary to only a graphic
		
			
				
	
	
		
			40 lines
		
	
	
		
			734 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			40 lines
		
	
	
		
			734 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import React from 'react';
 | |
| import PropTypes from 'prop-types';
 | |
| import illustration from '../../images/elephant_ui_disappointed.svg';
 | |
| 
 | |
| export default class ErrorBoundary extends React.PureComponent {
 | |
| 
 | |
|   static propTypes = {
 | |
|     children: PropTypes.node,
 | |
|   };
 | |
| 
 | |
|   state = {
 | |
|     hasError: false,
 | |
|     stackTrace: undefined,
 | |
|     componentStack: undefined,
 | |
|   }
 | |
| 
 | |
|   componentDidCatch(error, info) {
 | |
|     this.setState({
 | |
|       hasError: true,
 | |
|       stackTrace: error.stack,
 | |
|       componentStack: info && info.componentStack,
 | |
|     });
 | |
|   }
 | |
| 
 | |
|   render() {
 | |
|     const { hasError } = this.state;
 | |
| 
 | |
|     if (!hasError) {
 | |
|       return this.props.children;
 | |
|     }
 | |
| 
 | |
|     return (
 | |
|       <div>
 | |
|         <img src={illustration} alt='' />
 | |
|       </div>
 | |
|     );
 | |
|   }
 | |
| 
 | |
| }
 |