application/error-boundaries/top-level.js

import React, { Component } from 'react';

import {Row, Col} from '../components/flexbox';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import {Link} from 'react-router';

class TopLevelErrorBoundary extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hasError: false,
            error: false
        };
    }

    static getDerivedStateFromError(error) {
        return {hasError: true};
    }

    componentDidCatch(error, info) {
        console.log(error, info);
        this.setState({error: error});
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="opps-root">
                    <Row>
                        <Col offsetXs={2} xs={8}>
                            <Paper className='padded'>
                                <h1 className='first'>Well, that was unexpected...</h1>

                                <section className='clear-bottom'>
                                    <p>Sorry, something went totally off the rails. Please try <a href="/ceo">reloading CEO</a>.</p>
                                    <p>If the problem persists, <Link to='/ceo/support'>please contact support</Link>.</p>
                                </section>
                                <Divider/>
                                <section>
                                    <p>When contacting support, please let them know what you were doing and this is the error you encountered:</p>
                                    <pre>
                                        {this.state.error.message}
                                    </pre>
                                </section>
                            </Paper>
                        </Col>
                    </Row>
                </div>
            );
        }

        return this.props.children;
    }
}

export default TopLevelErrorBoundary;