From 55afd862c8f0267d25a1dfa3c3fd7b34b31e48e4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 21:01:26 +0100
Subject: [PATCH] Move error overlay middleware (#2216)

---
 packages/react-dev-utils/README.md            |  4 ++++
 packages/react-error-overlay/middleware.js    | 23 +++++++++++++++++++
 packages/react-error-overlay/package.json     |  3 ++-
 .../src/components/frame.js                   |  1 +
 .../config/webpackDevServer.config.js         | 13 +++--------
 5 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-error-overlay/middleware.js

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index a0662bf24bd..c63600b4428 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -236,6 +236,10 @@ var getProcessForPort = require('react-dev-utils/getProcessForPort');
 getProcessForPort(3000);
 ```
 
+#### `launchEditor(fileName: string, lineNumber: number): void`
+
+On macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by `REACT_EDITOR`, `VISUAL`, or `EDITOR` environment variables. For example, you can put `REACT_EDITOR=atom` in your `.env.local` file, and Create React App will respect that.
+
 #### `openBrowser(url: string): boolean`
 
 Attempts to open the browser with a given URL.<br>
diff --git a/packages/react-error-overlay/middleware.js b/packages/react-error-overlay/middleware.js
new file mode 100644
index 00000000000..d4fd0d399f1
--- /dev/null
+++ b/packages/react-error-overlay/middleware.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+const launchEditor = require('react-dev-utils/launchEditor');
+
+module.exports = function createLaunchEditorMiddleware() {
+  return function launchEditorMiddleware(req, res, next) {
+    // Keep this in sync with react-error-overlay
+    if (req.url.startsWith('/__open-stack-frame-in-editor')) {
+      launchEditor(req.query.fileName, req.query.lineNumber);
+      res.end();
+    } else {
+      next();
+    }
+  };
+};
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index 6da96fc13bc..fed921c8f48 100644
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -27,7 +27,8 @@
   ],
   "author": "Joe Haddad <timer150@gmail.com>",
   "files": [
-    "lib/"
+    "lib/",
+    "middleware.js"
   ],
   "dependencies": {
     "anser": "1.2.5",
diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index d9475c7a571..dd86e9fb167 100644
--- a/packages/react-error-overlay/src/components/frame.js
+++ b/packages/react-error-overlay/src/components/frame.js
@@ -277,6 +277,7 @@ function createFrame(
       .indexOf(' ') !== -1;
     if (!isInternalWebpackBootstrapCode) {
       onSourceClick = () => {
+        // Keep this in sync with react-error-overlay/middleware.js
         fetch(
           '/__open-stack-frame-in-editor?fileName=' +
             window.encodeURIComponent(sourceFileName) +
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index a7a0f7b3284..8d7eb0f1b5e 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -10,7 +10,7 @@
 // @remove-on-eject-end
 'use strict';
 
-const launchEditor = require('react-dev-utils/launchEditor');
+const errorOverlayMiddleware = require('react-error-overlay/middleware');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
 
@@ -70,15 +70,8 @@ module.exports = function(proxy, allowedHost) {
     public: allowedHost,
     proxy,
     setup(app) {
-      // This lets us open files from the crash overlay.
-      app.use(function launchEditorMiddleware(req, res, next) {
-        if (req.url.startsWith('/__open-stack-frame-in-editor')) {
-          launchEditor(req.query.fileName, req.query.lineNumber);
-          res.end();
-        } else {
-          next();
-        }
-      });
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
     },
   };
 };