Merge branch 'master' of https://github.com/facebookincubator/create-…

…react-app * 'master' of https://github.com/facebookincubator/create-react-app: Update README.md Fix dead link to Jest "expect" docs (facebook#3289) Use production React version for bundled overlay (facebook#3267) Add warning when using `react-error-overlay` in production (facebook#3264) Add external links to deployment services (facebook#3265) `react-error-overlay` has no dependencies now (facebook#3263) Add click-to-open support for build errors (facebook#3100) Update style-loader and disable inclusion of its HMR code in builds (facebook#3236) Update url-loader to 0.6.2 for mime ReDoS vuln (facebook#3246)
matart15 · Oct 19, 2017 · 24dfb58 · 24dfb58
2 parents 2da46d4 + 1a3017b
commit 24dfb58
Show file tree

Hide file tree

Showing 15 changed files with 205 additions and 82 deletions.
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
@@ -23,6 +23,16 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
+ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
+  // Keep this sync with errorOverlayMiddleware.js
+  fetch(
+    `${launchEditorEndpoint}?fileName=` +
+      window.encodeURIComponent(errorLocation.fileName) +
+      '&lineNumber=' +
+      window.encodeURIComponent(errorLocation.lineNumber || 1)
+  );
+});
+
 // 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 +41,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/package.json b/packages/react-error-overlay/package.json
@@ -27,25 +27,16 @@
   ],
   "author": "Joe Haddad <[email protected]>",
   "files": [
-    "lib/",
-    "middleware.js"
+    "lib/index.js"
   ],
-  "dependencies": {
+  "devDependencies": {
     "anser": "1.4.1",
     "babel-code-frame": "6.22.0",
-    "babel-runtime": "6.26.0",
-    "html-entities": "1.2.1",
-    "object-assign": "4.1.1",
-    "promise": "8.0.1",
-    "react": "^15 || ^16",
-    "react-dom": "^15 || ^16",
-    "settle-promise": "1.0.0",
-    "source-map": "0.5.6"
-  },
-  "devDependencies": {
+    "babel-core": "^6.26.0",
     "babel-eslint": "7.2.3",
-    "babel-preset-react-app": "^3.0.3",
     "babel-loader": "^7.1.2",
+    "babel-preset-react-app": "^3.0.3",
+    "babel-runtime": "6.26.0",
     "chalk": "^2.1.0",
     "chokidar": "^1.7.0",
     "cross-env": "5.0.5",
@@ -56,10 +47,17 @@
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.1.0",
     "flow-bin": "^0.54.0",
+    "html-entities": "1.2.1",
     "jest": "20.0.4",
     "jest-fetch-mock": "1.2.1",
+    "object-assign": "4.1.1",
+    "promise": "8.0.1",
     "raw-loader": "^0.5.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rimraf": "^2.6.1",
+    "settle-promise": "1.0.0",
+    "source-map": "0.5.6",
     "webpack": "^3.6.0"
   },
   "jest": {

diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js
@@ -12,18 +12,34 @@ 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,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class CompileErrorContainer extends PureComponent<Props, void> {
   render() {
-    const { error } = 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" />
-        <CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
+        <a
+          onClick={
+            canOpenInEditor && errLoc ? () => editorHandler(errLoc) : null
+          }
+          style={canOpenInEditor ? 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/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,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
-function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
+function RuntimeError({ errorRecord, editorHandler }: 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}
+        editorHandler={editorHandler}
       />
     </div>
   );

diff --git 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,
+  editorHandler: (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}
+          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
@@ -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,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 type State = {|
@@ -66,47 +67,35 @@ 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) {
+  editorHandler = () => {
+    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.editorHandler(errorLoc);
   };
 
   onKeyDown = (e: SyntheticKeyboardEvent<>) => {
     if (e.key === 'Enter') {
-      this.openInEditor();
+      this.editorHandler();
     }
   };
 
@@ -166,14 +155,15 @@ class StackFrame extends Component<Props, State> {
       }
     }
 
-    const canOpenInEditor = this.getEndpointUrl() !== 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}
           >
@@ -183,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
@@ -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,
+  editorHandler: (errorLoc: ErrorLocation) => void,
 |};
 
 class StackTrace extends Component<Props> {
   renderFrames() {
-    const {
-      stackFrames,
-      errorName,
-      contextSize,
-      launchEditorEndpoint,
-    } = this.props;
+    const { stackFrames, errorName, contextSize, editorHandler } = 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}
+          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
@@ -19,17 +19,22 @@ function render({
   currentBuildError,
   currentRuntimeErrorRecords,
   dismissRuntimeErrors,
-  launchEditorEndpoint,
+  editorHandler,
 }) {
   if (currentBuildError) {
-    return <CompileErrorContainer error={currentBuildError} />;
+    return (
+      <CompileErrorContainer
+        error={currentBuildError}
+        editorHandler={editorHandler}
+      />
+    );
   }
   if (currentRuntimeErrorRecords.length > 0) {
     return (
       <RuntimeErrorContainer
         errorRecords={currentRuntimeErrorRecords}
         close={dismissRuntimeErrors}
-        launchEditorEndpoint={launchEditorEndpoint}
+        editorHandler={editorHandler}
       />
     );
   }