From 1e43349583bb3582b34f6e36d77275116082d42a Mon Sep 17 00:00:00 2001 From: Tharaka Wijebandara Date: Sun, 11 Jun 2017 12:36:45 +0530 Subject: [PATCH] Convert react-error-overlay to React --- packages/react-error-overlay/package.json | 2 + .../src/components/CloseButton.js | 38 ++ .../src/components/{code.js => CodeBlock.js} | 71 ++-- .../src/components/Collapsible.js | 80 ++++ .../src/components/ErrorOverlay.js | 112 ++++++ .../src/components/ErrorView.js | 46 +++ .../src/components/Footer.js | 31 ++ .../src/components/Header.js | 51 +++ .../src/components/NavigationBar.js | 66 ++++ .../src/components/StackFrame.js | 176 +++++++++ .../src/components/StackTrace.js | 83 ++++ .../src/components/additional.js | 72 ---- .../src/components/close.js | 35 -- .../src/components/footer.js | 31 -- .../src/components/frame.js | 355 ------------------ .../src/components/frames.js | 132 ------- .../src/components/overlay.js | 95 ----- .../src/effects/shortcuts.js | 53 --- packages/react-error-overlay/src/overlay.js | 190 +++------- packages/react-error-overlay/src/styles.js | 178 +-------- .../src/utils/dom/consumeEvent.js | 18 - .../src/utils/dom/enableTabClick.js | 24 -- .../src/utils/getPrettyURL.js | 49 +++ .../{errorRegister.js => getStackFrames.js} | 40 +- .../src/utils/isBultinErrorName.js | 27 ++ 25 files changed, 866 insertions(+), 1189 deletions(-) create mode 100644 packages/react-error-overlay/src/components/CloseButton.js rename packages/react-error-overlay/src/components/{code.js => CodeBlock.js} (69%) create mode 100644 packages/react-error-overlay/src/components/Collapsible.js create mode 100644 packages/react-error-overlay/src/components/ErrorOverlay.js create mode 100644 packages/react-error-overlay/src/components/ErrorView.js create mode 100644 packages/react-error-overlay/src/components/Footer.js create mode 100644 packages/react-error-overlay/src/components/Header.js create mode 100644 packages/react-error-overlay/src/components/NavigationBar.js create mode 100644 packages/react-error-overlay/src/components/StackFrame.js create mode 100644 packages/react-error-overlay/src/components/StackTrace.js delete mode 100644 packages/react-error-overlay/src/components/additional.js delete mode 100644 packages/react-error-overlay/src/components/close.js delete mode 100644 packages/react-error-overlay/src/components/footer.js delete mode 100644 packages/react-error-overlay/src/components/frame.js delete mode 100644 packages/react-error-overlay/src/components/frames.js delete mode 100644 packages/react-error-overlay/src/components/overlay.js delete mode 100644 packages/react-error-overlay/src/effects/shortcuts.js delete mode 100644 packages/react-error-overlay/src/utils/dom/consumeEvent.js delete mode 100644 packages/react-error-overlay/src/utils/dom/enableTabClick.js create mode 100644 packages/react-error-overlay/src/utils/getPrettyURL.js rename packages/react-error-overlay/src/utils/{errorRegister.js => getStackFrames.js} (59%) create mode 100644 packages/react-error-overlay/src/utils/isBultinErrorName.js diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 15bf9e484b4..c9a7508a903 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -34,7 +34,9 @@ "anser": "1.2.5", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", + "react": "^15.5.4", "react-dev-utils": "^3.0.2", + "react-dom": "^15.5.4", "settle-promise": "1.0.0", "source-map": "0.5.6" }, diff --git a/packages/react-error-overlay/src/components/CloseButton.js b/packages/react-error-overlay/src/components/CloseButton.js new file mode 100644 index 00000000000..51a1a0c7b78 --- /dev/null +++ b/packages/react-error-overlay/src/components/CloseButton.js @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React from 'react'; +import { black } from '../styles'; + +const closeButtonStyle = { + color: black, + lineHeight: '1rem', + fontSize: '1.5rem', + padding: '1rem', + cursor: 'pointer', + position: 'absolute', + right: 0, + top: 0, +}; + +type CloseCallback = () => void; +function CloseButton({ close }: { close: CloseCallback }) { + return ( + + × + + ); +} + +export default CloseButton; diff --git a/packages/react-error-overlay/src/components/code.js b/packages/react-error-overlay/src/components/CodeBlock.js similarity index 69% rename from packages/react-error-overlay/src/components/code.js rename to packages/react-error-overlay/src/components/CodeBlock.js index 580fe3b1be5..ce5c11dd212 100644 --- a/packages/react-error-overlay/src/components/code.js +++ b/packages/react-error-overlay/src/components/CodeBlock.js @@ -8,33 +8,58 @@ */ /* @flow */ -import type { ScriptLine } from '../utils/stack-frame'; +import React from 'react'; import { applyStyles } from '../utils/dom/css'; import { absolutifyCaret } from '../utils/dom/absolutifyCaret'; +import type { ScriptLine } from '../utils/stack-frame'; import { - codeStyle, primaryErrorStyle, - primaryPreStyle, secondaryErrorStyle, - secondaryPreStyle, + redTransparent, + yellowTransparent, } from '../styles'; import generateAnsiHtml from 'react-dev-utils/ansiHTML'; import codeFrame from 'babel-code-frame'; -function createCode( - document: Document, - sourceLines: ScriptLine[], +const _preStyle = { + display: 'block', + padding: '0.5em', + marginTop: '0.5em', + marginBottom: '0.5em', + overflowX: 'auto', + whiteSpace: 'pre-wrap', + borderRadius: '0.25rem', +}; + +const primaryPreStyle = { + ..._preStyle, + backgroundColor: redTransparent, +}; + +const secondaryPreStyle = { + ..._preStyle, + backgroundColor: yellowTransparent, +}; + +const codeStyle = { + fontFamily: 'Consolas, Menlo, monospace', +}; + +type CodeBlockPropsType = { + lines: ScriptLine[], lineNum: number, - columnNum: number | null, + columnNum: number, contextSize: number, main: boolean, - onSourceClick: ?Function -) { +}; + +function CodeBlock(props: CodeBlockPropsType) { + const { lines, lineNum, columnNum, contextSize, main } = props; const sourceCode = []; let whiteSpace = Infinity; - sourceLines.forEach(function(e) { + lines.forEach(function(e) { const { content: text } = e; const m = text.match(/^\s*/); if (text === '') { @@ -46,7 +71,7 @@ function createCode( whiteSpace = 0; } }); - sourceLines.forEach(function(e) { + lines.forEach(function(e) { let { content: text } = e; const { lineNumber: line } = e; @@ -69,7 +94,6 @@ function createCode( const code = document.createElement('code'); code.innerHTML = htmlHighlight; absolutifyCaret(code); - applyStyles(code, codeStyle); const ccn = code.childNodes; // eslint-disable-next-line @@ -91,19 +115,14 @@ function createCode( break oLoop; } } - const pre = document.createElement('pre'); - applyStyles(pre, main ? primaryPreStyle : secondaryPreStyle); - pre.appendChild(code); - if (typeof onSourceClick === 'function') { - let handler = onSourceClick; - pre.style.cursor = 'pointer'; - pre.addEventListener('click', function() { - handler(); - }); - } - - return pre; + const preStyle = main ? primaryPreStyle : secondaryPreStyle; + const codeBlock = { __html: code.innerHTML }; + return ( + 
+      
+
+ ); } -export { createCode }; +export default CodeBlock; diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js new file mode 100644 index 00000000000..3d474d4e204 --- /dev/null +++ b/packages/react-error-overlay/src/components/Collapsible.js @@ -0,0 +1,80 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React, { Component } from 'react'; +import { black } from '../styles'; + +const _collapsibleStyle = { + color: black, + cursor: 'pointer', + border: 'none', + display: 'block', + width: '100%', + textAlign: 'left', + background: '#fff', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '1em', + padding: '0px', + lineHeight: '1.5', +}; + +const collapsibleCollapsedStyle = { + ..._collapsibleStyle, + marginBottom: '1.5em', +}; + +const collapsibleExpandedStyle = { + ..._collapsibleStyle, + marginBottom: '0.6em', +}; + +class Collapsible extends Component { + state = { + collapsed: true, + }; + + toggleCollaped = () => { + this.setState(state => ({ + collapsed: !state.collapsed, + })); + }; + + render() { + const count = this.props.children.length; + const collapsed = this.state.collapsed; + return ( +
+ +
+ {this.props.children} + +
+
+ ); + } +} + +export default Collapsible; diff --git a/packages/react-error-overlay/src/components/ErrorOverlay.js b/packages/react-error-overlay/src/components/ErrorOverlay.js new file mode 100644 index 00000000000..670a4b10989 --- /dev/null +++ b/packages/react-error-overlay/src/components/ErrorOverlay.js @@ -0,0 +1,112 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React, { PureComponent } from 'react'; +import CloseButton from './CloseButton'; +import NavigationBar from './NavigationBar'; +import ErrorView from './ErrorView'; +import Footer from './Footer'; +import { black } from '../styles'; + +const overlayStyle = { + position: 'relative', + display: 'inline-flex', + flexDirection: 'column', + height: '100%', + width: '1024px', + maxWidth: '100%', + overflowX: 'hidden', + overflowY: 'auto', + padding: '0.5rem', + boxSizing: 'border-box', + textAlign: 'left', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '11px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + lineHeight: 1.5, + color: black, +}; + +class ErrorOverlay extends PureComponent { + state = { + currentIndex: 0, + }; + iframeWindow: window = null; + + previous = () => { + this.setState((state, props) => ({ + currentIndex: state.currentIndex > 0 + ? state.currentIndex - 1 + : props.errorRecords.length - 1, + })); + }; + + next = () => { + this.setState((state, props) => ({ + currentIndex: state.currentIndex < props.errorRecords.length - 1 + ? state.currentIndex + 1 + : 0, + })); + }; + + handleSortcuts = (e: KeyboardEvent) => { + const { key } = e; + if (key === 'Escape') { + this.props.close(); + } else if (key === 'ArrowLeft') { + this.previous(); + } else if (key === 'ArrowRight') { + this.next(); + } + }; + + getIframeWindow = (element: HTMLDivElement) => { + if (element) { + const document = element.ownerDocument; + this.iframeWindow = document.defaultView; + } + }; + + componentDidMount() { + window.addEventListener('keydown', this.handleSortcuts); + if (this.iframeWindow) { + this.iframeWindow.addEventListener('keydown', this.handleSortcuts); + } + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleSortcuts); + if (this.iframeWindow) { + this.iframeWindow.removeEventListener('keydown', this.handleSortcuts); + } + } + + render() { + const { errorRecords, close } = this.props; + const totalErrors = errorRecords.length; + return ( +
+ + {totalErrors > 1 && + } + +
+
+ ); + } +} + +export default ErrorOverlay; diff --git a/packages/react-error-overlay/src/components/ErrorView.js b/packages/react-error-overlay/src/components/ErrorView.js new file mode 100644 index 00000000000..84726b2816e --- /dev/null +++ b/packages/react-error-overlay/src/components/ErrorView.js @@ -0,0 +1,46 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React from 'react'; +import Header from './Header'; +import StackTrace from './StackTrace'; +import type { StackFrame } from '../utils/stack-frame'; + +const wrapperStyle = { + display: 'flex', + flexDirection: 'column', +}; + +type ErrorRecord = { + error: Error, + unhandledRejection: boolean, + contextSize: number, + stackFrames: StackFrame[], +}; + +function ErrorView({ errorRecord }: { errorRecord: ErrorRecord }) { + const { error, unhandledRejection, contextSize, stackFrames } = errorRecord; + const errorName = unhandledRejection + ? 'Unhandled Rejection (' + error.name + ')' + : error.name; + + return ( +
+
+ +
+ ); +} + +export default ErrorView; diff --git a/packages/react-error-overlay/src/components/Footer.js b/packages/react-error-overlay/src/components/Footer.js new file mode 100644 index 00000000000..132d8feb7e7 --- /dev/null +++ b/packages/react-error-overlay/src/components/Footer.js @@ -0,0 +1,31 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React from 'react'; +import { darkGray } from '../styles'; + +const footerStyle = { + fontFamily: 'sans-serif', + color: darkGray, + marginTop: '0.5rem', + flex: '0 0 auto', +}; + +function Footer() { + return ( +
+ This screen is visible only in development. It will not appear if the app crashes in production. +
+ Open your browser’s developer console to further inspect this error. +
+ ); +} + +export default Footer; diff --git a/packages/react-error-overlay/src/components/Header.js b/packages/react-error-overlay/src/components/Header.js new file mode 100644 index 00000000000..59999d4e451 --- /dev/null +++ b/packages/react-error-overlay/src/components/Header.js @@ -0,0 +1,51 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React from 'react'; +import { red } from '../styles'; + +const headerStyle = { + fontSize: '2em', + fontFamily: 'sans-serif', + color: red, + whiteSpace: 'pre-wrap', + // Top bottom margin spaces header + // Right margin revents overlap with close button + margin: '0 2rem 0.75rem 0', + flex: '0 0 auto', + maxHeight: '50%', + overflow: 'auto', +}; + +function Header({ name, message }: { name: string, message: string }) { + // Make message prettier + let finalMessage = message.match(/^\w*:/) || !name + ? message + : name + ': ' + message; + + finalMessage = finalMessage + // TODO: maybe remove this prefix from fbjs? + // It's just scaring people + .replace(/^Invariant Violation:\s*/, '') + // This is not helpful either: + .replace(/^Warning:\s*/, '') + // Break the actionable part to the next line. + // AFAIK React 16+ should already do this. + .replace(' Check the render method', '\n\nCheck the render method') + .replace(' Check your code at', '\n\nCheck your code at'); + + return ( +
+ {finalMessage} +
+ ); +} + +export default Header; diff --git a/packages/react-error-overlay/src/components/NavigationBar.js b/packages/react-error-overlay/src/components/NavigationBar.js new file mode 100644 index 00000000000..6c8e559b2fa --- /dev/null +++ b/packages/react-error-overlay/src/components/NavigationBar.js @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React from 'react'; +import { red, redTransparent } from '../styles'; + +const navigationBarStyle = { + marginBottom: '0.5rem', +}; + +const buttonContainerStyle = { + marginRight: '1em', +}; + +const _navButtonStyle = { + backgroundColor: redTransparent, + color: red, + border: 'none', + borderRadius: '4px', + padding: '3px 6px', + cursor: 'pointer', +}; + +const leftButtonStyle = { + ..._navButtonStyle, + borderTopRightRadius: '0px', + borderBottomRightRadius: '0px', + marginRight: '1px', +}; + +const rightButtonStyle = { + ..._navButtonStyle, + borderTopLeftRadius: '0px', + borderBottomLeftRadius: '0px', +}; + +type Callback = () => void; + +type NavigationBarPropsType = { + currentError: number, + totalErrors: number, + previous: Callback, + next: Callback, +}; + +function NavigationBar(props: NavigationBarPropsType) { + const { currentError, totalErrors, previous, next } = props; + return ( +
+ + + + + {`${currentError} of ${totalErrors} errors on the page`} +
+ ); +} + +export default NavigationBar; diff --git a/packages/react-error-overlay/src/components/StackFrame.js b/packages/react-error-overlay/src/components/StackFrame.js new file mode 100644 index 00000000000..3b45b5a9b23 --- /dev/null +++ b/packages/react-error-overlay/src/components/StackFrame.js @@ -0,0 +1,176 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React, { Component } from 'react'; +import CodeBlock from './CodeBlock'; +import { getPrettyURL } from '../utils/getPrettyURL'; +import { darkGray } from '../styles'; + +const linkStyle = { + fontSize: '0.9em', + marginBottom: '0.9em', +}; + +const anchorStyle = { + textDecoration: 'none', + color: darkGray, + cursor: 'pointer', +}; + +const toggleStyle = { + marginBottom: '1.5em', + color: darkGray, + cursor: 'pointer', + border: 'none', + display: 'block', + width: '100%', + textAlign: 'left', + background: '#fff', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '1em', + padding: '0px', + lineHeight: '1.5', +}; + +class StackFrame extends Component { + state = { + compiled: false, + }; + + toggleCompiled = () => { + this.setState(state => ({ + compiled: !state.compiled, + })); + }; + + openInEditor = () => { + const { + _originalFileName: sourceFileName, + _originalLineNumber: sourceLineNumber, + } = this.props.frame; + if (sourceFileName) { + // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1" + const isInternalWebpackBootstrapCode = sourceFileName + .trim() + .indexOf(' ') !== -1; + if (!isInternalWebpackBootstrapCode) { + // Keep this in sync with react-error-overlay/middleware.js + fetch( + '/__open-stack-frame-in-editor?fileName=' + + window.encodeURIComponent(sourceFileName) + + '&lineNumber=' + + window.encodeURIComponent(sourceLineNumber || 1) + ).then(() => {}, () => {}); + } + } + }; + + onKeyDown = (e: SyntheticKeyboardEvent) => { + if (e.key === 'Enter') { + this.openInEditor(); + } + }; + + render() { + const { frame, contextSize, critical, showCode } = this.props; + let { functionName, _originalFileName: sourceFileName } = frame; + const { + fileName, + lineNumber, + columnNumber, + _scriptCode: scriptLines, + _originalLineNumber: sourceLineNumber, + _originalColumnNumber: sourceColumnNumber, + _originalScriptCode: sourceLines, + } = frame; + + // TODO: find a better place for this. + // Chrome has a bug with inferring function.name: + // https://github.com/facebookincubator/create-react-app/issues/2097 + // Let's ignore a meaningless name we get for top-level modules. + if ( + functionName === 'Object.friendlySyntaxErrorLabel' || + functionName === 'Object.exports.__esModule' || + functionName === 'Object.' || + !functionName + ) { + functionName = '(anonymous function)'; + } + + const compiled = this.state.compiled; + + const url = getPrettyURL( + sourceFileName, + sourceLineNumber, + sourceColumnNumber, + fileName, + lineNumber, + columnNumber, + compiled + ); + + let codeBlockProps = null; + + if (showCode) { + if ( + compiled && + scriptLines && + scriptLines.length !== 0 && + lineNumber != null + ) { + codeBlockProps = { + lines: scriptLines, + lineNum: lineNumber, + columnNum: columnNumber, + contextSize, + main: critical, + }; + } else if ( + !compiled && + sourceLines && + sourceLines.length !== 0 && + sourceLineNumber != null + ) { + codeBlockProps = { + lines: sourceLines, + lineNum: sourceLineNumber, + columnNum: sourceColumnNumber, + contextSize, + main: critical, + }; + } + } + + return ( +
+
{functionName}
+
+ + {url} + +
+ {codeBlockProps && + + + + } +
+ ); + } +} + +export default StackFrame; diff --git a/packages/react-error-overlay/src/components/StackTrace.js b/packages/react-error-overlay/src/components/StackTrace.js new file mode 100644 index 00000000000..0a7b5b7e183 --- /dev/null +++ b/packages/react-error-overlay/src/components/StackTrace.js @@ -0,0 +1,83 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +/* @flow */ +import React, { Component } from 'react'; +import StackFrame from './StackFrame'; +import Collapsible from './Collapsible'; +import { isInternalFile } from '../utils/isInternalFile'; +import { isBultinErrorName } from '../utils/isBultinErrorName'; + +const traceStyle = { + fontSize: '1em', + flex: '0 1 auto', + minHeight: '0px', + overflow: 'auto', +}; + +class StackTrace extends Component { + renderFrames() { + const { stackFrames, errorName, contextSize } = this.props; + const renderedFrames = []; + let hasReachedAppCode = false, currentBundle = [], bundleCount = 0; + + stackFrames.forEach((frame, index) => { + const { fileName, _originalFileName: sourceFileName } = frame; + const isInternalUrl = isInternalFile(sourceFileName, fileName); + const isThrownIntentionally = !isBultinErrorName(errorName); + const shouldCollapse = isInternalUrl && + (isThrownIntentionally || hasReachedAppCode); + + if (!isInternalUrl) { + hasReachedAppCode = true; + } + + const frameEle = ( + + ); + const lastElement = index === stackFrames.length - 1; + + if (shouldCollapse) { + currentBundle.push(frameEle); + } + + if (!shouldCollapse || lastElement) { + if (currentBundle.length === 1) { + renderedFrames.push(currentBundle[0]); + } else if (currentBundle.length > 1) { + bundleCount++; + renderedFrames.push( + + {currentBundle} + + ); + } + currentBundle = []; + } + + if (!shouldCollapse) { + renderedFrames.push(frameEle); + } + }); + + return renderedFrames; + } + + render() { + return
{this.renderFrames()}
; + } +} + +export default StackTrace; diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js deleted file mode 100644 index b573c740634..00000000000 --- a/packages/react-error-overlay/src/components/additional.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { - additionalChildStyle, - groupStyle, - groupElemLeft, - groupElemRight, -} from '../styles'; -import { consumeEvent } from '../utils/dom/consumeEvent'; -import { enableTabClick } from '../utils/dom/enableTabClick'; - -type SwitchCallback = (offset: number) => void; -function updateAdditional( - document: Document, - additionalReference: HTMLDivElement, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback -) { - if (additionalReference.lastChild) { - additionalReference.removeChild(additionalReference.lastChild); - } - - if (totalErrors <= 1) { - return; - } - - const div = document.createElement('div'); - applyStyles(div, additionalChildStyle); - - const group = document.createElement('span'); - applyStyles(group, groupStyle); - - const left = document.createElement('button'); - applyStyles(left, groupElemLeft); - left.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(-1); - }); - left.appendChild(document.createTextNode('←')); - enableTabClick(left); - - const right = document.createElement('button'); - applyStyles(right, groupElemRight); - right.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(1); - }); - right.appendChild(document.createTextNode('→')); - enableTabClick(right); - - group.appendChild(left); - group.appendChild(right); - div.appendChild(group); - - const text = `${currentError} of ${totalErrors} errors on the page`; - div.appendChild(document.createTextNode(text)); - - additionalReference.appendChild(div); -} - -export type { SwitchCallback }; -export { updateAdditional }; diff --git a/packages/react-error-overlay/src/components/close.js b/packages/react-error-overlay/src/components/close.js deleted file mode 100644 index 2ced8d0ce92..00000000000 --- a/packages/react-error-overlay/src/components/close.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { hintsStyle, hintStyle, closeButtonStyle } from '../styles'; - -function createHint(document: Document, hint: string, title: string) { - const span = document.createElement('span'); - span.appendChild(document.createTextNode(hint)); - span.setAttribute('title', title); - applyStyles(span, hintStyle); - return span; -} - -type CloseCallback = () => void; -function createClose(document: Document, callback: CloseCallback) { - const hints = document.createElement('div'); - applyStyles(hints, hintsStyle); - - const close = createHint(document, '×', 'Click or press Escape to dismiss.'); - close.addEventListener('click', () => callback()); - applyStyles(close, closeButtonStyle); - hints.appendChild(close); - return hints; -} - -export type { CloseCallback }; -export { createClose }; diff --git a/packages/react-error-overlay/src/components/footer.js b/packages/react-error-overlay/src/components/footer.js deleted file mode 100644 index 4586a04ff2b..00000000000 --- a/packages/react-error-overlay/src/components/footer.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { footerStyle } from '../styles'; - -function createFooter(document: Document) { - const div = document.createElement('div'); - applyStyles(div, footerStyle); - div.appendChild( - document.createTextNode( - 'This screen is visible only in development. It will not appear if the app crashes in production.' - ) - ); - div.appendChild(document.createElement('br')); - div.appendChild( - document.createTextNode( - 'Open your browser’s developer console to further inspect this error.' - ) - ); - return div; -} - -export { createFooter }; diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js deleted file mode 100644 index 43d0d4043a3..00000000000 --- a/packages/react-error-overlay/src/components/frame.js +++ /dev/null @@ -1,355 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createCode } from './code'; -import { isInternalFile } from '../utils/isInternalFile'; -import type { StackFrame } from '../utils/stack-frame'; -import type { FrameSetting, OmitsObject } from './frames'; -import { applyStyles } from '../utils/dom/css'; -import { - omittedFramesExpandedStyle, - omittedFramesCollapsedStyle, - functionNameStyle, - depStyle, - linkStyle, - anchorStyle, - hiddenStyle, -} from '../styles'; - -function getGroupToggle( - document: Document, - omitsCount: number, - omitBundle: number -) { - const omittedFrames = document.createElement('div'); - enableTabClick(omittedFrames); - const text1 = document.createTextNode( - '\u25B6 ' + omitsCount + ' stack frames were collapsed.' - ); - omittedFrames.appendChild(text1); - omittedFrames.addEventListener('click', function() { - const hide = text1.textContent.match(/▲/); - const list = document.getElementsByName('bundle-' + omitBundle); - for (let index = 0; index < list.length; ++index) { - const n = list[index]; - if (hide) { - n.style.display = 'none'; - } else { - n.style.display = ''; - } - } - if (hide) { - text1.textContent = text1.textContent.replace(/▲/, '▶'); - text1.textContent = text1.textContent.replace(/expanded/, 'collapsed'); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - } else { - text1.textContent = text1.textContent.replace(/▶/, '▲'); - text1.textContent = text1.textContent.replace(/collapsed/, 'expanded'); - applyStyles(omittedFrames, omittedFramesExpandedStyle); - } - }); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - return omittedFrames; -} - -function insertBeforeBundle( - document: Document, - parent: Node, - omitsCount: number, - omitBundle: number, - actionElement -) { - const children = document.getElementsByName('bundle-' + omitBundle); - if (children.length < 1) { - return; - } - let first: ?Node = children[0]; - while (first != null && first.parentNode !== parent) { - first = first.parentNode; - } - const div = document.createElement('div'); - enableTabClick(div); - div.setAttribute('name', 'bundle-' + omitBundle); - const text = document.createTextNode( - '\u25BC ' + omitsCount + ' stack frames were expanded.' - ); - div.appendChild(text); - div.addEventListener('click', function() { - return actionElement.click(); - }); - applyStyles(div, omittedFramesExpandedStyle); - div.style.display = 'none'; - - parent.insertBefore(div, first); -} - -function frameDiv( - document: Document, - functionName, - url, - internalUrl, - onSourceClick: ?Function -) { - const frame = document.createElement('div'); - const frameFunctionName = document.createElement('div'); - - let cleanedFunctionName; - if (!functionName || functionName === 'Object.') { - cleanedFunctionName = '(anonymous function)'; - } else { - cleanedFunctionName = functionName; - } - - const cleanedUrl = url.replace('webpack://', '.'); - - if (internalUrl) { - applyStyles( - frameFunctionName, - Object.assign({}, functionNameStyle, depStyle) - ); - } else { - applyStyles(frameFunctionName, functionNameStyle); - } - - frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName)); - frame.appendChild(frameFunctionName); - - const frameLink = document.createElement('div'); - applyStyles(frameLink, linkStyle); - const frameAnchor = document.createElement('a'); - applyStyles(frameAnchor, anchorStyle); - frameAnchor.appendChild(document.createTextNode(cleanedUrl)); - frameLink.appendChild(frameAnchor); - frame.appendChild(frameLink); - - if (typeof onSourceClick === 'function') { - let handler = onSourceClick; - enableTabClick(frameAnchor); - frameAnchor.style.cursor = 'pointer'; - frameAnchor.addEventListener('click', function() { - handler(); - }); - } - - return frame; -} - -function isBultinErrorName(errorName: ?string) { - switch (errorName) { - case 'EvalError': - case 'InternalError': - case 'RangeError': - case 'ReferenceError': - case 'SyntaxError': - case 'TypeError': - case 'URIError': - return true; - default: - return false; - } -} - -function getPrettyURL( - sourceFileName: ?string, - sourceLineNumber: ?number, - sourceColumnNumber: ?number, - fileName: ?string, - lineNumber: ?number, - columnNumber: ?number, - compiled: boolean -): string { - let prettyURL; - if (!compiled && sourceFileName && typeof sourceLineNumber === 'number') { - // Remove everything up to the first /src/ or /node_modules/ - const trimMatch = /^[/|\\].*?[/|\\]((src|node_modules)[/|\\].*)/.exec( - sourceFileName - ); - if (trimMatch && trimMatch[1]) { - prettyURL = trimMatch[1]; - } else { - prettyURL = sourceFileName; - } - prettyURL += ':' + sourceLineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (sourceColumnNumber) { - prettyURL += ':' + sourceColumnNumber; - } - } else if (fileName && typeof lineNumber === 'number') { - prettyURL = fileName + ':' + lineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (columnNumber) { - prettyURL += ':' + columnNumber; - } - } else { - prettyURL = 'unknown'; - } - return prettyURL; -} - -function createFrame( - document: Document, - frameSetting: FrameSetting, - frame: StackFrame, - contextSize: number, - critical: boolean, - omits: OmitsObject, - omitBundle: number, - parentContainer: HTMLDivElement, - lastElement: boolean, - errorName: ?string -) { - const { compiled } = frameSetting; - let { functionName, _originalFileName: sourceFileName } = frame; - const { - fileName, - lineNumber, - columnNumber, - _scriptCode: scriptLines, - _originalLineNumber: sourceLineNumber, - _originalColumnNumber: sourceColumnNumber, - _originalScriptCode: sourceLines, - } = frame; - - // TODO: find a better place for this. - // Chrome has a bug with inferring function.name: - // https://github.com/facebookincubator/create-react-app/issues/2097 - // Let's ignore a meaningless name we get for top-level modules. - if ( - functionName === 'Object.friendlySyntaxErrorLabel' || - functionName === 'Object.exports.__esModule' - ) { - functionName = '(anonymous function)'; - } - - const prettyURL = getPrettyURL( - sourceFileName, - sourceLineNumber, - sourceColumnNumber, - fileName, - lineNumber, - columnNumber, - compiled - ); - - let needsHidden = false; - const isInternalUrl = isInternalFile(sourceFileName, fileName); - const isThrownIntentionally = !isBultinErrorName(errorName); - const shouldCollapse = - isInternalUrl && (isThrownIntentionally || omits.hasReachedAppCode); - - if (!isInternalUrl) { - omits.hasReachedAppCode = true; - } - - if (shouldCollapse) { - ++omits.value; - needsHidden = true; - } - - let collapseElement = null; - if (!shouldCollapse || lastElement) { - if (omits.value > 0) { - const capV = omits.value; - const omittedFrames = getGroupToggle(document, capV, omitBundle); - window.requestAnimationFrame(() => { - insertBeforeBundle( - document, - parentContainer, - capV, - omitBundle, - omittedFrames - ); - }); - if (lastElement && shouldCollapse) { - collapseElement = omittedFrames; - } else { - parentContainer.appendChild(omittedFrames); - } - ++omits.bundle; - } - omits.value = 0; - } - - let onSourceClick = null; - if (sourceFileName) { - // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1" - const isInternalWebpackBootstrapCode = - sourceFileName.trim().indexOf(' ') !== -1; - if (!isInternalWebpackBootstrapCode) { - onSourceClick = () => { - // Keep this in sync with react-error-overlay/middleware.js - fetch( - '/__open-stack-frame-in-editor?fileName=' + - window.encodeURIComponent(sourceFileName) + - '&lineNumber=' + - window.encodeURIComponent(sourceLineNumber || 1) - ).then(() => {}, () => {}); - }; - } - } - - const elem = frameDiv( - document, - functionName, - prettyURL, - shouldCollapse, - onSourceClick - ); - if (needsHidden) { - applyStyles(elem, hiddenStyle); - elem.setAttribute('name', 'bundle-' + omitBundle); - } - - let hasSource = false; - if (!shouldCollapse) { - if ( - compiled && - scriptLines && - scriptLines.length !== 0 && - lineNumber != null - ) { - elem.appendChild( - createCode( - document, - scriptLines, - lineNumber, - columnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } else if ( - !compiled && - sourceLines && - sourceLines.length !== 0 && - sourceLineNumber != null - ) { - elem.appendChild( - createCode( - document, - sourceLines, - sourceLineNumber, - sourceColumnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } - } - - return { elem: elem, hasSource: hasSource, collapseElement: collapseElement }; -} - -export { createFrame }; diff --git a/packages/react-error-overlay/src/components/frames.js b/packages/react-error-overlay/src/components/frames.js deleted file mode 100644 index 8bd50509295..00000000000 --- a/packages/react-error-overlay/src/components/frames.js +++ /dev/null @@ -1,132 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import type { StackFrame } from '../utils/stack-frame'; -import { applyStyles } from '../utils/dom/css'; -import { traceStyle, toggleStyle } from '../styles'; -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createFrame } from './frame'; - -type OmitsObject = { - value: number, - bundle: number, - hasReachedAppCode: boolean, -}; -type FrameSetting = { compiled: boolean }; -export type { OmitsObject, FrameSetting }; - -function createFrameWrapper( - document: Document, - parent: HTMLDivElement, - factory, - lIndex: number, - frameSettings: FrameSetting[], - contextSize: number -) { - const fac = factory(); - if (fac == null) { - return; - } - const { hasSource, elem, collapseElement } = fac; - - const elemWrapper = document.createElement('div'); - elemWrapper.appendChild(elem); - - if (hasSource) { - const compiledDiv = document.createElement('div'); - enableTabClick(compiledDiv); - applyStyles(compiledDiv, toggleStyle); - - const o = frameSettings[lIndex]; - const compiledText = document.createTextNode( - 'View ' + (o && o.compiled ? 'source' : 'compiled') - ); - compiledDiv.addEventListener('click', function() { - if (o) { - o.compiled = !o.compiled; - } - - const next = createFrameWrapper( - document, - parent, - factory, - lIndex, - frameSettings, - contextSize - ); - if (next != null) { - parent.insertBefore(next, elemWrapper); - parent.removeChild(elemWrapper); - } - }); - compiledDiv.appendChild(compiledText); - elemWrapper.appendChild(compiledDiv); - } - - if (collapseElement != null) { - elemWrapper.appendChild(collapseElement); - } - - return elemWrapper; -} - -function createFrames( - document: Document, - resolvedFrames: StackFrame[], - frameSettings: FrameSetting[], - contextSize: number, - errorName: ?string -) { - if (resolvedFrames.length !== frameSettings.length) { - throw new Error( - 'You must give a frame settings array of identical length to resolved frames.' - ); - } - const trace = document.createElement('div'); - applyStyles(trace, traceStyle); - - let index = 0; - let critical = true; - const omits: OmitsObject = { value: 0, bundle: 1, hasReachedAppCode: false }; - resolvedFrames.forEach(function(frame) { - const lIndex = index++; - const elem = createFrameWrapper( - document, - trace, - createFrame.bind( - undefined, - document, - frameSettings[lIndex], - frame, - contextSize, - critical, - omits, - omits.bundle, - trace, - index === resolvedFrames.length, - errorName - ), - lIndex, - frameSettings, - contextSize - ); - if (elem == null) { - return; - } - critical = false; - trace.appendChild(elem); - }); - //TODO: fix this - omits.value = 0; - - return trace; -} - -export { createFrames }; diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js deleted file mode 100644 index 69acf9ad43f..00000000000 --- a/packages/react-error-overlay/src/components/overlay.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { containerStyle, overlayStyle, headerStyle } from '../styles'; -import { createClose } from './close'; -import { createFrames } from './frames'; -import { createFooter } from './footer'; -import type { CloseCallback } from './close'; -import type { StackFrame } from '../utils/stack-frame'; -import { updateAdditional } from './additional'; -import type { FrameSetting } from './frames'; -import type { SwitchCallback } from './additional'; - -function createOverlay( - document: Document, - name: ?string, - message: string, - frames: StackFrame[], - contextSize: number, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback, - closeCallback: CloseCallback -): { - overlay: HTMLDivElement, - additional: HTMLDivElement, -} { - const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false })); - // Create overlay - const overlay = document.createElement('div'); - applyStyles(overlay, overlayStyle); - - // Create container - const container = document.createElement('div'); - applyStyles(container, containerStyle); - overlay.appendChild(container); - container.appendChild(createClose(document, closeCallback)); - - // Create "Errors X of Y" in case of multiple errors - const additional = document.createElement('div'); - updateAdditional( - document, - additional, - currentError, - totalErrors, - switchCallback - ); - container.appendChild(additional); - - // Create header - const header = document.createElement('div'); - applyStyles(header, headerStyle); - - // Make message prettier - let finalMessage = - message.match(/^\w*:/) || !name ? message : name + ': ' + message; - - finalMessage = finalMessage - // TODO: maybe remove this prefix from fbjs? - // It's just scaring people - .replace(/^Invariant Violation:\s*/, '') - // This is not helpful either: - .replace(/^Warning:\s*/, '') - // Break the actionable part to the next line. - // AFAIK React 16+ should already do this. - .replace(' Check the render method', '\n\nCheck the render method') - .replace(' Check your code at', '\n\nCheck your code at'); - - // Put it in the DOM - header.appendChild(document.createTextNode(finalMessage)); - container.appendChild(header); - - // Create trace - container.appendChild( - createFrames(document, frames, frameSettings, contextSize, name) - ); - - // Show message - container.appendChild(createFooter(document)); - - return { - overlay, - additional, - }; -} - -export { createOverlay }; diff --git a/packages/react-error-overlay/src/effects/shortcuts.js b/packages/react-error-overlay/src/effects/shortcuts.js deleted file mode 100644 index bf8fd6d5eb7..00000000000 --- a/packages/react-error-overlay/src/effects/shortcuts.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -const SHORTCUT_ESCAPE = 'SHORTCUT_ESCAPE', - SHORTCUT_LEFT = 'SHORTCUT_LEFT', - SHORTCUT_RIGHT = 'SHORTCUT_RIGHT'; - -let boundKeyHandler = null; - -type ShortcutCallback = (type: string) => void; - -function keyHandler(callback: ShortcutCallback, e: KeyboardEvent) { - const { key, keyCode, which } = e; - if (key === 'Escape' || keyCode === 27 || which === 27) { - callback(SHORTCUT_ESCAPE); - } else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) { - callback(SHORTCUT_LEFT); - } else if (key === 'ArrowRight' || keyCode === 39 || which === 39) { - callback(SHORTCUT_RIGHT); - } -} - -function registerShortcuts(target: EventTarget, callback: ShortcutCallback) { - if (boundKeyHandler !== null) { - return; - } - boundKeyHandler = keyHandler.bind(undefined, callback); - target.addEventListener('keydown', boundKeyHandler); -} - -function unregisterShortcuts(target: EventTarget) { - if (boundKeyHandler === null) { - return; - } - target.removeEventListener('keydown', boundKeyHandler); - boundKeyHandler = null; -} - -export { - SHORTCUT_ESCAPE, - SHORTCUT_LEFT, - SHORTCUT_RIGHT, - registerShortcuts as register, - unregisterShortcuts as unregister, - keyHandler as handler, -}; diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js index 181cb02716d..883d5604bab 100644 --- a/packages/react-error-overlay/src/overlay.js +++ b/packages/react-error-overlay/src/overlay.js @@ -8,6 +8,8 @@ */ /* @flow */ +import React from 'react'; +import ReactDOM from 'react-dom'; import { register as registerError, unregister as unregisterError, @@ -16,14 +18,6 @@ import { register as registerPromise, unregister as unregisterPromise, } from './effects/unhandledRejection'; -import { - register as registerShortcuts, - unregister as unregisterShortcuts, - handler as keyEventHandler, - SHORTCUT_ESCAPE, - SHORTCUT_LEFT, - SHORTCUT_RIGHT, -} from './effects/shortcuts'; import { register as registerStackTraceLimit, unregister as unregisterStackTraceLimit, @@ -34,179 +28,96 @@ import { unregisterReactStack, } from './effects/proxyConsole'; import { massage as massageWarning } from './utils/warnings'; - -import { - consume as consumeError, - getErrorRecord, - drain as drainErrors, -} from './utils/errorRegister'; -import type { ErrorRecordReference } from './utils/errorRegister'; - -import type { StackFrame } from './utils/stack-frame'; -import { iframeStyle } from './styles'; +import { iframeStyle, overlayStyle } from './styles'; import { applyStyles } from './utils/dom/css'; -import { createOverlay } from './components/overlay'; -import { updateAdditional } from './components/additional'; +import getStackFrames from './utils/getStackFrames'; +import ErrorOverlay from './components/ErrorOverlay'; const CONTEXT_SIZE: number = 3; -let iframeReference: HTMLIFrameElement | null = null; -let additionalReference = null; -let errorReferences: ErrorRecordReference[] = []; -let currReferenceIndex: number = -1; -function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { - disposeCurrentView(); +let errorRecords = []; - const iframe = window.document.createElement('iframe'); - applyStyles(iframe, iframeStyle); - iframeReference = iframe; - iframe.onload = () => { +let container: HTMLDivElement | null = null; +let iframeReference: HTMLIFrameElement | null = null; + +// Mount overlay container +function mount(callback) { + iframeReference = window.document.createElement('iframe'); + applyStyles(iframeReference, iframeStyle); + iframeReference.onload = () => { if (iframeReference == null) { return; } - const w = iframeReference.contentWindow; const document = iframeReference.contentDocument; - - const { overlay, additional } = createOverlay( - document, - name, - message, - resolvedFrames, - CONTEXT_SIZE, - currReferenceIndex + 1, - errorReferences.length, - offset => { - switchError(offset); - }, - () => { - unmount(); - } - ); - if (w != null) { - w.onkeydown = event => { - keyEventHandler(type => shortcutHandler(type), event); - }; - } - if (document.body != null) { + if (document != null && document.body != null) { document.body.style.margin = '0'; // Keep popup within body boundaries for iOS Safari // $FlowFixMe document.body.style['max-width'] = '100vw'; - - (document.body: any).appendChild(overlay); + container = document.createElement('div'); + applyStyles(container, overlayStyle); + (document.body: any).appendChild(container); + callback(); } - additionalReference = additional; }; - window.document.body.appendChild(iframe); -} - -function renderErrorByIndex(index: number) { - currReferenceIndex = index; - - const { error, unhandledRejection, enhancedFrames } = getErrorRecord( - errorReferences[index] - ); - - if (unhandledRejection) { - render( - 'Unhandled Rejection (' + error.name + ')', - error.message, - enhancedFrames - ); - } else { - render(error.name, error.message, enhancedFrames); - } + window.document.body.appendChild(iframeReference); } -function switchError(offset) { - if (errorReferences.length === 0) { - return; - } - - let nextView = currReferenceIndex + offset; - - if (nextView < 0) { - nextView = errorReferences.length - 1; - } else if (nextView >= errorReferences.length) { - nextView = 0; - } - - renderErrorByIndex(nextView); -} - -function disposeCurrentView() { +// Unmount overlay container +function unmount() { + ReactDOM.unmountComponentAtNode(container); if (iframeReference === null) { return; } window.document.body.removeChild(iframeReference); iframeReference = null; - additionalReference = null; + container = null; + errorRecords = []; } -function unmount() { - disposeCurrentView(); - drainErrors(); - errorReferences = []; - currReferenceIndex = -1; +function render() { + ReactDOM.render( + , + container + ); } function crash(error: Error, unhandledRejection = false) { if (module.hot && typeof module.hot.decline === 'function') { module.hot.decline(); } - consumeError(error, unhandledRejection, CONTEXT_SIZE) - .then(ref => { - if (ref == null) { + + getStackFrames(error, unhandledRejection, CONTEXT_SIZE) + .then(stackFrames => { + if (stackFrames == null) { return; } - errorReferences.push(ref); - if (iframeReference !== null && additionalReference !== null) { - updateAdditional( - iframeReference.contentDocument, - additionalReference, - currReferenceIndex + 1, - errorReferences.length, - offset => { - switchError(offset); - } - ); - } else { - if (errorReferences.length !== 1) { - throw new Error('Something is *really* wrong.'); + errorRecords = [ + ...errorRecords, + { + error, + unhandledRejection, + contextSize: CONTEXT_SIZE, + stackFrames, + }, + ]; + + if (errorRecords.length > 0) { + if (container == null) { + mount(() => render()); + } else { + render(); } - renderErrorByIndex((currReferenceIndex = 0)); } }) .catch(e => { - console.log('Could not consume error:', e); + console.log('Could not get the stack frames of error:', e); }); } -function shortcutHandler(type: string) { - switch (type) { - case SHORTCUT_ESCAPE: { - unmount(); - break; - } - case SHORTCUT_LEFT: { - switchError(-1); - break; - } - case SHORTCUT_RIGHT: { - switchError(1); - break; - } - default: { - //TODO: this - break; - } - } -} - function inject() { registerError(window, error => crash(error)); registerPromise(window, error => crash(error, true)); - registerShortcuts(window, shortcutHandler); registerStackTraceLimit(); registerReactStack(); @@ -226,7 +137,6 @@ function inject() { function uninject() { unregisterStackTraceLimit(); - unregisterShortcuts(window); unregisterPromise(window); unregisterError(window); unregisterReactStack(); diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index bf17561d721..3b16a90bcbe 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -35,84 +35,6 @@ const overlayStyle = { 'background-color': white, }; -const containerStyle = { - position: 'relative', - display: 'inline-flex', - 'flex-direction': 'column', - height: '100%', - width: '1024px', - 'max-width': '100%', - 'overflow-x': 'hidden', - 'overflow-y': 'auto', - padding: '0.5rem', - 'box-sizing': 'border-box', - 'text-align': 'left', - 'font-family': 'Consolas, Menlo, monospace', - 'font-size': '11px', - 'white-space': 'pre-wrap', - 'word-break': 'break-word', - 'line-height': 1.5, - color: black, -}; - -const hintsStyle = { - color: darkGray, -}; - -const hintStyle = { - padding: '0.5em 1em', - cursor: 'pointer', -}; - -const closeButtonStyle = { - color: black, - 'line-height': '1rem', - 'font-size': '1.5rem', - padding: '1rem', - cursor: 'pointer', - position: 'absolute', - right: 0, - top: 0, -}; - -const additionalChildStyle = { - 'margin-bottom': '0.5rem', -}; - -const headerStyle = { - 'font-size': '2em', - 'font-family': 'sans-serif', - color: red, - 'white-space': 'pre-wrap', - // Top bottom margin spaces header - // Right margin revents overlap with close button - margin: '0 2rem 0.75rem 0', - flex: '0 0 auto', - 'max-height': '50%', - overflow: 'auto', -}; - -const functionNameStyle = {}; - -const linkStyle = { - 'font-size': '0.9em', - 'margin-bottom': '0.9em', -}; - -const anchorStyle = { - 'text-decoration': 'none', - color: darkGray, -}; - -const traceStyle = { - 'font-size': '1em', - flex: '0 1 auto', - 'min-height': '0px', - overflow: 'auto', -}; - -const depStyle = {}; - const primaryErrorStyle = { 'background-color': lightRed, }; @@ -121,104 +43,14 @@ const secondaryErrorStyle = { 'background-color': yellow, }; -const omittedFramesCollapsedStyle = { - color: black, - cursor: 'pointer', - 'margin-bottom': '1.5em', -}; - -const omittedFramesExpandedStyle = { - color: black, - cursor: 'pointer', - 'margin-bottom': '0.6em', -}; - -const _preStyle = { - display: 'block', - padding: '0.5em', - 'margin-top': '0.5em', - 'margin-bottom': '0.5em', - 'overflow-x': 'auto', - 'white-space': 'pre-wrap', - 'border-radius': '0.25rem', -}; -const primaryPreStyle = Object.assign({}, _preStyle, { - 'background-color': redTransparent, -}); -const secondaryPreStyle = Object.assign({}, _preStyle, { - 'background-color': yellowTransparent, -}); - -const toggleStyle = { - 'margin-bottom': '1.5em', - color: darkGray, - cursor: 'pointer', -}; - -const codeStyle = { - 'font-family': 'Consolas, Menlo, monospace', -}; - -const hiddenStyle = { - display: 'none', -}; - -const groupStyle = { - 'margin-right': '1em', -}; - -const _groupElemStyle = { - 'background-color': redTransparent, - color: red, - border: 'none', - 'border-radius': '4px', - padding: '3px 6px', - cursor: 'pointer', -}; - -const groupElemLeft = Object.assign({}, _groupElemStyle, { - 'border-top-right-radius': '0px', - 'border-bottom-right-radius': '0px', - 'margin-right': '1px', -}); - -const groupElemRight = Object.assign({}, _groupElemStyle, { - 'border-top-left-radius': '0px', - 'border-bottom-left-radius': '0px', -}); - -const footerStyle = { - 'font-family': 'sans-serif', - color: darkGray, - 'margin-top': '0.5rem', - flex: '0 0 auto', -}; - export { - containerStyle, iframeStyle, overlayStyle, - hintsStyle, - hintStyle, - closeButtonStyle, - additionalChildStyle, - headerStyle, - functionNameStyle, - linkStyle, - anchorStyle, - traceStyle, - depStyle, primaryErrorStyle, - primaryPreStyle, secondaryErrorStyle, - secondaryPreStyle, - omittedFramesCollapsedStyle, - omittedFramesExpandedStyle, - toggleStyle, - codeStyle, - hiddenStyle, - groupStyle, - groupElemLeft, - groupElemRight, - footerStyle, + black, + darkGray, + red, + redTransparent, + yellowTransparent, }; diff --git a/packages/react-error-overlay/src/utils/dom/consumeEvent.js b/packages/react-error-overlay/src/utils/dom/consumeEvent.js deleted file mode 100644 index 90bb9d1e815..00000000000 --- a/packages/react-error-overlay/src/utils/dom/consumeEvent.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -function consumeEvent(e: Event) { - e.preventDefault(); - if (typeof e.target.blur === 'function') { - e.target.blur(); - } -} - -export { consumeEvent }; diff --git a/packages/react-error-overlay/src/utils/dom/enableTabClick.js b/packages/react-error-overlay/src/utils/dom/enableTabClick.js deleted file mode 100644 index b663c055f8c..00000000000 --- a/packages/react-error-overlay/src/utils/dom/enableTabClick.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * 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. - */ - -/* @flow */ -function enableTabClick(node: Element) { - node.setAttribute('tabindex', '0'); - node.addEventListener('keydown', function(e: KeyboardEvent) { - const { key, which, keyCode } = e; - if (key === 'Enter' || which === 13 || keyCode === 13) { - e.preventDefault(); - if (typeof e.target.click === 'function') { - e.target.click(); - } - } - }); -} - -export { enableTabClick }; diff --git a/packages/react-error-overlay/src/utils/getPrettyURL.js b/packages/react-error-overlay/src/utils/getPrettyURL.js new file mode 100644 index 00000000000..85a5a3f9efc --- /dev/null +++ b/packages/react-error-overlay/src/utils/getPrettyURL.js @@ -0,0 +1,49 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +//@flow +function getPrettyURL( + sourceFileName: ?string, + sourceLineNumber: ?number, + sourceColumnNumber: ?number, + fileName: ?string, + lineNumber: ?number, + columnNumber: ?number, + compiled: boolean +): string { + let prettyURL; + if (!compiled && sourceFileName && typeof sourceLineNumber === 'number') { + // Remove everything up to the first /src/ or /node_modules/ + const trimMatch = /^[/|\\].*?[/|\\]((src|node_modules)[/|\\].*)/.exec( + sourceFileName + ); + if (trimMatch && trimMatch[1]) { + prettyURL = trimMatch[1]; + } else { + prettyURL = sourceFileName; + } + prettyURL += ':' + sourceLineNumber; + // Note: we intentionally skip 0's because they're produced by cheap Webpack maps + if (sourceColumnNumber) { + prettyURL += ':' + sourceColumnNumber; + } + } else if (fileName && typeof lineNumber === 'number') { + prettyURL = fileName + ':' + lineNumber; + // Note: we intentionally skip 0's because they're produced by cheap Webpack maps + if (columnNumber) { + prettyURL += ':' + columnNumber; + } + } else { + prettyURL = 'unknown'; + } + return prettyURL.replace('webpack://', '.'); +} + +export { getPrettyURL }; +export default getPrettyURL; diff --git a/packages/react-error-overlay/src/utils/errorRegister.js b/packages/react-error-overlay/src/utils/getStackFrames.js similarity index 59% rename from packages/react-error-overlay/src/utils/errorRegister.js rename to packages/react-error-overlay/src/utils/getStackFrames.js index 0bd3379cef1..e5a4073106b 100644 --- a/packages/react-error-overlay/src/utils/errorRegister.js +++ b/packages/react-error-overlay/src/utils/getStackFrames.js @@ -13,22 +13,11 @@ import { parse } from './parser'; import { map } from './mapper'; import { unmap } from './unmapper'; -type ErrorRecord = { - error: Error, - unhandledRejection: boolean, - contextSize: number, - enhancedFrames: StackFrame[], -}; -type ErrorRecordReference = number; -const recorded: ErrorRecord[] = []; - -let errorsConsumed: ErrorRecordReference = 0; - -function consume( +function getStackFrames( error: Error, unhandledRejection: boolean = false, contextSize: number = 3 -): Promise { +): Promise { const parsedFrames = parse(error); let enhancedFramesPromise; if (error.__unmap_source) { @@ -49,32 +38,13 @@ function consume( ) { return null; } - enhancedFrames = enhancedFrames.filter( + return enhancedFrames.filter( ({ functionName }) => functionName == null || functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1 ); - recorded[++errorsConsumed] = { - error, - unhandledRejection, - contextSize, - enhancedFrames, - }; - return errorsConsumed; }); } -function getErrorRecord(ref: ErrorRecordReference): ErrorRecord { - return recorded[ref]; -} - -function drain() { - // $FlowFixMe - const keys = Object.keys(recorded); - for (let index = 0; index < keys.length; ++index) { - delete recorded[keys[index]]; - } -} - -export { consume, getErrorRecord, drain }; -export type { ErrorRecordReference }; +export default getStackFrames; +export { getStackFrames }; diff --git a/packages/react-error-overlay/src/utils/isBultinErrorName.js b/packages/react-error-overlay/src/utils/isBultinErrorName.js new file mode 100644 index 00000000000..ee36709cd2b --- /dev/null +++ b/packages/react-error-overlay/src/utils/isBultinErrorName.js @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * 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. + */ + +//@flow +function isBultinErrorName(errorName: ?string) { + switch (errorName) { + case 'EvalError': + case 'InternalError': + case 'RangeError': + case 'ReferenceError': + case 'SyntaxError': + case 'TypeError': + case 'URIError': + return true; + default: + return false; + } +} + +export { isBultinErrorName }; +export default isBultinErrorName;