Convert react-error-overlay to React (#2515)

* Convert react-error-overlay to React

* Update compile-time error overlay to use react-error-overlay components

 * Refactor react-error-overlay components to container and presentational components.

 * Make the compile-time error overlay a part of react-error-overlay package.

 * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.

* Run Prettier

* Move the function name fix into StackFrame itself

* Fix clicking on source code snippet to open the code in editor

* Use exact objects + minor style tweak

* Don't linkify frames that don't exist on the disk

* Fix lint

* Consolidate iframe rendering logic

* Remove circular dependency between react-dev-utils and react-error-overlay

* Fix lint

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

* Deduplicate identical errors

Author: tharakawj

packages/react-error-overlay/middleware.js renamed to packages/react-dev-utils/errorOverlayMiddleware.js

@@ -8,12 +8,12 @@
  */
 'use strict';
 
-const launchEditor = require('react-dev-utils/launchEditor');
+const launchEditor = require('./launchEditor');
+const launchEditorEndpoint = require('./launchEditorEndpoint');
 
 module.exports = function createLaunchEditorMiddleware() {
   return function launchEditorMiddleware(req, res, next) {
-    // Keep this in sync with react-error-overlay
-    if (req.url.startsWith('/__open-stack-frame-in-editor')) {
+    if (req.url.startsWith(launchEditorEndpoint)) {
       launchEditor(req.query.fileName, req.query.lineNumber);
       res.end();
     } else {

packages/react-error-overlay/src/utils/dom/consumeEvent.js renamed to packages/react-dev-utils/launchEditorEndpoint.js

@@ -6,13 +6,7 @@
  * 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';
 
-/* @flow */
-function consumeEvent(e: Event) {
-  e.preventDefault();
-  if (typeof e.target.blur === 'function') {
-    e.target.blur();
-  }
-}
-
-export { consumeEvent };
+// 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

@@ -11,19 +11,20 @@
     "node": ">=6"
   },
   "files": [
-    "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
     "crashOverlay.js",
     "crossSpawn.js",
     "eslintFormatter.js",
+    "errorOverlayMiddleware.js",
     "FileSizeReporter.js",
     "printBuildError.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",
     "inquirer.js",
     "InterpolateHtmlPlugin.js",
     "launchEditor.js",
+    "launchEditorEndpoint.js",
     "ModuleScopePlugin.js",
     "noopServiceWorkerMiddleware.js",
     "openBrowser.js",
@@ -35,7 +36,6 @@
   ],
   "dependencies": {
     "address": "1.0.2",
-    "anser": "1.4.1",
     "babel-code-frame": "6.22.0",
     "chalk": "1.1.3",
     "cross-spawn": "5.1.0",
@@ -44,10 +44,10 @@
     "filesize": "3.5.10",
     "global-modules": "1.0.0",
     "gzip-size": "3.0.0",
-    "html-entities": "1.2.1",
     "inquirer": "3.2.1",
     "is-root": "1.0.0",
     "opn": "5.1.0",
+    "react-error-overlay": "^1.0.9",
     "recursive-readdir": "2.2.1",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",

packages/react-dev-utils/webpackHotDevClient.js

@@ -21,143 +21,27 @@
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
+var launchEditorEndpoint = require('./launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
-var ansiHTML = require('./ansiHTML');
-
-function createOverlayIframe(onIframeLoad) {
-  var iframe = document.createElement('iframe');
-  iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
-  iframe.src = 'about:blank';
-  iframe.style.position = 'fixed';
-  iframe.style.left = 0;
-  iframe.style.top = 0;
-  iframe.style.right = 0;
-  iframe.style.bottom = 0;
-  iframe.style.width = '100vw';
-  iframe.style.height = '100vh';
-  iframe.style.border = 'none';
-  iframe.style.zIndex = 2147483647;
-  iframe.onload = onIframeLoad;
-  return iframe;
-}
-
-function addOverlayDivTo(iframe) {
-  // TODO: unify these styles with react-error-overlay
-  iframe.contentDocument.body.style.margin = 0;
-  iframe.contentDocument.body.style.maxWidth = '100vw';
-
-  var outerDiv = iframe.contentDocument.createElement('div');
-  outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
-  outerDiv.style.width = '100%';
-  outerDiv.style.height = '100%';
-  outerDiv.style.boxSizing = 'border-box';
-  outerDiv.style.textAlign = 'center';
-  outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
-
-  var div = iframe.contentDocument.createElement('div');
-  div.style.position = 'relative';
-  div.style.display = 'inline-flex';
-  div.style.flexDirection = 'column';
-  div.style.height = '100%';
-  div.style.width = '1024px';
-  div.style.maxWidth = '100%';
-  div.style.overflowX = 'hidden';
-  div.style.overflowY = 'auto';
-  div.style.padding = '0.5rem';
-  div.style.boxSizing = 'border-box';
-  div.style.textAlign = 'left';
-  div.style.fontFamily = 'Consolas, Menlo, monospace';
-  div.style.fontSize = '11px';
-  div.style.whiteSpace = 'pre-wrap';
-  div.style.wordBreak = 'break-word';
-  div.style.lineHeight = '1.5';
-  div.style.color = 'rgb(41, 50, 56)';
-
-  outerDiv.appendChild(div);
-  iframe.contentDocument.body.appendChild(outerDiv);
-  return div;
-}
-
-function overlayHeaderStyle() {
-  return (
-    'font-size: 2em;' +
-    'font-family: sans-serif;' +
-    'color: rgb(206, 17, 38);' +
-    'white-space: pre-wrap;' +
-    'margin: 0 2rem 0.75rem 0px;' +
-    'flex: 0 0 auto;' +
-    'max-height: 35%;' +
-    'overflow: auto;'
-  );
-}
-
-var overlayIframe = null;
-var overlayDiv = null;
-var lastOnOverlayDivReady = null;
-
-function ensureOverlayDivExists(onOverlayDivReady) {
-  if (overlayDiv) {
-    // Everything is ready, call the callback right away.
-    onOverlayDivReady(overlayDiv);
-    return;
-  }
-
-  // Creating an iframe may be asynchronous so we'll schedule the callback.
-  // In case of multiple calls, last callback wins.
-  lastOnOverlayDivReady = onOverlayDivReady;
-
-  if (overlayIframe) {
-    // We're already creating it.
-    return;
-  }
-
-  // Create iframe and, when it is ready, a div inside it.
-  overlayIframe = createOverlayIframe(function onIframeLoad() {
-    overlayDiv = addOverlayDivTo(overlayIframe);
-    // Now we can talk!
-    lastOnOverlayDivReady(overlayDiv);
-  });
-
-  // Zalgo alert: onIframeLoad() will be called either synchronously
-  // or asynchronously depending on the browser.
-  // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
-  document.body.appendChild(overlayIframe);
-}
+var ErrorOverlay = require('react-error-overlay');
+
+ErrorOverlay.startReportingRuntimeErrors({
+  launchEditorEndpoint: launchEditorEndpoint,
+  onError: function() {
+    // TODO: why do we need this?
+    if (module.hot && typeof module.hot.decline === 'function') {
+      module.hot.decline();
+    }
+  },
+});
 
-function showErrorOverlay(message) {
-  ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
-    // TODO: unify this with our runtime overlay
-    overlayDiv.innerHTML =
-      '<div style="' +
-      overlayHeaderStyle() +
-      '">Failed to compile</div>' +
-      '<pre style="' +
-      'display: block; padding: 0.5em; margin-top: 0; ' +
-      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
-      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
-      '<code style="font-family: Consolas, Menlo, monospace;">' +
-      ansiHTML(message) +
-      '</code></pre>' +
-      '<div style="' +
-      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
-      'flex: 0 0 auto">' +
-      'This error occurred during the build time and cannot be dismissed.</div>';
+if (module.hot && typeof module.hot.dispose === 'function') {
+  module.hot.dispose(function() {
+    // TODO: why do we need this?
+    ErrorOverlay.stopReportingRuntimeErrors();
   });
 }
 
-function destroyErrorOverlay() {
-  if (!overlayDiv) {
-    // It is not there in the first place.
-    return;
-  }
-
-  // Clean up and reset internal state.
-  document.body.removeChild(overlayIframe);
-  overlayDiv = null;
-  overlayIframe = null;
-  lastOnOverlayDivReady = null;
-}
-
 // Connect to WebpackDevServer via a socket.
 var connection = new SockJS(
   url.format({
@@ -205,9 +89,9 @@ function handleSuccess() {
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
     tryApplyUpdates(function onHotUpdateSuccess() {
-      // Only destroy it when we're sure it's a hot update.
+      // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
   }
 }
@@ -247,9 +131,9 @@ function handleWarnings(warnings) {
       // Only print warnings if we aren't refreshing the page.
       // Otherwise they'll disappear right away anyway.
       printWarnings();
-      // Only destroy it when we're sure it's a hot update.
+      // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
   } else {
     // Print initial warnings immediately.
@@ -271,7 +155,7 @@ function handleErrors(errors) {
   });
 
   // Only show the first error.
-  showErrorOverlay(formatted.errors[0]);
+  ErrorOverlay.reportBuildError(formatted.errors[0]);
 
   // Also log them to the console.
   if (typeof console !== 'undefined' && typeof console.error === 'function') {

packages/react-error-overlay/.flowconfig

@@ -1,4 +1,5 @@
 [ignore]
+.*/node_modules/eslint-plugin-jsx-a11y/.*
 
 [include]
 src/**/*.js

packages/react-error-overlay/fixtures/bundle.json

@@ -240,11 +240,11 @@
     ]
   },
   {
-    "functionName": "Object.batchedUpdates",
+    "functionName": "batchedUpdates",
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 33900,
     "columnNumber": 26,
-    "_originalFunctionName": "Object.batchedUpdates",
+    "_originalFunctionName": "batchedUpdates",
     "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactDefaultBatchingStrategy.js",
     "_originalLineNumber": 62,
     "_originalColumnNumber": 0,
@@ -264,11 +264,11 @@
     ]
   },
   {
-    "functionName": "Object.batchedUpdates",
+    "functionName": "batchedUpdates",
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 2181,
     "columnNumber": 27,
-    "_originalFunctionName": "Object.batchedUpdates",
+    "_originalFunctionName": "batchedUpdates",
     "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactUpdates.js",
     "_originalLineNumber": 97,
     "_originalColumnNumber": 0,
@@ -288,11 +288,11 @@
     ]
   },
   {
-    "functionName": "Object._renderNewRootComponent",
+    "functionName": "_renderNewRootComponent",
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 14398,
     "columnNumber": 18,
-    "_originalFunctionName": "Object._renderNewRootComponent",
+    "_originalFunctionName": "_renderNewRootComponent",
     "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
     "_originalLineNumber": 320,
     "_originalColumnNumber": 0,
@@ -312,11 +312,11 @@
     ]
   },
   {
-    "functionName": "Object._renderSubtreeIntoContainer",
+    "functionName": "_renderSubtreeIntoContainer",
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 14479,
     "columnNumber": 32,
-    "_originalFunctionName": "Object._renderSubtreeIntoContainer",
+    "_originalFunctionName": "_renderSubtreeIntoContainer",
     "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
     "_originalLineNumber": 401,
     "_originalColumnNumber": 0,
@@ -336,11 +336,11 @@
     ]
   },
   {
-    "functionName": "Object.render",
+    "functionName": "render",
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 14500,
     "columnNumber": 23,
-    "_originalFunctionName": "Object.render",
+    "_originalFunctionName": "render",
     "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js",
     "_originalLineNumber": 422,
     "_originalColumnNumber": 0,
@@ -360,11 +360,11 @@
     ]
   },
   {
-    "functionName": "Object.friendlySyntaxErrorLabel",
+    "functionName": null,
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 17287,
     "columnNumber": 20,
-    "_originalFunctionName": "Object.friendlySyntaxErrorLabel",
+    "_originalFunctionName": null,
     "_originalFileName": "webpack:///packages/react-scripts/template/src/index.js",
     "_originalLineNumber": 6,
     "_originalColumnNumber": 0,
@@ -432,11 +432,11 @@
     ]
   },
   {
-    "functionName": "Object.<anonymous>",
+    "functionName": null,
     "fileName": "http://localhost:3000/static/js/bundle.js",
     "lineNumber": 41219,
     "columnNumber": 18,
-    "_originalFunctionName": "Object.<anonymous>",
+    "_originalFunctionName": null,
     "_originalFileName": null,
     "_originalLineNumber": null,
     "_originalColumnNumber": null,

packages/react-error-overlay/package.json

@@ -34,7 +34,9 @@
     "anser": "1.4.1",
     "babel-code-frame": "6.22.0",
     "babel-runtime": "6.23.0",
-    "react-dev-utils": "^3.1.0",
+    "html-entities": "1.2.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "settle-promise": "1.0.0",
     "source-map": "0.5.6"
   },

packages/react-error-overlay/src/__tests__/stack-frame.js

@@ -13,9 +13,9 @@ test('proper empty shape', () => {
   const empty = new StackFrame();
   expect(empty).toMatchSnapshot();
 
-  expect(empty.getFunctionName()).toBe(null);
+  expect(empty.getFunctionName()).toBe('(anonymous function)');
   expect(empty.getSource()).toBe('');
-  expect(empty.toString()).toBe('');
+  expect(empty.toString()).toBe('(anonymous function)');
 });
 
 test('proper full shape', () => {