My problem briefly: I want somehow gather states of buggy components using ErrorBoundary.

I use typical ErrorBoundary component in the project. Something like this:

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

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

  componentDidCatch(error, errorInfo) {
    let errorLogger = new ErrorLoger();

    errorLogger.sendError(error.message, errorInfo, this.props.children.props);
  }

  render() {
    if (this.state.hasError) {
      return (<p>Something went wrong. Please try again later</p>);
    }
    return this.props.children;
  }

  export default ErrorBoundary;

ErrorLoger is a class I use to send errors to external service.

I wrap my functional and class components around the project like this:

<ErrorBoundary>
  <Footer/>
</ErrorBoundary>

When an error is caught, I get info about the buggy component and I can find the exact line, that broke the render.

But for come errors that I can't reproduce locally it would be crucial to log state or even some key properties, but I can't figure out how to implement this.