React error handling example

index.jsx

import React from 'react';

/* обязательно ознакомьтесь с документацией https://ru.reactjs.org/docs/error-boundaries.html */

/* к сожалению сейчас hooks не поддерживают работу с методом React Lifecycle API: componentDidCatch */
export const withErrorBoundaries = (Wrapped) => {
  class ErrorBoundary extends React.PureComponent {
    /* укажите уникальное название компонента, для упрощения отладки в DevTools */
    static displayName = `ComponentWithErrorBoundary(${Wrapped.name || 'Wrapped'})`;

    componentDidCatch(error, errorInfo) {
      middlewareErrorBoundary(error, errorInfo); // ваш уникальный middleware для сбора и обработки ошибок
    }

    renderComponent = (context) => <Wrapped {...this.props} {...context} />;

    render() {
      return (
        <Consumer>
          {/* передаем функцию без вызова по гайду */}
          {this.renderComponent}
        </Consumer>
      );
    }
  }
  
  return ErrorBoundary;
}