/* eslint-disable import/no-unresolved */
import { Component } from 'react';
import * as Sentry from '@sentry/browser';

import Alert from '../Alert';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

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

    Sentry.withScope((scope) => {
      scope.setExtras(info);
      Sentry.captureException(error);
    });
  }

  render() {
    if (this.state.error) {
      return (
        <Alert type="error" variant="icon">
          Oops! We encountered an error, please try reload this application.
        </Alert>
      );
    }

    // eslint-disable-next-line react/prop-types
    return this.props.children;
  }
}
