From fe77ce1c62d6c6dc2a2eb6a3e532bbf39482b0d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Bigio?= <martinb@fb.com>
Date: Thu, 7 Jan 2016 13:14:18 -0800
Subject: [PATCH] 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         | 12 ++++++--
 local-cli/server/util/attachHMRServer.js | 36 ++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/Libraries/Utilities/HMRClient.js b/Libraries/Utilities/HMRClient.js
index 0a29f53ab..f500748d5 100644
--- a/Libraries/Utilities/HMRClient.js
+++ b/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);
     };
   },
 };
diff --git a/local-cli/server/util/attachHMRServer.js b/local-cli/server/util/attachHMRServer.js
index 56912e804..5de18b977 100644
--- a/local-cli/server/util/attachHMRServer.js
+++ b/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;