Fix decoupling of react-dev-utils and react-error-overlay by moving middleware

Author: gaearon

packages/react-dev-utils/errorOverlayMiddleware.js

@@ -6,7 +6,18 @@
  * 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';
 
-module.exports = require('react-error-overlay/middleware');
+const launchEditor = require('./launchEditor');
+const launchEditorEndpoint = require('./launchEditorEndpoint');
+
+module.exports = function createLaunchEditorMiddleware() {
+  return function launchEditorMiddleware(req, res, next) {
+    if (req.url.startsWith(launchEditorEndpoint)) {
+      launchEditor(req.query.fileName, req.query.lineNumber);
+      res.end();
+    } else {
+      next();
+    }
+  };
+};

packages/react-dev-utils/launchEditorEndpoint.js

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+// TODO: we might want to make this injectable to support DEV-time non-root URLs.
+module.exports = '/__open-stack-frame-in-editor';

packages/react-dev-utils/package.json

@@ -24,6 +24,7 @@
     "inquirer.js",
     "InterpolateHtmlPlugin.js",
     "launchEditor.js",
+    "launchEditorEndpoint.js",
     "ModuleScopePlugin.js",
     "noopServiceWorkerMiddleware.js",
     "openBrowser.js",

packages/react-dev-utils/webpackHotDevClient.js

@@ -21,18 +21,22 @@
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
+var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
-ErrorOverlay.startReportingRuntimeErrors(() => {
-  // TODO: why do we need this?
-  if (module.hot && typeof module.hot.decline === 'function') {
-    module.hot.decline();
-  }
+ErrorOverlay.startReportingRuntimeErrors({
+  launchEditorEndpoint: launchEditorEndpoint,
+  onError: function() {
+    // TODO: why do we need this?
+    if (module.hot && typeof module.hot.decline === 'function') {
+      module.hot.decline();
+    }
+  },
 });
 
 if (module.hot && typeof module.hot.dispose === 'function') {
-  module.hot.dispose(() => {
+  module.hot.dispose(function() {
     // TODO: why do we need this?
     ErrorOverlay.stopReportingRuntimeErrors();
   });

packages/react-error-overlay/middleware.js

@@ -25,7 +25,12 @@ type ErrorRecord = {|
   stackFrames: StackFrame[],
 |};
 
-function RuntimeError({ errorRecord }: { errorRecord: ErrorRecord }) {
+type Props = {|
+  errorRecord: ErrorRecord,
+  launchEditorEndpoint: ?string,
+|};
+
+function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
   const { error, unhandledRejection, contextSize, stackFrames } = errorRecord;
   const errorName = unhandledRejection
     ? 'Unhandled Rejection (' + error.name + ')'
@@ -54,6 +59,7 @@ function RuntimeError({ errorRecord }: { errorRecord: ErrorRecord }) {
         stackFrames={stackFrames}
         errorName={errorName}
         contextSize={contextSize}
+        launchEditorEndpoint={launchEditorEndpoint}
       />
     </div>
   );

packages/react-error-overlay/src/containers/RuntimeError.js

@@ -61,7 +61,10 @@ class RuntimeErrorContainer extends PureComponent {
             previous={this.previous}
             next={this.next}
           />}
-        <RuntimeError errorRecord={errorRecords[this.state.currentIndex]} />
+        <RuntimeError
+          errorRecord={errorRecords[this.state.currentIndex]}
+          launchEditorEndpoint={this.props.launchEditorEndpoint}
+        />
         <Footer
           line1="This screen is visible only in development. It will not appear if the app crashes in production."
           line2="Open your browser’s developer console to further inspect this error."

packages/react-error-overlay/src/containers/RuntimeErrorContainer.js

@@ -55,6 +55,9 @@ class StackFrame extends Component {
   };
 
   canOpenInEditor() {
+    if (!this.props.launchEditorEndpoint) {
+      return;
+    }
     const { _originalFileName: sourceFileName } = this.props.frame;
     // Unknown file
     if (!sourceFileName) {
@@ -80,7 +83,7 @@ class StackFrame extends Component {
     } = this.props.frame;
     // Keep this in sync with react-error-overlay/middleware.js
     fetch(
-      '/__open-stack-frame-in-editor?fileName=' +
+      `${this.props.launchEditorEndpoint}?fileName=` +
         window.encodeURIComponent(sourceFileName) +
         '&lineNumber=' +
         window.encodeURIComponent(sourceLineNumber || 1)

packages/react-error-overlay/src/containers/StackFrame.js

@@ -23,7 +23,12 @@ const traceStyle = {
 
 class StackTrace extends Component {
   renderFrames() {
-    const { stackFrames, errorName, contextSize } = this.props;
+    const {
+      stackFrames,
+      errorName,
+      contextSize,
+      launchEditorEndpoint,
+    } = this.props;
     const renderedFrames = [];
     let hasReachedAppCode = false,
       currentBundle = [],
@@ -47,6 +52,7 @@ class StackTrace extends Component {
           contextSize={contextSize}
           critical={index === 0}
           showCode={!shouldCollapse}
+          launchEditorEndpoint={launchEditorEndpoint}
         />
       );
       const lastElement = index === stackFrames.length - 1;

packages/react-error-overlay/src/containers/StackTrace.js

@@ -18,12 +18,18 @@ import { applyStyles } from './utils/dom/css';
 
 import type { ErrorRecord } from './listenToRuntimeErrors';
 
+type RuntimeReportingOptions = {|
+  onError: () => void,
+  launchEditorEndpoint: string,
+|};
+
 let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 
 let renderedElement: null | React.Element<any> = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
+let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;
 let stopListeningToRuntimeErrors: null | (() => void) = null;
 
 export function reportBuildError(error: string) {
@@ -36,14 +42,15 @@ export function dismissBuildError() {
   update();
 }
 
-export function startReportingRuntimeErrors(onError?: () => void) {
+export function startReportingRuntimeErrors(options: RuntimeReportingOptions) {
   if (stopListeningToRuntimeErrors !== null) {
-    return;
+    throw new Error('Already listening');
   }
+  currentRuntimeErrorOptions = options;
   listenToRuntimeErrors(errorRecord => {
     try {
-      if (typeof onError === 'function') {
-        onError();
+      if (typeof options.onError === 'function') {
+        options.onError.call(null);
       }
     } finally {
       handleRuntimeError(errorRecord);
@@ -62,12 +69,14 @@ function dismissRuntimeErrors() {
 }
 
 export function stopReportingRuntimeErrors() {
-  if (stopListeningToRuntimeErrors !== null) {
-    try {
-      stopListeningToRuntimeErrors();
-    } finally {
-      stopListeningToRuntimeErrors = null;
-    }
+  if (stopListeningToRuntimeErrors === null) {
+    throw new Error('Not currently listening');
+  }
+  currentRuntimeErrorOptions = null;
+  try {
+    stopListeningToRuntimeErrors();
+  } finally {
+    stopListeningToRuntimeErrors = null;
   }
 }
 
@@ -114,10 +123,14 @@ function render() {
     return <CompileErrorContainer error={currentBuildError} />;
   }
   if (currentRuntimeErrorRecords.length > 0) {
+    if (!currentRuntimeErrorOptions) {
+      throw new Error('Expected options to be injected.');
+    }
     return (
       <RuntimeErrorContainer
         errorRecords={currentRuntimeErrorRecords}
         close={dismissRuntimeErrors}
+        launchEditorEndpoint={currentRuntimeErrorOptions.launchEditorEndpoint}
       />
     );
   }