{"size": 2669, "ext": "js", "max_stars_repo_path": "src/routes/Lobby/ErrorContainer/index.js", "max_stars_repo_name": "feds01/durak-cards-client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/routes/Lobby/ErrorContainer/index.js", "max_issues_repo_name": "feds01/durak-cards-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/routes/Lobby/ErrorContainer/index.js", "max_forks_repo_name": "feds01/durak-cards-client", "max_forks_repo_forks_event_min_datetime": "2021-01-22T21:20:44.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-22T21:20:44.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 33.3625, "max_line_length": 118, "alphanum_fraction": 0.5425252904}
import React from 'react';
import styles from './index.module.scss';
import Divider from "@material-ui/core/Divider";
import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';

class ErrorContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {hasError: false, errorString: ""};

        this.handleErrorEvent = this.handleErrorEvent.bind(this);
    }

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return {hasError: true};
    }

    handleErrorEvent(event) {

        // ignore ResizeObserver loop limit exceeded
        // this is ok in several scenarios according to
        // https://github.com/WICG/resize-observer/issues/38
        if (event.message === "Script error." || event.message === 'ResizeObserver loop limit exceeded') { // @Cleanup
            return;
        }

        this.setState({
            hasError: true,
            errorString: btoa(event.error?.stack ? event.error.stack : JSON.stringify(event)),
        });
    }

    componentDidMount() {
        window.addEventListener("error", this.handleErrorEvent);
    }

    componentWillUnmount() {
        window.removeEventListener("error", this.handleErrorEvent);
    }

    componentDidCatch(error, errorInfo) {
        this.setState({
            errorString: btoa(error.stack ? error.stack : error),
        });
    }

    render() {
        const {errorString, hasError} = this.state;

        if (hasError) {
            return (
                <div className={styles.Error}>
                    <div style={{
                        margin: "2em"
                    }}>
                        <div className={styles.Title}>
                            <SentimentVeryDissatisfiedIcon style={{fontSize: 40}}/>
                            <h1>Something went wrong!</h1>
                        </div>
                        <h2>Please help out and email or send me this bug string.</h2>
                        <Divider/>
                        <b className={styles.ErrorMessage}>{errorString}</b>
                        <Divider/>
                        <p>
                            Version: Durachok@{process.env.REACT_APP_VERSION}/{process.env.REACT_APP_DEV_VERSION} on
                            branch {process.env.REACT_APP_VERSION_BRANCH}<br/>
                            Running: shared@{process.env.REACT_APP_DEV_SHARED_VERSION}
                        </p>
                    </div>
                </div>
            )
        }

        return this.props.children;
    }
}

export default ErrorContainer;
