Show red boxes on HL mode

Summary:
public

We should further improve this on the future by showing the actual stacktrace instead of the `HMRClient` one. Also, we need to integrate this with the dev plugin that opens in the default editor the file/line the user clicks on.

Reviewed By: vjeux

Differential Revision: D2798889

fb-gh-sync-id: 2392966908c493e86e11b0d024e7b68156c9066c

Libraries/Utilities/HMRClient.js

@@ -48,8 +48,16 @@ URL: ${host}:${port}
 Error: ${e.message}`
       );
     };
-    activeWS.onmessage = (m) => {
-      eval(m.data); // eslint-disable-line no-eval
+    activeWS.onmessage = ({data}) => {
+      data = JSON.parse(data);
+      if (data.type === 'update') {
+        eval(data.body); // eslint-disable-line no-eval
+        return;
+      }
+
+      // TODO: add support for opening filename by clicking on the stacktrace
+      const error = data.body;
+      throw new Error(error.type + ' ' + error.description);
     };
   },
 };

local-cli/server/util/attachHMRServer.js

@@ -170,6 +170,42 @@ function attachHMRServer({httpServer, path, packagerServer}) {
                   modules: modulesToUpdate,
                 });
               })
+              .then(update => {
+                if (!client) {
+                  return;
+                }
+
+                // check we actually want to send an HMR update
+                if (update) {
+                  return JSON.stringify({
+                    type: 'update',
+                    body: update,
+                  });
+                }
+              })
+              .catch(error => {
+                // send errors to the client instead of killing packager server
+                let body;
+                if (error.type === 'TransformError' ||
+                    error.type === 'NotFoundError' ||
+                    error.type === 'UnableToResolveError') {
+                  body = {
+                    type: error.type,
+                    description: error.description,
+                    filename: error.filename,
+                    lineNumber: error.lineNumber,
+                  };
+                } else {
+                  console.error(error.stack || error);
+                  body = {
+                    type: 'InternalError',
+                    description: 'react-packager has encountered an internal error, ' +
+                      'please check your terminal error output for more details',
+                  };
+                }
+
+                return JSON.stringify({type: 'error', body});
+              })
               .then(bundle => {
                 if (!client) {
                   return;