Implement click-to-open for babel syntax errors in build error overlay

Author: tharakawj

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

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;