fix(output): Improve the output for both browser and node backends wi…

…th errors

example/console-node.ts

@@ -25,3 +25,5 @@ Logger.withFields({
  * Annotate a single field and log a message with custom log level
  */
 Logger.withField('answer', 42).log('customlevel', 'custom message')
+
+Logger.withField('err', new Error('test error')).debug('test');

package.json

@@ -52,6 +52,7 @@
     "chalk": "^3.0.0"
   },
   "devDependencies": {
+    "@types/node": "^13.9.0",
     "@typescript-eslint/eslint-plugin": "^2.21.0",
     "@typescript-eslint/eslint-plugin-tslint": "^2.21.0",
     "@typescript-eslint/parser": "^2.21.0",

src/backends/console-browser.ts

@@ -44,12 +44,13 @@ export class ConsoleBackend implements ILogBackend {
       // Human readable output supports coloring.
       const shouldAddColor = this.options.color && this.options.colorStyleMap[level];
       const coloredLevel = shouldAddColor ? `%c${level}%c` : level;
-      const contextFormat = Object.keys(context).map(key => `${key}=${context[key]}`).join(' ');
-      const message = `[${ts.toISOString()}] ${coloredLevel} ${msg} ${contextFormat}`;
+      const contextEntries = Object.keys(context).map(key => [key, '=', context[key]]);
+      const contextFormat = ([] as any[]).concat(...contextEntries);
+      const message = [`[${ts.toISOString()}] ${coloredLevel} ${msg}`, ...contextFormat];
       if (shouldAddColor) {
-        console.log(message, this.options.colorStyleMap[level], 'color: initial');
+        console.log(...message, this.options.colorStyleMap[level], 'color: initial');
       } else {
-        console.log(message);
+        console.log(...message);
       }
     }
   }

src/backends/console-node.ts

@@ -4,6 +4,7 @@
 /* eslint-disable no-console */
 import { ILogBackend, LogVariables } from '../Backend';
 import * as chalk from 'chalk';
+import { format } from 'util';
 
 const DEFAULT_COLOR_MAP: ColorStyleMap = {
   trace: chalk.gray,
@@ -45,8 +46,8 @@ export class ConsoleBackend implements ILogBackend {
       // Human readable output supports coloring.
       const shouldAddColor = this.options.color && this.options.colorStyleMap[level];
       const coloredLevel = shouldAddColor ? this.options.colorStyleMap[level](level) : level;
-      const contextFormat = Object.keys(context).map(key => `${key}=${context[key]}`).join(' ');
-      const message = `[${ts.toISOString()}] ${coloredLevel} ${msg} ${contextFormat}`;
+      const contextFormat = Object.keys(context).map(key => `${key}=${format(context[key])}`).join(' ');
+      const message = `[${ts.toISOString()}] ${coloredLevel} ${format(msg)} ${contextFormat}`;
       console.log(message);
     }
   }

tsconfig.base.json

@@ -8,7 +8,9 @@
     "lib": ["es2015", "es2017", "dom"],
     "declaration": false,
     "strict": true,
-    "types": [],
+    "types": [
+      "node"
+    ],
     "typeRoots": [
       "node_modules/@types"
     ],