Use prettyFormat for Metro logging

Summary: Right now we are using `JSON.stringify` which is very lossy with regards to JavaScript data types like functions, `undefined`, NaN and others. This diff switches the logging on the client side to use `prettyFormat` which is part of Jest. It allows to handle much richer log messages.

Reviewed By: gaearon

Differential Revision: D16458775

fbshipit-source-id: e1d2c125eb8357a9508521aa15510cb4f30a7fa9

Libraries/Utilities/HMRClient.js

@@ -11,6 +11,7 @@
 
 const Platform = require('./Platform');
 const invariant = require('invariant');
+const prettyFormat = require('pretty-format');
 
 const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');
 
@@ -101,16 +102,25 @@ const HMRClient: HMRClientNativeInterface = {
   },
 
   log(level: LogLevel, data: Array<mixed>) {
-    let message;
-    try {
-      message = JSON.stringify({type: 'log', level, data});
-    } catch (error) {
-      message = JSON.stringify({type: 'log', level, data: [error.message]});
-    }
-
     try {
       if (hmrClient) {
-        hmrClient.send(message);
+        hmrClient.send(
+          JSON.stringify({
+            type: 'log',
+            level,
+            data: data.map(message =>
+              typeof message === 'string'
+                ? message
+                : prettyFormat(message, {
+                    escapeString: true,
+                    highlight: true,
+                    maxDepth: 3,
+                    min: true,
+                    plugins: [prettyFormat.plugins.ReactElement],
+                  }),
+            ),
+          }),
+        );
       }
     } catch (error) {
       // If sending logs causes any failures we want to silently ignore them