From 830c4e9b770d49edf35ff78e62bc428544844120 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Fri, 8 Sep 2017 06:44:22 +0530
Subject: [PATCH 1/9] Implement click-to-open for babel syntax errors in build
 error overlay

---
 .../src/containers/CompileErrorContainer.js   | 24 ++++++++++-
 .../src/utils/parseCompileError.js            | 42 +++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-error-overlay/src/utils/parseCompileError.js

diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
index 5d491a9d47f..2c70147bdef 100644
--- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -12,18 +12,40 @@ import Footer from '../components/Footer';
 import Header from '../components/Header';
 import CodeBlock from '../components/CodeBlock';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
+import parseCompileError from '../utils/parseCompileError';
+import type { ErrorLocation } from '../utils/parseCompileError';
+
+const codeAnchorStyle = {
+  cursor: 'pointer',
+};
 
 type Props = {|
   error: string,
 |};
 
 class CompileErrorContainer extends PureComponent<Props, void> {
+  openInEditor(errorLoc: ErrorLocation): void {
+    const { filePath, lineNumber } = errorLoc;
+    fetch(
+      `/__open-stack-frame-in-editor?fileName=` +
+        window.encodeURIComponent(filePath) +
+        '&lineNumber=' +
+        window.encodeURIComponent(lineNumber || 1)
+    ).then(() => {}, () => {});
+  }
+
   render() {
     const { error } = this.props;
+    const errLoc = parseCompileError(error);
     return (
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
-        <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
+        <a
+          onClick={errLoc ? () => this.openInEditor(errLoc) : null}
+          style={errLoc ? codeAnchorStyle : null}
+        >
+          <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
+        </a>
         <Footer line1="This error occurred during the build time and cannot be dismissed." />
       </ErrorOverlay>
     );
diff --git a/packages/react-error-overlay/src/utils/parseCompileError.js b/packages/react-error-overlay/src/utils/parseCompileError.js
new file mode 100644
index 00000000000..90c4091b75f
--- /dev/null
+++ b/packages/react-error-overlay/src/utils/parseCompileError.js
@@ -0,0 +1,42 @@
+// @flow
+
+export type ErrorLocation = {|
+  filePath: string,
+  lineNumber: number,
+|};
+
+const filePathRegex = /^\.(\/[^\/\n ]+)+\.[^\/\n ]+$/;
+
+// Based on syntax error formating of babylon parser
+// https://github.com/babel/babylon/blob/v7.0.0-beta.22/src/parser/location.js#L19
+const lineNumberRegex = /^.*\((\d+):(\d+)\)$/;
+
+// Based on error formatting of webpack
+// https://github.com/webpack/webpack/blob/v3.5.5/lib/Stats.js#L183-L217
+function parseCompileError(message: string): ?ErrorLocation {
+  const lines: Array<string> = message.split('\n');
+  let filePath: string = '';
+  let lineNumber: number = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line: string = lines[i];
+    if (!line) continue;
+
+    if (!filePath && line.match(filePathRegex)) {
+      filePath = line;
+    }
+
+    if (!lineNumber) {
+      const match: ?Array<string> = line.match(lineNumberRegex);
+      if (match) {
+        lineNumber = parseInt(match[1]);
+      }
+    }
+
+    if (filePath && lineNumber) break;
+  }
+
+  return filePath && lineNumber ? { filePath, lineNumber } : null;
+}
+
+export default parseCompileError;

From 51236e97f4203d82b587e01bf429094ce16c7720 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sat, 9 Sep 2017 23:24:48 +0530
Subject: [PATCH 2/9] Add click-to-open support for lint errors and refactor
 parser

---
 .../src/utils/parseCompileError.js            | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/react-error-overlay/src/utils/parseCompileError.js b/packages/react-error-overlay/src/utils/parseCompileError.js
index 90c4091b75f..0d5f535dfe4 100644
--- a/packages/react-error-overlay/src/utils/parseCompileError.js
+++ b/packages/react-error-overlay/src/utils/parseCompileError.js
@@ -1,4 +1,5 @@
 // @flow
+import Anser from 'anser';
 
 export type ErrorLocation = {|
   filePath: string,
@@ -7,9 +8,16 @@ export type ErrorLocation = {|
 
 const filePathRegex = /^\.(\/[^\/\n ]+)+\.[^\/\n ]+$/;
 
-// Based on syntax error formating of babylon parser
-// https://github.com/babel/babylon/blob/v7.0.0-beta.22/src/parser/location.js#L19
-const lineNumberRegex = /^.*\((\d+):(\d+)\)$/;
+const lineNumberRegexes = [
+  // Babel syntax errors
+  // Based on syntax error formating of babylon parser
+  // https://github.com/babel/babylon/blob/v7.0.0-beta.22/src/parser/location.js#L19
+  /^.*\((\d+):(\d+)\)$/,
+
+  // ESLint errors
+  // Based on eslintFormatter in react-dev-utils
+  /^Line (\d+):.+$/,
+];
 
 // Based on error formatting of webpack
 // https://github.com/webpack/webpack/blob/v3.5.5/lib/Stats.js#L183-L217
@@ -19,18 +27,21 @@ function parseCompileError(message: string): ?ErrorLocation {
   let lineNumber: number = 0;
 
   for (let i = 0; i < lines.length; i++) {
-    const line: string = lines[i];
+    const line: string = Anser.ansiToText(lines[i]).trim();
     if (!line) continue;
 
     if (!filePath && line.match(filePathRegex)) {
       filePath = line;
     }
 
-    if (!lineNumber) {
-      const match: ?Array<string> = line.match(lineNumberRegex);
+    let k = 0;
+    while (k < lineNumberRegexes.length) {
+      const match: ?Array<string> = line.match(lineNumberRegexes[k]);
       if (match) {
         lineNumber = parseInt(match[1]);
+        break;
       }
+      k++;
     }
 
     if (filePath && lineNumber) break;

From de8e9b65860e910413c1bd87e8da5d153704d70f Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sun, 10 Sep 2017 02:10:10 +0530
Subject: [PATCH 3/9] Reactor code to reuse open-in-editor functionality in
 both build and runtime error overlays

---
 .../react-dev-utils/webpackHotDevClient.js    | 13 ++++++-
 .../src/containers/CompileErrorContainer.js   | 15 ++-----
 .../src/containers/RuntimeError.js            |  7 ++--
 .../src/containers/RuntimeErrorContainer.js   |  5 ++-
 .../src/containers/StackFrame.js              | 39 +++++++------------
 .../src/containers/StackTrace.js              | 12 ++----
 packages/react-error-overlay/src/index.js     | 22 ++++++++++-
 .../src/utils/parseCompileError.js            | 12 +++---
 8 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 611fc6ba042..694fcac4e52 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -23,6 +23,18 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
+ErrorOverlay.listenToOpenInEditor(function OpenInEditor({
+  fileName,
+  lineNumber,
+}) {
+  fetch(
+    `${launchEditorEndpoint}?fileName=` +
+      window.encodeURIComponent(fileName) +
+      '&lineNumber=' +
+      window.encodeURIComponent(lineNumber || 1)
+  ).then(() => {}, () => {});
+});
+
 // We need to keep track of if there has been a runtime error.
 // Essentially, we cannot guarantee application state was not corrupted by the
 // runtime error. To prevent confusing behavior, we forcibly reload the entire
@@ -31,7 +43,6 @@ var ErrorOverlay = require('react-error-overlay');
 // See https://github.com/facebookincubator/create-react-app/issues/3096
 var hadRuntimeError = false;
 ErrorOverlay.startReportingRuntimeErrors({
-  launchEditorEndpoint: launchEditorEndpoint,
   onError: function() {
     hadRuntimeError = true;
   },
diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
index 2c70147bdef..6dcf83ae626 100644
--- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -21,27 +21,18 @@ const codeAnchorStyle = {
 
 type Props = {|
   error: string,
+  openInEditor: (errorLoc: ErrorLocation) => void,
 |};
 
 class CompileErrorContainer extends PureComponent<Props, void> {
-  openInEditor(errorLoc: ErrorLocation): void {
-    const { filePath, lineNumber } = errorLoc;
-    fetch(
-      `/__open-stack-frame-in-editor?fileName=` +
-        window.encodeURIComponent(filePath) +
-        '&lineNumber=' +
-        window.encodeURIComponent(lineNumber || 1)
-    ).then(() => {}, () => {});
-  }
-
   render() {
-    const { error } = this.props;
+    const { error, openInEditor } = this.props;
     const errLoc = parseCompileError(error);
     return (
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
         <a
-          onClick={errLoc ? () => this.openInEditor(errLoc) : null}
+          onClick={errLoc ? () => openInEditor(errLoc) : null}
           style={errLoc ? codeAnchorStyle : null}
         >
           <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
diff --git a/packages/react-error-overlay/src/containers/RuntimeError.js b/packages/react-error-overlay/src/containers/RuntimeError.js
index c247ba52a30..534d777494d 100644
--- a/packages/react-error-overlay/src/containers/RuntimeError.js
+++ b/packages/react-error-overlay/src/containers/RuntimeError.js
@@ -11,6 +11,7 @@ import Header from '../components/Header';
 import StackTrace from './StackTrace';
 
 import type { StackFrame } from '../utils/stack-frame';
+import type { ErrorLocation } from '../utils/parseCompileError';
 
 const wrapperStyle = {
   display: 'flex',
@@ -26,10 +27,10 @@ export type ErrorRecord = {|
 
 type Props = {|
   errorRecord: ErrorRecord,
-  launchEditorEndpoint: ?string,
+  openInEditor: (errorLoc: ErrorLocation) => void,
 |};
 
-function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
+function RuntimeError({ errorRecord, openInEditor }: Props) {
   const { error, unhandledRejection, contextSize, stackFrames } = errorRecord;
   const errorName = unhandledRejection
     ? 'Unhandled Rejection (' + error.name + ')'
@@ -58,7 +59,7 @@ function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
         stackFrames={stackFrames}
         errorName={errorName}
         contextSize={contextSize}
-        launchEditorEndpoint={launchEditorEndpoint}
+        openInEditor={openInEditor}
       />
     </div>
   );
diff --git a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
index 80585f05142..9905b6de48e 100644
--- a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
@@ -14,11 +14,12 @@ import RuntimeError from './RuntimeError';
 import Footer from '../components/Footer';
 
 import type { ErrorRecord } from './RuntimeError';
+import type { ErrorLocation } from '../utils/parseCompileError';
 
 type Props = {|
   errorRecords: ErrorRecord[],
   close: () => void,
-  launchEditorEndpoint: ?string,
+  openInEditor: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -74,7 +75,7 @@ class RuntimeErrorContainer extends PureComponent<Props, State> {
         )}
         <RuntimeError
           errorRecord={errorRecords[this.state.currentIndex]}
-          launchEditorEndpoint={this.props.launchEditorEndpoint}
+          openInEditor={this.props.openInEditor}
         />
         <Footer
           line1="This screen is visible only in development. It will not appear if the app crashes in production."
diff --git a/packages/react-error-overlay/src/containers/StackFrame.js b/packages/react-error-overlay/src/containers/StackFrame.js
index f16ae643593..a756ea924b9 100644
--- a/packages/react-error-overlay/src/containers/StackFrame.js
+++ b/packages/react-error-overlay/src/containers/StackFrame.js
@@ -12,6 +12,7 @@ import { getPrettyURL } from '../utils/getPrettyURL';
 import { darkGray } from '../styles';
 
 import type { StackFrame as StackFrameType } from '../utils/stack-frame';
+import type { ErrorLocation } from '../utils/parseCompileError';
 
 const linkStyle = {
   fontSize: '0.9em',
@@ -45,10 +46,10 @@ const toggleStyle = {
 
 type Props = {|
   frame: StackFrameType,
-  launchEditorEndpoint: ?string,
   contextSize: number,
   critical: boolean,
   showCode: boolean,
+  openInEditor: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -66,42 +67,30 @@ class StackFrame extends Component<Props, State> {
     }));
   };
 
-  getEndpointUrl(): string | null {
-    if (!this.props.launchEditorEndpoint) {
-      return null;
-    }
-    const { _originalFileName: sourceFileName } = this.props.frame;
+  getErrorLocation(): ErrorLocation | null {
+    const {
+      _originalFileName: fileName,
+      _originalLineNumber: lineNumber,
+    } = this.props.frame;
     // Unknown file
-    if (!sourceFileName) {
+    if (!fileName) {
       return null;
     }
     // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1"
-    const isInternalWebpackBootstrapCode =
-      sourceFileName.trim().indexOf(' ') !== -1;
+    const isInternalWebpackBootstrapCode = fileName.trim().indexOf(' ') !== -1;
     if (isInternalWebpackBootstrapCode) {
       return null;
     }
     // Code is in a real file
-    return this.props.launchEditorEndpoint || null;
+    return { fileName, lineNumber: lineNumber || 1 };
   }
 
   openInEditor = () => {
-    const endpointUrl = this.getEndpointUrl();
-    if (endpointUrl === null) {
+    const errorLoc = this.getErrorLocation();
+    if (!errorLoc) {
       return;
     }
-
-    const {
-      _originalFileName: sourceFileName,
-      _originalLineNumber: sourceLineNumber,
-    } = this.props.frame;
-    // Keep this in sync with react-error-overlay/middleware.js
-    fetch(
-      `${endpointUrl}?fileName=` +
-        window.encodeURIComponent(sourceFileName) +
-        '&lineNumber=' +
-        window.encodeURIComponent(sourceLineNumber || 1)
-    ).then(() => {}, () => {});
+    this.props.openInEditor(errorLoc);
   };
 
   onKeyDown = (e: SyntheticKeyboardEvent<>) => {
@@ -166,7 +155,7 @@ class StackFrame extends Component<Props, State> {
       }
     }
 
-    const canOpenInEditor = this.getEndpointUrl() !== null;
+    const canOpenInEditor = this.getErrorLocation() !== null;
     return (
       <div>
         <div>{functionName}</div>
diff --git a/packages/react-error-overlay/src/containers/StackTrace.js b/packages/react-error-overlay/src/containers/StackTrace.js
index 0be342ddcd3..3d846b39ed8 100644
--- a/packages/react-error-overlay/src/containers/StackTrace.js
+++ b/packages/react-error-overlay/src/containers/StackTrace.js
@@ -13,6 +13,7 @@ import { isInternalFile } from '../utils/isInternalFile';
 import { isBultinErrorName } from '../utils/isBultinErrorName';
 
 import type { StackFrame as StackFrameType } from '../utils/stack-frame';
+import type { ErrorLocation } from '../utils/parseCompileError';
 
 const traceStyle = {
   fontSize: '1em',
@@ -25,17 +26,12 @@ type Props = {|
   stackFrames: StackFrameType[],
   errorName: string,
   contextSize: number,
-  launchEditorEndpoint: ?string,
+  openInEditor: (errorLoc: ErrorLocation) => void,
 |};
 
 class StackTrace extends Component<Props> {
   renderFrames() {
-    const {
-      stackFrames,
-      errorName,
-      contextSize,
-      launchEditorEndpoint,
-    } = this.props;
+    const { stackFrames, errorName, contextSize, openInEditor } = this.props;
     const renderedFrames = [];
     let hasReachedAppCode = false,
       currentBundle = [],
@@ -59,7 +55,7 @@ class StackTrace extends Component<Props> {
           contextSize={contextSize}
           critical={index === 0}
           showCode={!shouldCollapse}
-          launchEditorEndpoint={launchEditorEndpoint}
+          openInEditor={openInEditor}
         />
       );
       const lastElement = index === stackFrames.length - 1;
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index 52ff9199bcb..488e04a2d71 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -16,22 +16,35 @@ import { applyStyles } from './utils/dom/css';
 import iframeScript from 'iframeScript';
 
 import type { ErrorRecord } from './listenToRuntimeErrors';
+import type { ErrorLocation } from './utils/parseCompileError';
 
 type RuntimeReportingOptions = {|
   onError: () => void,
-  launchEditorEndpoint: string,
   filename?: string,
 |};
 
+type OpenInEditorListener = (errorLoc: ErrorLocation) => void;
+
 let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 var isIframeReady: boolean = false;
 
+let openInEditorListener: null | OpenInEditorListener = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
 let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;
 let stopListeningToRuntimeErrors: null | (() => void) = null;
 
+export function listenToOpenInEditor(listener: OpenInEditorListener) {
+  openInEditorListener = listener;
+}
+
+function openInEditor(errorLoc: ErrorLocation) {
+  if (typeof openInEditorListener === 'function') {
+    openInEditorListener(errorLoc);
+  }
+}
+
 export function reportBuildError(error: string) {
   currentBuildError = error;
   update();
@@ -46,6 +59,13 @@ export function startReportingRuntimeErrors(options: RuntimeReportingOptions) {
   if (stopListeningToRuntimeErrors !== null) {
     throw new Error('Already listening');
   }
+  if (options.launchEditorEndpoint) {
+    console.warn(
+      'Warning: `startReportingRuntimeErrors` doesn’t accept ' +
+        '`launchEditorEndpoint` argument anymore. Use `listenToOpenInEditor` ' +
+        'instead with your own implementation to open errors in editor '
+    );
+  }
   currentRuntimeErrorOptions = options;
   listenToRuntimeErrors(errorRecord => {
     try {
diff --git a/packages/react-error-overlay/src/utils/parseCompileError.js b/packages/react-error-overlay/src/utils/parseCompileError.js
index 0d5f535dfe4..253a37f229a 100644
--- a/packages/react-error-overlay/src/utils/parseCompileError.js
+++ b/packages/react-error-overlay/src/utils/parseCompileError.js
@@ -2,7 +2,7 @@
 import Anser from 'anser';
 
 export type ErrorLocation = {|
-  filePath: string,
+  fileName: string,
   lineNumber: number,
 |};
 
@@ -23,15 +23,15 @@ const lineNumberRegexes = [
 // https://github.com/webpack/webpack/blob/v3.5.5/lib/Stats.js#L183-L217
 function parseCompileError(message: string): ?ErrorLocation {
   const lines: Array<string> = message.split('\n');
-  let filePath: string = '';
+  let fileName: string = '';
   let lineNumber: number = 0;
 
   for (let i = 0; i < lines.length; i++) {
     const line: string = Anser.ansiToText(lines[i]).trim();
     if (!line) continue;
 
-    if (!filePath && line.match(filePathRegex)) {
-      filePath = line;
+    if (!fileName && line.match(filePathRegex)) {
+      fileName = line;
     }
 
     let k = 0;
@@ -44,10 +44,10 @@ function parseCompileError(message: string): ?ErrorLocation {
       k++;
     }
 
-    if (filePath && lineNumber) break;
+    if (fileName && lineNumber) break;
   }
 
-  return filePath && lineNumber ? { filePath, lineNumber } : null;
+  return fileName && lineNumber ? { fileName, lineNumber } : null;
 }
 
 export default parseCompileError;

From 5c0cccf9d1ba97752d4ba039ba87309d15d1c6f6 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sun, 10 Sep 2017 12:35:06 +0530
Subject: [PATCH 4/9] Fix some eslint warnings

---
 .../src/containers/CompileErrorContainer.js          |  2 +-
 .../src/utils/parseCompileError.js                   | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
index 6dcf83ae626..85528142a64 100644
--- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -27,7 +27,7 @@ type Props = {|
 class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
     const { error, openInEditor } = this.props;
-    const errLoc = parseCompileError(error);
+    const errLoc: ?ErrorLocation = parseCompileError(error);
     return (
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
diff --git a/packages/react-error-overlay/src/utils/parseCompileError.js b/packages/react-error-overlay/src/utils/parseCompileError.js
index 253a37f229a..2c9b6e60ebb 100644
--- a/packages/react-error-overlay/src/utils/parseCompileError.js
+++ b/packages/react-error-overlay/src/utils/parseCompileError.js
@@ -6,7 +6,7 @@ export type ErrorLocation = {|
   lineNumber: number,
 |};
 
-const filePathRegex = /^\.(\/[^\/\n ]+)+\.[^\/\n ]+$/;
+const filePathRegex = /^\.(\/[^/\n ]+)+\.[^/\n ]+$/;
 
 const lineNumberRegexes = [
   // Babel syntax errors
@@ -28,7 +28,9 @@ function parseCompileError(message: string): ?ErrorLocation {
 
   for (let i = 0; i < lines.length; i++) {
     const line: string = Anser.ansiToText(lines[i]).trim();
-    if (!line) continue;
+    if (!line) {
+      continue;
+    }
 
     if (!fileName && line.match(filePathRegex)) {
       fileName = line;
@@ -38,13 +40,15 @@ function parseCompileError(message: string): ?ErrorLocation {
     while (k < lineNumberRegexes.length) {
       const match: ?Array<string> = line.match(lineNumberRegexes[k]);
       if (match) {
-        lineNumber = parseInt(match[1]);
+        lineNumber = parseInt(match[1], 10);
         break;
       }
       k++;
     }
 
-    if (fileName && lineNumber) break;
+    if (fileName && lineNumber) {
+      break;
+    }
   }
 
   return fileName && lineNumber ? { fileName, lineNumber } : null;

From 88cd256c60f755380596a4337c16e5f68c372c4e Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sun, 10 Sep 2017 12:59:45 +0530
Subject: [PATCH 5/9] Add a comment about keeping middleware and dev client in
 sync

---
 packages/react-dev-utils/webpackHotDevClient.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 694fcac4e52..ed34cbeb951 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -27,6 +27,7 @@ ErrorOverlay.listenToOpenInEditor(function OpenInEditor({
   fileName,
   lineNumber,
 }) {
+  // Keep this sync with errorOverlayMiddleware.js
   fetch(
     `${launchEditorEndpoint}?fileName=` +
       window.encodeURIComponent(fileName) +

From 64ef981fb15ed5139536f0639ceb2709f31a507b Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Sun, 10 Sep 2017 16:20:53 +0530
Subject: [PATCH 6/9] Remove es6 features from webpack dev client

---
 packages/react-dev-utils/webpackHotDevClient.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index ed34cbeb951..888482dde44 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -23,17 +23,14 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
-ErrorOverlay.listenToOpenInEditor(function OpenInEditor({
-  fileName,
-  lineNumber,
-}) {
+ErrorOverlay.listenToOpenInEditor(function OpenInEditor(errorLocation) {
   // Keep this sync with errorOverlayMiddleware.js
   fetch(
     `${launchEditorEndpoint}?fileName=` +
-      window.encodeURIComponent(fileName) +
+      window.encodeURIComponent(errorLocation.fileName) +
       '&lineNumber=' +
-      window.encodeURIComponent(lineNumber || 1)
-  ).then(() => {}, () => {});
+      window.encodeURIComponent(errorLocation.lineNumber || 1)
+  );
 });
 
 // We need to keep track of if there has been a runtime error.

From 8d36cd94f99a8d0479ab34f5d354198d89675293 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Wed, 4 Oct 2017 22:20:54 +0530
Subject: [PATCH 7/9] Make open-in-editor functionality to work with new iframe
 script

---
 packages/react-error-overlay/src/iframeScript.js | 11 ++++++++---
 packages/react-error-overlay/src/index.js        |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-error-overlay/src/iframeScript.js b/packages/react-error-overlay/src/iframeScript.js
index c95ea36b1a4..161d3451e8f 100644
--- a/packages/react-error-overlay/src/iframeScript.js
+++ b/packages/react-error-overlay/src/iframeScript.js
@@ -19,17 +19,22 @@ function render({
   currentBuildError,
   currentRuntimeErrorRecords,
   dismissRuntimeErrors,
-  launchEditorEndpoint,
+  openInEditor,
 }) {
   if (currentBuildError) {
-    return <CompileErrorContainer error={currentBuildError} />;
+    return (
+      <CompileErrorContainer
+        error={currentBuildError}
+        openInEditor={openInEditor}
+      />
+    );
   }
   if (currentRuntimeErrorRecords.length > 0) {
     return (
       <RuntimeErrorContainer
         errorRecords={currentRuntimeErrorRecords}
         close={dismissRuntimeErrors}
-        launchEditorEndpoint={launchEditorEndpoint}
+        openInEditor={openInEditor}
       />
     );
   }
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index 488e04a2d71..0b741b8222c 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -153,7 +153,7 @@ function updateIframeContent() {
     currentBuildError,
     currentRuntimeErrorRecords,
     dismissRuntimeErrors,
-    launchEditorEndpoint: currentRuntimeErrorOptions.launchEditorEndpoint,
+    openInEditor,
   });
 
   if (!isRendered) {

From a0b35665a19f40bde51153eb06021accd657200d Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Wed, 4 Oct 2017 23:16:10 +0530
Subject: [PATCH 8/9] Rename `openInEditor` to `editorHandler`  -  Remove
 indirection of openInEditorListener  -  Check editorHandler for null before
 styling error clickable

---
 packages/react-dev-utils/webpackHotDevClient.js |  2 +-
 .../src/containers/CompileErrorContainer.js     |  9 +++++----
 .../src/containers/RuntimeError.js              |  6 +++---
 .../src/containers/RuntimeErrorContainer.js     |  4 ++--
 .../src/containers/StackFrame.js                | 15 ++++++++-------
 .../src/containers/StackTrace.js                |  6 +++---
 .../react-error-overlay/src/iframeScript.js     |  6 +++---
 packages/react-error-overlay/src/index.js       | 17 +++++++----------
 8 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 888482dde44..e375c3fab8d 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -23,7 +23,7 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
-ErrorOverlay.listenToOpenInEditor(function OpenInEditor(errorLocation) {
+ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
   // Keep this sync with errorOverlayMiddleware.js
   fetch(
     `${launchEditorEndpoint}?fileName=` +
diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
index 85528142a64..7f689efac2e 100644
--- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -21,19 +21,20 @@ const codeAnchorStyle = {
 
 type Props = {|
   error: string,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
-    const { error, openInEditor } = this.props;
+    const { error, editorHandler } = this.props;
     const errLoc: ?ErrorLocation = parseCompileError(error);
+    const canOpenInEditor = errLoc !== null && editorHandler !== null;
     return (
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
         <a
-          onClick={errLoc ? () => openInEditor(errLoc) : null}
-          style={errLoc ? codeAnchorStyle : null}
+          onClick={canOpenInEditor ? () => editorHandler(errLoc) : null}
+          style={canOpenInEditor ? codeAnchorStyle : null}
         >
           <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
         </a>
diff --git a/packages/react-error-overlay/src/containers/RuntimeError.js b/packages/react-error-overlay/src/containers/RuntimeError.js
index 534d777494d..1db2aba79b9 100644
--- a/packages/react-error-overlay/src/containers/RuntimeError.js
+++ b/packages/react-error-overlay/src/containers/RuntimeError.js
@@ -27,10 +27,10 @@ export type ErrorRecord = {|
 
 type Props = {|
   errorRecord: ErrorRecord,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
-function RuntimeError({ errorRecord, openInEditor }: Props) {
+function RuntimeError({ errorRecord, editorHandler }: Props) {
   const { error, unhandledRejection, contextSize, stackFrames } = errorRecord;
   const errorName = unhandledRejection
     ? 'Unhandled Rejection (' + error.name + ')'
@@ -59,7 +59,7 @@ function RuntimeError({ errorRecord, openInEditor }: Props) {
         stackFrames={stackFrames}
         errorName={errorName}
         contextSize={contextSize}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     </div>
   );
diff --git a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
index 9905b6de48e..91d4a4f5456 100644
--- a/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/RuntimeErrorContainer.js
@@ -19,7 +19,7 @@ import type { ErrorLocation } from '../utils/parseCompileError';
 type Props = {|
   errorRecords: ErrorRecord[],
   close: () => void,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -75,7 +75,7 @@ class RuntimeErrorContainer extends PureComponent<Props, State> {
         )}
         <RuntimeError
           errorRecord={errorRecords[this.state.currentIndex]}
-          openInEditor={this.props.openInEditor}
+          editorHandler={this.props.editorHandler}
         />
         <Footer
           line1="This screen is visible only in development. It will not appear if the app crashes in production."
diff --git a/packages/react-error-overlay/src/containers/StackFrame.js b/packages/react-error-overlay/src/containers/StackFrame.js
index a756ea924b9..9ae9104343e 100644
--- a/packages/react-error-overlay/src/containers/StackFrame.js
+++ b/packages/react-error-overlay/src/containers/StackFrame.js
@@ -49,7 +49,7 @@ type Props = {|
   contextSize: number,
   critical: boolean,
   showCode: boolean,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -85,17 +85,17 @@ class StackFrame extends Component<Props, State> {
     return { fileName, lineNumber: lineNumber || 1 };
   }
 
-  openInEditor = () => {
+  editorHandler = () => {
     const errorLoc = this.getErrorLocation();
     if (!errorLoc) {
       return;
     }
-    this.props.openInEditor(errorLoc);
+    this.props.editorHandler(errorLoc);
   };
 
   onKeyDown = (e: SyntheticKeyboardEvent<>) => {
     if (e.key === 'Enter') {
-      this.openInEditor();
+      this.editorHandler();
     }
   };
 
@@ -155,14 +155,15 @@ class StackFrame extends Component<Props, State> {
       }
     }
 
-    const canOpenInEditor = this.getErrorLocation() !== null;
+    const canOpenInEditor =
+      this.getErrorLocation() !== null && this.props.editorHandler !== null;
     return (
       <div>
         <div>{functionName}</div>
         <div style={linkStyle}>
           <a
             style={canOpenInEditor ? anchorStyle : null}
-            onClick={canOpenInEditor ? this.openInEditor : null}
+            onClick={canOpenInEditor ? this.editorHandler : null}
             onKeyDown={canOpenInEditor ? this.onKeyDown : null}
             tabIndex={canOpenInEditor ? '0' : null}
           >
@@ -172,7 +173,7 @@ class StackFrame extends Component<Props, State> {
         {codeBlockProps && (
           <span>
             <a
-              onClick={canOpenInEditor ? this.openInEditor : null}
+              onClick={canOpenInEditor ? this.editorHandler : null}
               style={canOpenInEditor ? codeAnchorStyle : null}
             >
               <CodeBlock {...codeBlockProps} />
diff --git a/packages/react-error-overlay/src/containers/StackTrace.js b/packages/react-error-overlay/src/containers/StackTrace.js
index 3d846b39ed8..abec286a30c 100644
--- a/packages/react-error-overlay/src/containers/StackTrace.js
+++ b/packages/react-error-overlay/src/containers/StackTrace.js
@@ -26,12 +26,12 @@ type Props = {|
   stackFrames: StackFrameType[],
   errorName: string,
   contextSize: number,
-  openInEditor: (errorLoc: ErrorLocation) => void,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class StackTrace extends Component<Props> {
   renderFrames() {
-    const { stackFrames, errorName, contextSize, openInEditor } = this.props;
+    const { stackFrames, errorName, contextSize, editorHandler } = this.props;
     const renderedFrames = [];
     let hasReachedAppCode = false,
       currentBundle = [],
@@ -55,7 +55,7 @@ class StackTrace extends Component<Props> {
           contextSize={contextSize}
           critical={index === 0}
           showCode={!shouldCollapse}
-          openInEditor={openInEditor}
+          editorHandler={editorHandler}
         />
       );
       const lastElement = index === stackFrames.length - 1;
diff --git a/packages/react-error-overlay/src/iframeScript.js b/packages/react-error-overlay/src/iframeScript.js
index 161d3451e8f..3da820264b4 100644
--- a/packages/react-error-overlay/src/iframeScript.js
+++ b/packages/react-error-overlay/src/iframeScript.js
@@ -19,13 +19,13 @@ function render({
   currentBuildError,
   currentRuntimeErrorRecords,
   dismissRuntimeErrors,
-  openInEditor,
+  editorHandler,
 }) {
   if (currentBuildError) {
     return (
       <CompileErrorContainer
         error={currentBuildError}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     );
   }
@@ -34,7 +34,7 @@ function render({
       <RuntimeErrorContainer
         errorRecords={currentRuntimeErrorRecords}
         close={dismissRuntimeErrors}
-        openInEditor={openInEditor}
+        editorHandler={editorHandler}
       />
     );
   }
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index 0b741b8222c..e46849b92e2 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -23,25 +23,22 @@ type RuntimeReportingOptions = {|
   filename?: string,
 |};
 
-type OpenInEditorListener = (errorLoc: ErrorLocation) => void;
+type EditorHandler = (errorLoc: ErrorLocation) => void;
 
 let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 var isIframeReady: boolean = false;
 
-let openInEditorListener: null | OpenInEditorListener = null;
+let editorHandler: null | OpenInEditorListener = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
 let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;
 let stopListeningToRuntimeErrors: null | (() => void) = null;
 
-export function listenToOpenInEditor(listener: OpenInEditorListener) {
-  openInEditorListener = listener;
-}
-
-function openInEditor(errorLoc: ErrorLocation) {
-  if (typeof openInEditorListener === 'function') {
-    openInEditorListener(errorLoc);
+export function setEditorHandler(handler: EditorHandler | null) {
+  editorHandler = handler;
+  if (iframe) {
+    update();
   }
 }
 
@@ -153,7 +150,7 @@ function updateIframeContent() {
     currentBuildError,
     currentRuntimeErrorRecords,
     dismissRuntimeErrors,
-    openInEditor,
+    editorHandler,
   });
 
   if (!isRendered) {

From ae18e55f02c9ff39013c60fdb55bd83c143ecc66 Mon Sep 17 00:00:00 2001
From: Tharaka Wijebandara <tharaka.nw@gmail.com>
Date: Wed, 4 Oct 2017 23:51:26 +0530
Subject: [PATCH 9/9] Fix flow errors

---
 .../src/containers/CompileErrorContainer.js                   | 4 +++-
 packages/react-error-overlay/src/index.js                     | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
index 7f689efac2e..9d1e399fd10 100644
--- a/packages/react-error-overlay/src/containers/CompileErrorContainer.js
+++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -33,7 +33,9 @@ class CompileErrorContainer extends PureComponent<Props, void> {
       <ErrorOverlay>
         <Header headerText="Failed to compile" />
         <a
-          onClick={canOpenInEditor ? () => editorHandler(errLoc) : null}
+          onClick={
+            canOpenInEditor && errLoc ? () => editorHandler(errLoc) : null
+          }
           style={canOpenInEditor ? codeAnchorStyle : null}
         >
           <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index e46849b92e2..a800595cffb 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -29,7 +29,7 @@ let iframe: null | HTMLIFrameElement = null;
 let isLoadingIframe: boolean = false;
 var isIframeReady: boolean = false;
 
-let editorHandler: null | OpenInEditorListener = null;
+let editorHandler: null | EditorHandler = null;
 let currentBuildError: null | string = null;
 let currentRuntimeErrorRecords: Array<ErrorRecord> = [];
 let currentRuntimeErrorOptions: null | RuntimeReportingOptions = null;