From 7d2a95d43d41edd40985922ee2343cb2e5fc49ac Mon Sep 17 00:00:00 2001
From: Dan Abramov <gaearon@fb.com>
Date: Mon, 24 Jun 2019 13:49:01 -0700
Subject: [PATCH] Syntax errors should dismiss redboxes

Summary: If you make a syntax error while there is a redbox while Fast Refresh is on, we should dismiss that redbox. Otherwise there is no way for you to tell why your code is not working.

Reviewed By: rickhanlonii

Differential Revision: D15970337

fbshipit-source-id: 1ca6c9a1b2269d198ae726d3b64e5c51506503db
---
 Libraries/Utilities/HMRClient.js | 41 +++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/Libraries/Utilities/HMRClient.js b/Libraries/Utilities/HMRClient.js
index 21d16f11a2b..233759f445c 100644
--- a/Libraries/Utilities/HMRClient.js
+++ b/Libraries/Utilities/HMRClient.js
@@ -139,7 +139,7 @@ Error: ${e.message}`;
     });
 
     // This is intentionally called lazily, as these values change.
-    function shouldProvideVisualFeedback() {
+    function isFastRefreshActive() {
       return (
         // Until we get "connection-done", messages aren't real edits.
         didFinishInitialUpdate &&
@@ -151,27 +151,31 @@ Error: ${e.message}`;
       );
     }
 
+    function dismissRedbox() {
+      if (
+        Platform.OS === 'ios' &&
+        NativeRedBox != null &&
+        NativeRedBox.dismiss != null
+      ) {
+        NativeRedBox.dismiss();
+      } else {
+        const NativeExceptionsManager = require('../Core/NativeExceptionsManager')
+          .default;
+        NativeExceptionsManager &&
+          NativeExceptionsManager.dismissRedbox &&
+          NativeExceptionsManager.dismissRedbox();
+      }
+    }
+
     hmrClient.on('update-start', () => {
-      if (shouldProvideVisualFeedback()) {
+      if (isFastRefreshActive()) {
         HMRLoadingView.showMessage('Refreshing...');
       }
     });
 
     hmrClient.on('update', () => {
-      if (shouldProvideVisualFeedback()) {
-        if (
-          Platform.OS === 'ios' &&
-          NativeRedBox != null &&
-          NativeRedBox.dismiss != null
-        ) {
-          NativeRedBox.dismiss();
-        } else {
-          const NativeExceptionsManager = require('../Core/NativeExceptionsManager')
-            .default;
-          NativeExceptionsManager &&
-            NativeExceptionsManager.dismissRedbox &&
-            NativeExceptionsManager.dismissRedbox();
-        }
+      if (isFastRefreshActive()) {
+        dismissRedbox();
       }
     });
 
@@ -192,7 +196,10 @@ Error: ${e.message}`;
         setHMRUnavailableReason(
           'The Metro server and the client are out of sync. Fast Refresh will be disabled until you reload the application.',
         );
-      } else {
+      } else if (isFastRefreshActive()) {
+        // Even if there is already a redbox, syntax errors are more important.
+        // Otherwise you risk seeing a stale runtime error while a syntax error is more recent.
+        dismissRedbox();
         throw new Error(`${data.type} ${data.message}`);
       }
     });