HOC for error boundaries

ServiceInfo.tsx

<TabContent>
  <TabPaneWithErrorBoundary message={this.errorBoundaryMessage('Workloads')}>
    {(Object.keys(workloads).length > 0 || this.props.serviceDetails.istioSidecar) && (
      <ServiceInfoWorkload workloads={workloads} namespace={this.props.namespace} />
    )}
  </TabPaneWithErrorBoundary>
  <TabPaneWithErrorBoundary eventKey={'sources'} message={this.errorBoundaryMessage('Sources')}>
    <ServiceInfoRoutes dependencies={dependencies} />
  </TabPaneWithErrorBoundary>
  <TabPaneWithErrorBoundary
    eventKey={'virtualservices'}
    message={this.errorBoundaryMessage('Virtual Services')}
  >
    {this.renderImportantThings()}
  </TabPaneWithErrorBoundary>
  <TabPaneWithErrorBoundary
    eventKey={'destinationrules'}
    message={this.errorBoundaryMessage('Destination Rules')}
  >
    <AnotherComponent />
  </TabPaneWithErrorBoundary>
</TabContent>

WithErrorBoundary.tsx

import * as React from 'react';
import { Alert, TabPane } from 'patternfly-react';
import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';

interface WithErrorBoundaryProps {
  message: string;
}

const withErrorBoundary = <P extends object>(Component: React.ComponentType<P>) => {
  return class extends React.Component<P & WithErrorBoundaryProps> {
    wrongFormatMessage() {
      const { message, ...props} = this.props as WithErrorBoundaryProps;
      const displayingMessage = message || 'Something went wrong rending this component';
      return (
        <div className="card-pf-body">
          <Alert type="warning">{displayingMessage}</Alert>
        </div>
      );
    }

    render() {
      return (
        <Component {...this.props}>
          <ErrorBoundary fallBackComponent={this.wrongFormatMessage()}>
            {this.props.children}
          </ErrorBoundary>
        </Component>
      );
    }
  };
};

const TabPaneWithErrorBoundary = withErrorBoundary(TabPane);
export default TabPaneWithErrorBoundary;

What do you thinbk about ??

import * as React from 'react';
import PropTypes from 'prop-types';
import { Alert, TabPane } from 'patternfly-react';
import ErrorBoundary from './ErrorBoundary';

const propTypes = {
  /** content inside the ErrorBoundary */
  children: PropTypes.any,
  /** Message */
  message: PropTypes.string,
  /** Sets the base component to render. defaults to TabPane */
  component: PropTypes.object
};

const defaultProps = {
  children: null,
  message: 'Something went wrong rending this component',
  component: TabPane
};

const TabPaneWithErrorBoundary = ({children, component: Component = TabPane, message, ...props}) => (
  <Component {...props}>
    <ErrorBoundary fallBackComponent={
      <div className="card-pf-body">
        <Alert type="warning">message</Alert>
      </div>
    }>
      {children}
    </ErrorBoundary>
  </Component>

);

TabPaneWithErrorBoundary.propTypes = propTypes;
TabPaneWithErrorBoundary.defaultProps = defaultProps;

export default TabPaneWithErrorBoundary;