LoggingHOC.js

import React from "react";

export default WrapperComponent => {
  const _logType = {
    warn: "warn",
    error: "error",
    info: "info"
  };

  let _logging = {
    info: function(logTypeName, filePath, description) {
      // Console.info, Calling API to log it, winston-client, loglevel library or your custom code
    },
    warn: function(logTypeName, filePath, description) {
      // Console.warn, Calling API to log it, winston-client, loglevel library or your custom code
    },
    error: function(logTypeName, filePath, description) {
      // Console.error, Calling API to log it, winston-client, loglevel library or your custom code
    }
  };

  let logging = function(logType = "info", logTypeName, filePath, description) {
    switch (logType.toLowerCase()) {
      case _logType.info:
        _logging.info(logTypeName, filePath, description);
        break;

      case _logType.warn:
        _logging.warn(logTypeName, filePath, description);
        break;

      case _logType.error:
        _logging.error(logTypeName, filePath, description);
        break;

      default:
        break;
    }
  };

  return function(props) {
    return (
      <WrapperComponent
        {...props}
        logging={{ log: logging, type: { ..._logType } }}
      />
    );
  };
};

How to use it?

import React from "react";
import withLogging from "../HOC/loggingHOC";

class Home extends React.PureComponent {
render() {
const { logging: {log, type} } = this.props;

log(type.warn, 'TypeWarn', 'app/components/Usercard.jsx', 'This Warning to be Handled bla bla bla')
return <span>Hello World!</span>;
}
}

export default withLogging(Home);