archetype-react-app: Add debug logger using winston (#220)

* Add more comprehensive debug logs for problem diagnosis

* Print out all configs in console scenario && add debug level

* Updated verbose & debug function

Minor changes & keep format with other console log

Linter Updates: using spread operator instead of .apply()

Update let into const

Eslint Error Fixes

* Code review

* coed review && refactoring logging.js

packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js

@@ -4,6 +4,7 @@ const archetype = require("electrode-archetype-react-app/config/archetype");
 const AppMode = archetype.AppMode;
 const Path = require("path");
 const _ = require("lodash");
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 module.exports = function (options) {
   // regex \b for word boundaries
@@ -23,7 +24,7 @@ module.exports = function (options) {
   };
 
   if (options.HotModuleReload) {
-    console.log("Just FYI: Enabling Hot Module Reload support in webpack babel loader");
+    logger.info("Enabling Hot Module Reload support in webpack babel loader");
     babelLoader.include = Path.resolve(AppMode.src.client);
   }
 

packages/electrode-archetype-react-app-dev/config/webpack/partial/dll-reference.js

@@ -10,9 +10,13 @@ const glob = require("glob");
 const webpack = require("webpack");
 const archetype = require("electrode-archetype-react-app/config/archetype");
 const Path = require("path");
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 module.exports = function (options) {
   const config = options.currentConfig;
+  logger.verbose("add-dll-references configurations", {
+    config
+  });
 
   try {
     const exists = fs.existsSync(Path.resolve(archetype.AppMode.src.client, "dll.config.js"));
@@ -27,7 +31,7 @@ module.exports = function (options) {
       };
     }
   } catch (err) {
-    console.log("add-dll-references failed", err);
+    logger.error("add-dll-references failed: %s", err);
   }
 
   return {};

packages/electrode-archetype-react-app-dev/config/webpack/partial/images.js

@@ -3,14 +3,15 @@
 const isomorphicLoader = require.resolve("isomorphic-loader");
 const optionalRequire = require("optional-require")(require);
 const _ = require("lodash");
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 function getCdnLoader(optLoader) {
   if (optLoader) {
     const resolvedOptLoader = optionalRequire.resolve(optLoader);
     if (resolvedOptLoader) {
       return resolvedOptLoader;
     }
-    console.log(`WARNING: optional CDN loader "${optLoader}" can't be resolved`);
+    logger.warn(`Optional CDN loader "${optLoader}" can't be resolved`);
   }
 
   const loader = _(["electrode-cdn-file-loader", "cdn-file-loader", "file-loader"]).find(optionalRequire.resolve);

packages/electrode-archetype-react-app-dev/config/webpack/partial/pwa.js

@@ -16,6 +16,7 @@ const optionalRequire = require("optional-require")(require);
 const swConfigPath = Path.resolve("config", "sw-config.js");
 const serverConfigPath = Path.resolve("config", "default.json");
 const mkdirp = require("mkdirp");
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 /**
  * Takes a file path and returns a webpack-compatible
@@ -77,7 +78,7 @@ module.exports = function (options) {
     return {};
   }
 
-  console.log(`Just FYI: PWA enabled with config from ${swConfigPath}`);
+  logger.info(`PWA enabled with config from ${swConfigPath}`);
 
   mkdirp.sync(Path.resolve("dist"));
 

packages/electrode-archetype-react-app-dev/config/webpack/util/generate-config.js

@@ -5,6 +5,7 @@ const WebpackConfigComposer = require("webpack-config-composer");
 const optionalRequire = require("optional-require")(require);
 const Path = require("path");
 const _ = require("lodash");
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 function generateConfig(options) {
   const composer = new WebpackConfigComposer();
@@ -29,9 +30,7 @@ function generateConfig(options) {
     config = compose();
   }
 
-  if (process.env.DUMP_WEBPACK_CONFIG) {
-    console.log(JSON.stringify(config, null, 2));
-  }
+  logger.verbose(JSON.stringify(config));
 
   return config;
 }

packages/electrode-archetype-react-app-dev/config/webpack/util/webpack-dev-reporter.js

@@ -7,6 +7,7 @@ function webpackDevReporter(reporterOptions) {
   const state = reporterOptions.state;
   const stats = reporterOptions.stats;
   const options = reporterOptions.options;
+  const logger = require("electrode-archetype-react-app/lib/logger");
 
   if (state) {
     let displayStats = (!options.quiet && options.stats !== false);
@@ -16,7 +17,7 @@ function webpackDevReporter(reporterOptions) {
     }
 
     if (displayStats) {
-      console.log(stats.toString(options.stats));
+      logger.info(stats.toString(options.stats));
     }
 
     if (!options.noInfo && !options.quiet) {
@@ -26,10 +27,10 @@ function webpackDevReporter(reporterOptions) {
       } else {
         errMsg = " but there were errors.";
       }
-      console.info(`webpack: bundle is now VALID ${errMsg}`);
+      logger.info(`webpack: bundle is now VALID ${errMsg}`);
     }
   } else {
-    console.info("webpack: bundle is now INVALID.");
+    logger.info("webpack: bundle is now INVALID.");
   }
 }
 

packages/electrode-archetype-react-app-dev/package.json

@@ -37,7 +37,6 @@
     "babel-preset-react": "^6.3.13",
     "chai": "^3.2.0",
     "chai-shallowly": "^0.9.10",
-    "chalk": "^1.1.1",
     "clean-css": "^3.4.21",
     "css-loader": "^0.26.1",
     "css-split-webpack-plugin": "^0.2.0",
@@ -115,7 +114,8 @@
     "webpack-config-composer": "^1.0.0",
     "webpack-dev-server": "^2.2.0",
     "webpack-disk-plugin": "0.0.2",
-    "webpack-stats-plugin": "^0.1.1"
+    "webpack-stats-plugin": "^0.1.1",
+    "winston": "^2.3.1"
   },
   "devDependencies": {
     "electrode-archetype-react-app": "../electrode-archetype-react-app"

packages/electrode-archetype-react-app-dev/scripts/map-isomorphic-cdn.js

@@ -1,6 +1,7 @@
 "use strict";
 
 let appDir = process.cwd();
+const logger = require("electrode-archetype-react-app/lib/logger");
 
 if (process.argv[2]) {
   appDir = process.argv[2];
@@ -22,9 +23,9 @@ const uniques = Object.keys(cdnAssets).reduce((acc, k) => {
 const paths = Object.keys(uniques);
 
 if (paths.length > 1) {
-  console.log("Error: CDN upload files has different base paths");
+  logger.error("CDN upload files has different base paths");
   paths.forEach((p) => {
-    console.log(` - "${p}"`);
+    logger.info(` - "${p}"`);
   });
   process.exit(1);
 }
@@ -34,9 +35,9 @@ if (paths.length === 1) {
   pp += pp.endsWith("/") ? "" : "/";
   isoConfig.output.publicPath = pp;
   fs.writeFileSync(isoConfigFile, JSON.stringify(isoConfig, null, 2));
-  console.log(`\n===\nISOMORPHIC loader config publicPath updated to CDN path ${pp}\n`);
+  logger.info(`\n===\nISOMORPHIC loader config publicPath updated to CDN path ${pp}\n`);
 } else {
-  console.log(`No CDN path found from CDN assets file ${cdnAssetsFile}`);
+  logger.info(`No CDN path found from CDN assets file ${cdnAssetsFile}`);
 }
 
 process.exit(0);

packages/electrode-archetype-react-app/arch-gulpfile.js

@@ -9,7 +9,6 @@ assert(!archetype.noDev, "dev archetype is missing - development & build tasks n
 const Path = require("path");
 const devRequire = archetype.devRequire;
 const gulpHelper = devRequire("electrode-gulp-helper");
-const chalk = devRequire("chalk");
 const shell = gulpHelper.shell;
 const config = archetype.config;
 const mkdirp = devRequire("mkdirp");
@@ -20,6 +19,8 @@ const filter = devRequire("gulp-filter");
 const penthouse = archetype.devRequire("penthouse");
 const CleanCSS = archetype.devRequire("clean-css");
 
+const logger = require("./lib/logger");
+
 function setupPath() {
   const nmBin = Path.join("node_modules", ".bin");
   gulpHelper.envPath.addToFront(Path.resolve(nmBin));
@@ -57,7 +58,7 @@ function createGitIgnoreDir(dir, comment) {
   try {
     mkdirp.sync(dirFP);
   } catch (e) {
-    console.log("mkdir", e);
+    logger.info("mkdir", e);
   }
 
   const gitIgnore = Path.join(dirFP, ".gitignore");
@@ -246,7 +247,7 @@ function makeTasks(gulp) {
   const makeBabelRc = (destDir, rcFile) => {
     const fn = Path.resolve(destDir, ".babelrc");
     if (!Fs.existsSync(fn)) {
-      console.log(chalk.green(`INFO: generating ${fn} for you - please commit it.`));
+      logger.info(`Generating ${fn} for you - please commit it.`);
       const rc = JSON.stringify({
         extends: `${Path.join(archetype.devPkg.name, "config", "babel", rcFile)}`
       }, null, 2);
@@ -340,11 +341,11 @@ function makeTasks(gulp) {
 
     ".check.top.level.babelrc": () => {
       if (AppMode.isSrc && archetype.checkUserBabelRc() !== false) {
-        console.log(chalk.yellow(`
-INFO: You are using src for client & server, archetype will ignore your top level .babelrc
-INFO: Please remove your top level .babelrc file if you have no other use of it.
-INFO: Individual .babelrc files were generated for you in src/client and src/server
-`));
+        logger.warn(`
+You are using src for client & server, archetype will ignore your top level .babelrc
+Please remove your top level .babelrc file if you have no other use of it.
+Individual .babelrc files were generated for you in src/client and src/server
+`);
       }
     },
 

packages/electrode-archetype-react-app/lib/app-mode.js

@@ -2,6 +2,7 @@
 
 const Path = require("path");
 const Fs = require("fs");
+const logger = require("./logger");
 
 function makeAppMode(prodDir, reactLib) {
   const client = "client";
@@ -26,7 +27,7 @@ function makeAppMode(prodDir, reactLib) {
   const saved = loadSavedAppMode();
 
   if (!srcDir) {
-    console.log(`Just FYI: There's a new src/lib mode that doesn't need babel-register.`);
+    logger.info(`There's a new src/lib mode that doesn't need babel-register.`);
   }
 
   reactLib = reactLib || "react";

packages/electrode-archetype-react-app/lib/console-logger.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function makeConsoleLogger() {
+  const levels = ["info", "warn", "error", "debug", "verbose"];
+
+  function log(level, params) {
+    const args = Array.prototype.slice.call(params);
+    args.unshift(`${level.toUpperCase()}:`);
+
+    if (console[level]) {
+      console[level].apply(console, args); // eslint-disable-line
+    } else {
+      console.log.apply(console, args); // eslint-disable-line
+    }
+  }
+
+  return levels.reduce((a, l) => {
+    a[l] = function () {
+      log(l, arguments);
+    };
+    return a;
+  }, {});
+}
+
+module.exports = makeConsoleLogger();

packages/electrode-archetype-react-app/lib/logger.js

@@ -0,0 +1,6 @@
+const archetype = require("../config/archetype");
+const devRequire = archetype.devRequire;
+
+const winstonLogger = require("./winston-logger");
+
+module.exports = devRequire ? winstonLogger(devRequire("winston")) : require("./console-logger");

packages/electrode-archetype-react-app/lib/winston-logger.js

@@ -0,0 +1,25 @@
+"use strict";
+
+const makeWinstonLogger = (winston) => {
+  return new (winston.Logger)({
+    exceptionHandlers: [
+      new (winston.transports.File)({
+        filename: "archetype-exceptions.log"
+      })
+    ],
+    transports: [
+      new (winston.transports.Console)({
+        level: "info",
+        colorize: true,
+        prettyPrint: true
+      }),
+      new (winston.transports.File)({
+        name: "archetype-debug-file",
+        filename: "archetype-debug.log",
+        level: "debug"
+      })
+    ]
+  });
+};
+
+module.exports = makeWinstonLogger;

packages/electrode-archetype-react-app/package.json

@@ -45,7 +45,8 @@
     "eslint-config-walmart": "^1.1.1",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-filenames": "^1.1.0",
-    "eslint-plugin-react": "^6.5.0"
+    "eslint-plugin-react": "^6.5.0",
+    "winston": "^2.3.1"
   },
   "engines": {
     "node": "^4.4.6 || ^6.2.1 || ^7.x.x",

packages/electrode-archetype-react-app/support/index.js

@@ -7,6 +7,7 @@ const babelPolyfill = require("babel-polyfill");
 const archetype = require("../config/archetype");
 const AppMode = archetype.AppMode;
 const Path = require("path");
+const logger = require("../lib/logger");
 
 const support = {
   cssModuleHook: (options) => {
@@ -54,7 +55,7 @@ if (AppMode.isSrc) {
     };
     AppMode.setEnv(guessAppSrcDir());
   }
-  console.log(`Just FYI: ${AppMode.envKey} set to`, AppMode.getEnv());
+  logger.info(`${AppMode.envKey} set to`, AppMode.getEnv());
 }
 
 /* eslint max-statements: 0 complexity: 0 */
@@ -80,9 +81,9 @@ support.load = function (options, callback) {
       extensions: [".es6", ".es", ".jsx", ".js"]
     }, options.babelRegister || {});
 
-    console.log(`Just FYI: installing babel-register for runtime transpilation`
+    logger.info(`Installing babel-register for runtime transpilation`
       + ` files (extensions: ${regOptions.extensions}).`);
-    console.log(`Just FYI: the transpilation only occurs the first time you load a file.`);
+    logger.info(`The transpilation only occurs the first time you load a file.`);
     support.babelRegister(regOptions);
   }