* 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>
 | 
						|
    );
 | 
						|
  }
 | 
						|
 | 
						|
}
 |