import React from 'react';
import { ErrorBoundary as ErrBound } from 'react-error-boundary';

const ErrorBoundary = ({ children }) => {
  return (
    <ErrBound
      FallbackComponent={({ error }) => (
        <div role="alert">
          <p className="text-color-critical">Something went wrong:</p>

          <pre className="text-color-subtle text-sm">{error.message}</pre>
        </div>
      )}
    >
      {children}
    </ErrBound>
  );
};

ErrorBoundary.propTypes = {};

export { ErrorBoundary };