Reactor code to reuse open-in-editor functionality in both build and runtime error overlays

Author: tharakawj

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;
   },

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)} />

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>
   );

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."

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>

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;

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 {

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;