Skip to content

Commit

Permalink
Convert react-error-overlay to React (facebook#2515)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
tharakawj authored and thongdong7 committed Sep 24, 2017
1 parent 6df5203 commit c0aaf75
Show file tree
Hide file tree
Showing 48 changed files with 1,273 additions and 1,473 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
6 changes: 3 additions & 3 deletions packages/react-dev-utils/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
158 changes: 21 additions & 137 deletions packages/react-dev-utils/webpackHotDevClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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();
});
}
}
Expand Down Expand Up @@ -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.
Expand All @@ -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') {
Expand Down
1 change: 1 addition & 0 deletions packages/react-error-overlay/.flowconfig
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
[ignore]
.*/node_modules/eslint-plugin-jsx-a11y/.*

[include]
src/**/*.js
Expand Down
28 changes: 14 additions & 14 deletions packages/react-error-overlay/fixtures/bundle.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion packages/react-error-overlay/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/react-error-overlay/src/__tests__/stack-frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Loading

0 comments on commit c0aaf75

Please sign in to comment.