Skip to content

Commit 24dfb58

Browse files
matarmatar
matar
authored and
matar
committed
* '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)
2 parents 2da46d4 + 1a3017b commit 24dfb58

15 files changed

+205
-82
lines changed

‎packages/react-dev-utils/webpackHotDevClient.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@ var launchEditorEndpoint = require('./launchEditorEndpoint');
2323
var formatWebpackMessages = require('./formatWebpackMessages');
2424
var ErrorOverlay = require('react-error-overlay');
2525

26+
ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
27+
// Keep this sync with errorOverlayMiddleware.js
28+
fetch(
29+
`${launchEditorEndpoint}?fileName=` +
30+
window.encodeURIComponent(errorLocation.fileName) +
31+
'&lineNumber=' +
32+
window.encodeURIComponent(errorLocation.lineNumber || 1)
33+
);
34+
});
35+
2636
// We need to keep track of if there has been a runtime error.
2737
// Essentially, we cannot guarantee application state was not corrupted by the
2838
// runtime error. To prevent confusing behavior, we forcibly reload the entire
@@ -31,7 +41,6 @@ var ErrorOverlay = require('react-error-overlay');
3141
// See https://github.com/facebookincubator/create-react-app/issues/3096
3242
var hadRuntimeError = false;
3343
ErrorOverlay.startReportingRuntimeErrors({
34-
launchEditorEndpoint: launchEditorEndpoint,
3544
onError: function() {
3645
hadRuntimeError = true;
3746
},

‎packages/react-error-overlay/package.json

+12-14
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,16 @@
2727
],
2828
"author": "Joe Haddad <[email protected]>",
2929
"files": [
30-
"lib/",
31-
"middleware.js"
30+
"lib/index.js"
3231
],
33-
"dependencies": {
32+
"devDependencies": {
3433
"anser": "1.4.1",
3534
"babel-code-frame": "6.22.0",
36-
"babel-runtime": "6.26.0",
37-
"html-entities": "1.2.1",
38-
"object-assign": "4.1.1",
39-
"promise": "8.0.1",
40-
"react": "^15 || ^16",
41-
"react-dom": "^15 || ^16",
42-
"settle-promise": "1.0.0",
43-
"source-map": "0.5.6"
44-
},
45-
"devDependencies": {
35+
"babel-core": "^6.26.0",
4636
"babel-eslint": "7.2.3",
47-
"babel-preset-react-app": "^3.0.3",
4837
"babel-loader": "^7.1.2",
38+
"babel-preset-react-app": "^3.0.3",
39+
"babel-runtime": "6.26.0",
4940
"chalk": "^2.1.0",
5041
"chokidar": "^1.7.0",
5142
"cross-env": "5.0.5",
@@ -56,10 +47,17 @@
5647
"eslint-plugin-jsx-a11y": "5.1.1",
5748
"eslint-plugin-react": "7.1.0",
5849
"flow-bin": "^0.54.0",
50+
"html-entities": "1.2.1",
5951
"jest": "20.0.4",
6052
"jest-fetch-mock": "1.2.1",
53+
"object-assign": "4.1.1",
54+
"promise": "8.0.1",
6155
"raw-loader": "^0.5.1",
56+
"react": "^16.0.0",
57+
"react-dom": "^16.0.0",
6258
"rimraf": "^2.6.1",
59+
"settle-promise": "1.0.0",
60+
"source-map": "0.5.6",
6361
"webpack": "^3.6.0"
6462
},
6563
"jest": {

‎packages/react-error-overlay/src/containers/CompileErrorContainer.js

+18-2
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,34 @@ import Footer from '../components/Footer';
1212
import Header from '../components/Header';
1313
import CodeBlock from '../components/CodeBlock';
1414
import generateAnsiHTML from '../utils/generateAnsiHTML';
15+
import parseCompileError from '../utils/parseCompileError';
16+
import type { ErrorLocation } from '../utils/parseCompileError';
17+
18+
const codeAnchorStyle = {
19+
cursor: 'pointer',
20+
};
1521

1622
type Props = {|
1723
error: string,
24+
editorHandler: (errorLoc: ErrorLocation) => void,
1825
|};
1926

2027
class CompileErrorContainer extends PureComponent<Props, void> {
2128
render() {
22-
const { error } = this.props;
29+
const { error, editorHandler } = this.props;
30+
const errLoc: ?ErrorLocation = parseCompileError(error);
31+
const canOpenInEditor = errLoc !== null && editorHandler !== null;
2332
return (
2433
<ErrorOverlay>
2534
<Header headerText="Failed to compile" />
26-
<CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
35+
<a
36+
onClick={
37+
canOpenInEditor && errLoc ? () => editorHandler(errLoc) : null
38+
}
39+
style={canOpenInEditor ? codeAnchorStyle : null}
40+
>
41+
<CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
42+
</a>
2743
<Footer line1="This error occurred during the build time and cannot be dismissed." />
2844
</ErrorOverlay>
2945
);

‎packages/react-error-overlay/src/containers/RuntimeError.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Header from '../components/Header';
1111
import StackTrace from './StackTrace';
1212

1313
import type { StackFrame } from '../utils/stack-frame';
14+
import type { ErrorLocation } from '../utils/parseCompileError';
1415

1516
const wrapperStyle = {
1617
display: 'flex',
@@ -26,10 +27,10 @@ export type ErrorRecord = {|
2627

2728
type Props = {|
2829
errorRecord: ErrorRecord,
29-
launchEditorEndpoint: ?string,
30+
editorHandler: (errorLoc: ErrorLocation) => void,
3031
|};
3132

32-
function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
33+
function RuntimeError({ errorRecord, editorHandler }: Props) {
3334
const { error, unhandledRejection, contextSize, stackFrames } = errorRecord;
3435
const errorName = unhandledRejection
3536
? 'Unhandled Rejection (' + error.name + ')'
@@ -58,7 +59,7 @@ function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
5859
stackFrames={stackFrames}
5960
errorName={errorName}
6061
contextSize={contextSize}
61-
launchEditorEndpoint={launchEditorEndpoint}
62+
editorHandler={editorHandler}
6263
/>
6364
</div>
6465
);

‎packages/react-error-overlay/src/containers/RuntimeErrorContainer.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ import RuntimeError from './RuntimeError';
1414
import Footer from '../components/Footer';
1515

1616
import type { ErrorRecord } from './RuntimeError';
17+
import type { ErrorLocation } from '../utils/parseCompileError';
1718

1819
type Props = {|
1920
errorRecords: ErrorRecord[],
2021
close: () => void,
21-
launchEditorEndpoint: ?string,
22+
editorHandler: (errorLoc: ErrorLocation) => void,
2223
|};
2324

2425
type State = {|
@@ -74,7 +75,7 @@ class RuntimeErrorContainer extends PureComponent<Props, State> {
7475
)}
7576
<RuntimeError
7677
errorRecord={errorRecords[this.state.currentIndex]}
77-
launchEditorEndpoint={this.props.launchEditorEndpoint}
78+
editorHandler={this.props.editorHandler}
7879
/>
7980
<Footer
8081
line1="This screen is visible only in development. It will not appear if the app crashes in production."

‎packages/react-error-overlay/src/containers/StackFrame.js

+19-29
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { getPrettyURL } from '../utils/getPrettyURL';
1212
import { darkGray } from '../styles';
1313

1414
import type { StackFrame as StackFrameType } from '../utils/stack-frame';
15+
import type { ErrorLocation } from '../utils/parseCompileError';
1516

1617
const linkStyle = {
1718
fontSize: '0.9em',
@@ -45,10 +46,10 @@ const toggleStyle = {
4546

4647
type Props = {|
4748
frame: StackFrameType,
48-
launchEditorEndpoint: ?string,
4949
contextSize: number,
5050
critical: boolean,
5151
showCode: boolean,
52+
editorHandler: (errorLoc: ErrorLocation) => void,
5253
|};
5354

5455
type State = {|
@@ -66,47 +67,35 @@ class StackFrame extends Component<Props, State> {
6667
}));
6768
};
6869

69-
getEndpointUrl(): string | null {
70-
if (!this.props.launchEditorEndpoint) {
71-
return null;
72-
}
73-
const { _originalFileName: sourceFileName } = this.props.frame;
70+
getErrorLocation(): ErrorLocation | null {
71+
const {
72+
_originalFileName: fileName,
73+
_originalLineNumber: lineNumber,
74+
} = this.props.frame;
7475
// Unknown file
75-
if (!sourceFileName) {
76+
if (!fileName) {
7677
return null;
7778
}
7879
// e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1"
79-
const isInternalWebpackBootstrapCode =
80-
sourceFileName.trim().indexOf(' ') !== -1;
80+
const isInternalWebpackBootstrapCode = fileName.trim().indexOf(' ') !== -1;
8181
if (isInternalWebpackBootstrapCode) {
8282
return null;
8383
}
8484
// Code is in a real file
85-
return this.props.launchEditorEndpoint || null;
85+
return { fileName, lineNumber: lineNumber || 1 };
8686
}
8787

88-
openInEditor = () => {
89-
const endpointUrl = this.getEndpointUrl();
90-
if (endpointUrl === null) {
88+
editorHandler = () => {
89+
const errorLoc = this.getErrorLocation();
90+
if (!errorLoc) {
9191
return;
9292
}
93-
94-
const {
95-
_originalFileName: sourceFileName,
96-
_originalLineNumber: sourceLineNumber,
97-
} = this.props.frame;
98-
// Keep this in sync with react-error-overlay/middleware.js
99-
fetch(
100-
`${endpointUrl}?fileName=` +
101-
window.encodeURIComponent(sourceFileName) +
102-
'&lineNumber=' +
103-
window.encodeURIComponent(sourceLineNumber || 1)
104-
).then(() => {}, () => {});
93+
this.props.editorHandler(errorLoc);
10594
};
10695

10796
onKeyDown = (e: SyntheticKeyboardEvent<>) => {
10897
if (e.key === 'Enter') {
109-
this.openInEditor();
98+
this.editorHandler();
11099
}
111100
};
112101

@@ -166,14 +155,15 @@ class StackFrame extends Component<Props, State> {
166155
}
167156
}
168157

169-
const canOpenInEditor = this.getEndpointUrl() !== null;
158+
const canOpenInEditor =
159+
this.getErrorLocation() !== null && this.props.editorHandler !== null;
170160
return (
171161
<div>
172162
<div>{functionName}</div>
173163
<div style={linkStyle}>
174164
<a
175165
style={canOpenInEditor ? anchorStyle : null}
176-
onClick={canOpenInEditor ? this.openInEditor : null}
166+
onClick={canOpenInEditor ? this.editorHandler : null}
177167
onKeyDown={canOpenInEditor ? this.onKeyDown : null}
178168
tabIndex={canOpenInEditor ? '0' : null}
179169
>
@@ -183,7 +173,7 @@ class StackFrame extends Component<Props, State> {
183173
{codeBlockProps && (
184174
<span>
185175
<a
186-
onClick={canOpenInEditor ? this.openInEditor : null}
176+
onClick={canOpenInEditor ? this.editorHandler : null}
187177
style={canOpenInEditor ? codeAnchorStyle : null}
188178
>
189179
<CodeBlock {...codeBlockProps} />

‎packages/react-error-overlay/src/containers/StackTrace.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { isInternalFile } from '../utils/isInternalFile';
1313
import { isBultinErrorName } from '../utils/isBultinErrorName';
1414

1515
import type { StackFrame as StackFrameType } from '../utils/stack-frame';
16+
import type { ErrorLocation } from '../utils/parseCompileError';
1617

1718
const traceStyle = {
1819
fontSize: '1em',
@@ -25,17 +26,12 @@ type Props = {|
2526
stackFrames: StackFrameType[],
2627
errorName: string,
2728
contextSize: number,
28-
launchEditorEndpoint: ?string,
29+
editorHandler: (errorLoc: ErrorLocation) => void,
2930
|};
3031

3132
class StackTrace extends Component<Props> {
3233
renderFrames() {
33-
const {
34-
stackFrames,
35-
errorName,
36-
contextSize,
37-
launchEditorEndpoint,
38-
} = this.props;
34+
const { stackFrames, errorName, contextSize, editorHandler } = this.props;
3935
const renderedFrames = [];
4036
let hasReachedAppCode = false,
4137
currentBundle = [],
@@ -59,7 +55,7 @@ class StackTrace extends Component<Props> {
5955
contextSize={contextSize}
6056
critical={index === 0}
6157
showCode={!shouldCollapse}
62-
launchEditorEndpoint={launchEditorEndpoint}
58+
editorHandler={editorHandler}
6359
/>
6460
);
6561
const lastElement = index === stackFrames.length - 1;

‎packages/react-error-overlay/src/iframeScript.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,22 @@ function render({
1919
currentBuildError,
2020
currentRuntimeErrorRecords,
2121
dismissRuntimeErrors,
22-
launchEditorEndpoint,
22+
editorHandler,
2323
}) {
2424
if (currentBuildError) {
25-
return <CompileErrorContainer error={currentBuildError} />;
25+
return (
26+
<CompileErrorContainer
27+
error={currentBuildError}
28+
editorHandler={editorHandler}
29+
/>
30+
);
2631
}
2732
if (currentRuntimeErrorRecords.length > 0) {
2833
return (
2934
<RuntimeErrorContainer
3035
errorRecords={currentRuntimeErrorRecords}
3136
close={dismissRuntimeErrors}
32-
launchEditorEndpoint={launchEditorEndpoint}
37+
editorHandler={editorHandler}
3338
/>
3439
);
3540
}

0 commit comments

Comments
 (0)