chore(logger): improve build error logging

Author: adamdbradley

bin/ion-dev.css

@@ -157,7 +157,8 @@
   color: #969896;
 }
 
-#ion-diagnostics .ion-diagnostics-system-info {
+#ion-diagnostics-system-info {
+  padding-bottom: 20px;
   font-size: 10px;
   color: #999;
 }

bin/ion-dev.js

@@ -1,3 +1,4 @@
+window.IonicDevServerConfig = window.IonicDevServerConfig || {};
 window.IonicDevServer = {
   start: function() {
     this.msgQueue = [];
@@ -6,19 +7,30 @@ window.IonicDevServer = {
     this.consoleError = console.error;
     this.consoleWarn = console.warn;
 
-    if (IonicDevServerConfig && IonicDevServerConfig.sendConsoleLogs) {
+    IonicDevServerConfig.systemInfo.push('Navigator Platform: ' + window.navigator.platform);
+    IonicDevServerConfig.systemInfo.push('User Agent: ' + window.navigator.userAgent);
+
+    if (IonicDevServerConfig.sendConsoleLogs) {
       this.patchConsole();
     }
 
-    console.log('dev server enabled');
-
     this.openConnection();
 
     this.bindKeyboardEvents();
 
     document.addEventListener("DOMContentLoaded", IonicDevServer.domReady);
   },
 
+  domReady: function() {
+    document.removeEventListener("DOMContentLoaded", IonicDevServer.domReady);
+    var diagnosticsEle = document.getElementById('ion-diagnostics');
+    if (diagnosticsEle) {
+      IonicDevServer.buildStatus('error');
+    } else {
+      IonicDevServer.buildStatus('success');
+    }
+  },
+
   handleError: function(err) {
     var self = this;
 
@@ -291,15 +303,18 @@ window.IonicDevServer = {
     iconLink.type = 'image/png';
     iconLink.href = IonicDevServer[status + 'Icon'];
     document.head.appendChild(iconLink);
-  },
 
-  domReady: function() {
-    document.removeEventListener("DOMContentLoaded", IonicDevServer.domReady);
-    var diagnosticsEle = document.getElementById('ion-diagnostics');
-    if (diagnosticsEle) {
-      IonicDevServer.buildStatus('error');
-    } else {
-      IonicDevServer.buildStatus('success');
+    if (status === 'error') {
+      var diagnosticsEle = document.getElementById('ion-diagnostics');
+      if (diagnosticsEle) {
+        var systemInfoEle = diagnosticsEle.querySelector('#ion-diagnostics-system-info');
+        if (!systemInfoEle) {
+          systemInfoEle = document.createElement('pre');
+          systemInfoEle.id = 'ion-diagnostics-system-info';
+          systemInfoEle.innerHTML = IonicDevServerConfig.systemInfo.join('\n');
+          diagnosticsEle.appendChild(systemInfoEle);
+        }
+      }
     }
   },
 

package.json

@@ -40,6 +40,7 @@
     "fs-extra": "0.30.0",
     "json-loader": "^0.5.4",
     "node-sass": "3.10.1",
+    "os-name": "^2.0.1",
     "postcss": "5.2.0",
     "proxy-middleware": "^0.15.0",
     "rollup": "0.36.3",

src/build.ts

@@ -118,7 +118,7 @@ function buildDev(context: BuildContext) {
 
 export function buildUpdate(event: string, filePath: string, context: BuildContext) {
   return new Promise(resolve => {
-    const logger = new Logger('build update');
+    const logger = new Logger('build');
 
     buildUpdateId++;
     emit(EventType.BuildUpdateStarted, buildUpdateId);
@@ -150,8 +150,7 @@ export function buildUpdate(event: string, filePath: string, context: BuildConte
           lintUpdate(event, filePath, context);
         }
 
-        Logger.newLine();
-        logger.ready('green', true);
+        logger.finish('green', true);
         Logger.newLine();
 
         // we did it!

src/declarations.d.ts

@@ -1,5 +1,6 @@
 declare module 'autoprefixer';
 declare module 'mime-types';
+declare module 'os-name';
 declare module 'proxy-middleware';
 declare module 'rollup-pluginutils';
 declare module 'rollup';

src/dev-server/http-server.ts

@@ -64,9 +64,7 @@ function serveIndex(req: express.Request, res: express.Response)  {
       indexHtml = injectLiveReloadScript(indexHtml, config.host, config.liveReloadPort);
     }
 
-    if (config.useNotifier) {
-      indexHtml = injectNotificationScript(indexHtml, config.notifyOnConsoleLog, config.notificationPort);
-    }
+    indexHtml = injectNotificationScript(config.rootDir, indexHtml, config.notifyOnConsoleLog, config.notificationPort);
 
     indexHtml = injectDiagnosticsHtml(config.buildDir, indexHtml);
 

src/dev-server/injector.ts

@@ -1,12 +1,12 @@
-import { getAppScriptsVersion } from '../util/logger';
+import { getAppScriptsVersion, getSystemInfo } from '../util/helpers';
 import { LOGGER_DIR } from './serve-config';
 
 
 const LOGGER_HEADER = '<!-- Ionic Dev Server: Injected Logger Script -->';
 
-export function injectNotificationScript(content: any, notifyOnConsoleLog: boolean, notificationPort: Number): any {
+export function injectNotificationScript(rootDir: string, content: any, notifyOnConsoleLog: boolean, notificationPort: Number): any {
   let contentStr = content.toString();
-  const consoleLogScript = getConsoleLoggerScript(notifyOnConsoleLog, notificationPort);
+  const consoleLogScript = getDevLoggerScript(rootDir, notifyOnConsoleLog, notificationPort);
 
   if (contentStr.indexOf(LOGGER_HEADER) > -1) {
     // already added script somehow
@@ -26,12 +26,13 @@ export function injectNotificationScript(content: any, notifyOnConsoleLog: boole
   return contentStr;
 }
 
-function getConsoleLoggerScript(notifyOnConsoleLog: boolean, notificationPort: Number) {
+function getDevLoggerScript(rootDir: string, notifyOnConsoleLog: boolean, notificationPort: Number) {
   const appScriptsVersion = getAppScriptsVersion();
   const ionDevServer = JSON.stringify({
     sendConsoleLogs: notifyOnConsoleLog,
     wsPort: notificationPort,
-    appScriptsVersion: appScriptsVersion
+    appScriptsVersion: appScriptsVersion,
+    systemInfo: getSystemInfo(rootDir)
   });
 
   return `

src/dev-server/serve-config.ts

@@ -1,6 +1,7 @@
 export interface ServeConfig {
   httpPort: number;
   host: string;
+  rootDir: string;
   wwwDir: string;
   buildDir: string;
   launchBrowser: boolean;
@@ -9,7 +10,6 @@ export interface ServeConfig {
   useLiveReload: boolean;
   liveReloadPort: Number;
   notificationPort: Number;
-  useNotifier: boolean;
   useServerLogs: boolean;
   notifyOnConsoleLog: boolean;
   useProxy: boolean;

src/index.ts

@@ -14,13 +14,13 @@ export * from './util/config';
 export * from './util/helpers';
 export * from './util/interfaces';
 
-import { Logger, getAppScriptsVersion } from './util/logger';
-import * as chalk from 'chalk';
+import { getAppScriptsVersion } from './util/helpers';
+import { Logger } from './util/logger';
 
 
 export function run(task: string) {
   try {
-    Logger.info(chalk.cyan(`ionic-app-scripts ${getAppScriptsVersion()}`));
+    Logger.info(`ionic-app-scripts ${getAppScriptsVersion()}`, 'cyan');
   } catch (e) {}
 
   try {

src/serve.ts

@@ -2,7 +2,6 @@ import { BuildContext } from './util/interfaces';
 import { generateContext, getConfigValue, hasConfigValue } from './util/config';
 import { Logger } from './util/logger';
 import { watch } from './watch';
-import * as chalk from 'chalk';
 import open from './util/open';
 import { createNotificationServer } from './dev-server/notification-server';
 import { createHttpServer } from './dev-server/http-server';
@@ -21,6 +20,7 @@ export function serve(context?: BuildContext) {
   const config: ServeConfig = {
     httpPort: getHttpServerPort(context),
     host: getHttpServerHost(context),
+    rootDir: context.rootDir,
     wwwDir: context.wwwDir,
     buildDir: context.buildDir,
     launchBrowser: launchBrowser(context),
@@ -30,7 +30,6 @@ export function serve(context?: BuildContext) {
     liveReloadPort: getLiveReloadServerPort(context),
     notificationPort: getNotificationPort(context),
     useServerLogs: useServerLogs(context),
-    useNotifier: true,
     useProxy: useProxy(context),
     notifyOnConsoleLog: sendClientConsoleLogs(context)
   };
@@ -59,7 +58,8 @@ function onReady(config: ServeConfig, context: BuildContext) {
 
     open(openOptions.join(''), browserToLaunch(context));
   }
-  Logger.info(chalk.green(`dev server running: http://${config.host}:${config.httpPort}/`));
+  Logger.info(`dev server running: http://${config.host}:${config.httpPort}/`, 'green', true);
+  Logger.newLine();
 }
 
 function getHttpServerPort(context: BuildContext) {

src/util/helpers.ts

@@ -1,10 +1,72 @@
 import { BuildContext } from './interfaces';
-import { readFile, writeFile } from 'fs-extra';
+import { readFile, readJsonSync, writeFile } from 'fs-extra';
 import { BuildError } from './logger';
 import { basename, dirname, extname, join } from 'path';
+import * as osName from 'os-name';
 
 let _context: BuildContext;
 
+
+
+let cachedAppScriptsPackageJson: any;
+export function getAppScriptsPackageJson() {
+  if (!cachedAppScriptsPackageJson) {
+    try {
+      cachedAppScriptsPackageJson = readJsonSync(join(__dirname, '..', '..', 'package.json'));
+    } catch (e) {}
+  }
+  return cachedAppScriptsPackageJson;
+}
+
+
+export function getAppScriptsVersion() {
+  const appScriptsPackageJson = getAppScriptsPackageJson();
+  return (appScriptsPackageJson && appScriptsPackageJson.version) ? appScriptsPackageJson.version : '';
+}
+
+function getUserPackageJson(userRootDir: string) {
+  try {
+    return readJsonSync(join(userRootDir, 'package.json'));
+  } catch (e) {}
+  return null;
+}
+
+export function getSystemInfo(userRootDir: string) {
+  const d: string[] = [];
+
+  let ionicAppScripts = getAppScriptsVersion();
+  let ionicFramework: string = null;
+  let ionicNative: string = null;
+  let angularCore: string = null;
+  let angularCompilerCli: string = null;
+
+  try {
+    const userPackageJson = getUserPackageJson(userRootDir);
+    if (userPackageJson) {
+      const userDependencies = userPackageJson.dependencies;
+      if (userDependencies) {
+        ionicFramework = userDependencies['ionic-angular'];
+        ionicNative = userDependencies['ionic-native'];
+        angularCore = userDependencies['@angular/core'];
+        angularCompilerCli = userDependencies['@angular/compiler-cli'];
+      }
+    }
+  } catch (e) {}
+
+  d.push(`Ionic Framework: ${ionicFramework}`);
+  if (ionicNative) {
+    d.push(`Ionic Native: ${ionicNative}`);
+  }
+  d.push(`Ionic App Scripts: ${ionicAppScripts}`);
+  d.push(`Angular Core: ${angularCore}`);
+  d.push(`Angular Compiler CLI: ${angularCompilerCli}`);
+  d.push(`Node: ${process.version.replace('v', '')}`);
+  d.push(`OS Platform: ${osName()}`);
+
+  return d;
+}
+
+
 export const objectAssign = (Object.assign) ? Object.assign : function (target: any, source: any) {
   const output = Object(target);
 

src/util/logger-diagnostics.ts

@@ -1,8 +1,8 @@
 import { BuildContext } from './interfaces';
 import { Diagnostic, Logger, PrintLine } from './logger';
+import { titleCase } from './helpers';
 import { join } from 'path';
 import { readFileSync, unlinkSync, writeFileSync } from 'fs';
-import { titleCase } from './helpers';
 import * as chalk from 'chalk';
 
 
@@ -183,10 +183,6 @@ export function getDiagnosticsHtmlContent(buildDir: string) {
     }
   }
 
-  diagnosticsHtml.push(`<pre class="ion-diagnostics-system-info">`);
-  diagnosticsHtml.push(`${getSystemInfo().join('\n')}`);
-  diagnosticsHtml.push(`</pre>`);
-
   return diagnosticsHtml.join('\n');
 }
 
@@ -395,13 +391,6 @@ function getDiagnosticsFileName(buildDir: string, type: string) {
 }
 
 
-export function getSystemInfo() {
-  const systemData: string[] = [];
-
-  return systemData;
-}
-
-
 function isMeaningfulLine(line: string) {
   if (line) {
     line = line.trim();

src/util/logger.ts

@@ -150,15 +150,31 @@ export class Logger {
   }
 
   /**
-   * Prints out a dim colored timestamp prefix.
+   * Prints out a dim colored timestamp prefix, with optional color
+   * and bold message.
    */
-  static info(...msg: any[]) {
-    const lines = Logger.wordWrap(msg);
+  static info(msg: string, color?: string, bold?: boolean) {
+    const lines = Logger.wordWrap([msg]);
     if (lines.length) {
       let prefix = timePrefix();
-      lines[0] = chalk.dim(prefix) + lines[0].substr(prefix.length);
+      let lineOneMsg = lines[0].substr(prefix.length);
+      if (color) {
+        lineOneMsg = (<any>chalk)[color](lineOneMsg);
+      }
+      if (bold) {
+        lineOneMsg = chalk.bold(lineOneMsg);
+      }
+      lines[0] = chalk.dim(prefix) + lineOneMsg;
     }
-    lines.forEach(line => {
+    lines.forEach((line, lineIndex) => {
+      if (lineIndex > 0) {
+        if (color) {
+          line = (<any>chalk)[color](line);
+        }
+        if (bold) {
+          line = chalk.bold(line);
+        }
+      }
       console.log(line);
     });
   }
@@ -333,16 +349,6 @@ function memoryUsage() {
 }
 
 
-export function getAppScriptsVersion() {
-  let rtn = '';
-  try {
-    const packageJson = readJSONSync(join(__dirname, '..', '..', 'package.json'));
-    rtn = packageJson.version || '';
-  } catch (e) {}
-  return rtn;
-}
-
-
 export interface Diagnostic {
   level: string;
   syntax: string;