Cross-origin error handling in DEV (#10353)
* Add DOM fixture for cross-origin errors * Use a custom error object in place of cross-origin errors Cross-origin errors aren't accessible by React in DEV mode because we catch errors using a global error handler, in order to preserve the "Pause on exceptions" behavior of the DevTools. When this happens, we should use a custom error object that explains what happened. For uncaught errors, the actual error message is logged to the console by the browser, so React should skip logging the message again. * Add test case that demonstrates errors are logged even if they're caught * Don't double log error messages in DEV In DEV, the browser always logs errors thrown inside React components, even if the originating update is wrapped in a try-catch, because of the dispatchEvent trick used by invokeGuardedCallback. So the error logger should not log the message again. * Fix tests * Change how error is printed in DEV and PROD In DEV, we don't want to print the stack trace because the browser already always prints it. We'll just print the component stack now. In PROD, we used to omit the JS error message. However we *do* want to show it because if the application swallows the error, the browser will *not* print it. In DEV it works only because of the fake event trick. So in PROD we will always print the underlying error by logging the error object directly. This will show both the message and the JS stack. * Make the wording tighter and emphasize the real error is above There's a few goals in the rewording: * Make it tighter using line breaks between sentences. * Make it slightly less patronizing ("You should fix it" => "You can find its details in an earlier log") * ^^ This also helps highlight that the real error message and stack is above * Group subsections: intro (there's an error), component stack, and final addendum about error boundaries * ^^ Otherwise people might think error boundaries are part of the reason they have an error * Make it clear "located at" is not the stacktrace. Otherwise it feels confusing. This makes it clearer you should still look for stack trace (with other details) above and introduces the concept of component stack. * Make the message shorter * Unused variables * Fix an error caused by fixing lint * One more bikeshed * Fix fixture * Remove unused file * Concise wording * Unused variables
Andrew Clark committed
Aug 3, 2017 at 22:55 UTC
a650699d2f7e797204f26524038c29b403fa0213
6 files changed
+136
-81
fixtures/dom/public/index.html
+1
@@ -15,6 +15,7 @@
15
-->
16
<title>React App</title>
17
<script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
18
+ <script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
19
</head>
20
<body>
21
<div id="root"></div>
fixtures/dom/src/components/fixtures/error-handling/index.js
+84
-8
@@ -2,11 +2,15 @@ import FixtureSet from '../../FixtureSet';
2
import TestCase from '../../TestCase';
3
4
const React = window.React;
5
+const ReactDOM = window.ReactDOM;
6
7
function BadRender(props) {
7
- throw props.error;
8
+ props.doThrow();
9
}
10
class ErrorBoundary extends React.Component {
11
+ static defaultProps = {
12
+ buttonText: 'Trigger error',
13
+ };
14
state = {
15
shouldThrow: false,
16
didThrow: false,
@@ -23,15 +27,15 @@ class ErrorBoundary extends React.Component {
27
render() {
28
if (this.state.didThrow) {
29
if (this.state.error) {
26
- return `Captured an error: ${this.state.error.message}`;
30
+ return <p>Captured an error: {this.state.error.message}</p>;
31
} else {
28
- return `Captured an error: ${this.state.error}`;
32
+ return <p>Captured an error: {'' + this.state.error}</p>;
33
}
34
}
35
if (this.state.shouldThrow) {
32
- return <BadRender error={this.props.error} />;
36
+ return <BadRender doThrow={this.props.doThrow} />;
37
}
34
- return <button onClick={this.triggerError}>Trigger error</button>;
38
+ return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
39
}
40
}
41
class Example extends React.Component {
@@ -42,13 +46,44 @@ class Example extends React.Component {
46
render() {
47
return (
48
<div>
45
- <ErrorBoundary error={this.props.error} key={this.state.key} />
49
<button onClick={this.restart}>Reset</button>
50
+ <ErrorBoundary
51
+ buttonText={this.props.buttonText}
52
+ doThrow={this.props.doThrow}
53
+ key={this.state.key}
54
+ />
55
</div>
56
);
57
}
58
}
59
60
+class TriggerErrorAndCatch extends React.Component {
61
+ container = document.createElement('div');
62
+
63
+ triggerErrorAndCatch = () => {
64
+ try {
65
+ ReactDOM.flushSync(() => {
66
+ ReactDOM.render(
67
+ <BadRender
68
+ doThrow={() => {
69
+ throw new Error('Caught error');
70
+ }}
71
+ />,
72
+ this.container
73
+ );
74
+ });
75
+ } catch (e) {}
76
+ };
77
+
78
+ render() {
79
+ return (
80
+ <button onClick={this.triggerErrorAndCatch}>
81
+ Trigger error and catch
82
+ </button>
83
+ );
84
+ }
85
+}
86
+
87
export default class ErrorHandlingTestCases extends React.Component {
88
render() {
89
return (
@@ -69,7 +104,11 @@ export default class ErrorHandlingTestCases extends React.Component {
104
should be replaced with "Captured an error: Oops!" Clicking reset
105
should reset the test case.
106
</TestCase.ExpectedResult>
72
- <Example error={new Error('Oops!')} />
107
+ <Example
108
+ doThrow={() => {
109
+ throw new Error('Oops!');
110
+ }}
111
+ />
112
</TestCase>
113
<TestCase title="Throwing null" description="">
114
<TestCase.Steps>
@@ -80,7 +119,44 @@ export default class ErrorHandlingTestCases extends React.Component {
119
The "Trigger error" button should be replaced with "Captured an
120
error: null". Clicking reset should reset the test case.
121
</TestCase.ExpectedResult>
83
- <Example error={null} />
122
+ <Example
123
+ doThrow={() => {
124
+ throw null; // eslint-disable-line no-throw-literal
125
+ }}
126
+ />
127
+ </TestCase>
128
+ <TestCase
129
+ title="Cross-origin errors (development mode only)"
130
+ description="">
131
+ <TestCase.Steps>
132
+ <li>Click the "Trigger cross-origin error" button</li>
133
+ <li>Click the reset button</li>
134
+ </TestCase.Steps>
135
+ <TestCase.ExpectedResult>
136
+ The "Trigger error" button should be replaced with "Captured an
137
+ error: A cross-origin error was thrown [...]". The actual error message should
138
+ be logged to the console: "Uncaught Error: Expected true to
139
+ be false".
140
+ </TestCase.ExpectedResult>
141
+ <Example
142
+ buttonText="Trigger cross-origin error"
143
+ doThrow={() => {
144
+ // The `expect` module is loaded via unpkg, so that this assertion
145
+ // triggers a cross-origin error
146
+ window.expect(true).toBe(false);
147
+ }}
148
+ />
149
+ </TestCase>
150
+ <TestCase
151
+ title="Errors are logged even if they're caught (development mode only)"
152
+ description="">
153
+ <TestCase.Steps>
154
+ <li>Click the "Trigger render error and catch" button</li>
155
+ </TestCase.Steps>
156
+ <TestCase.ExpectedResult>
157
+ Open the console. "Uncaught Error: Caught error" should have been logged by the browser.
158
+ </TestCase.ExpectedResult>
159
+ <TriggerErrorAndCatch />
160
</TestCase>
161
</FixtureSet>
162
);
src/renderers/shared/fiber/ReactFiberErrorLogger.js
+18
-53
@@ -30,28 +30,6 @@ function logCapturedError(capturedError: CapturedError): void {
30
}
31
32
const error = (capturedError.error: any);
33
-
34
- // Duck-typing
35
- let message;
36
- let name;
37
- let stack;
38
-
39
- if (
40
- error !== null &&
41
- typeof error.message === 'string' &&
42
- typeof error.name === 'string' &&
43
- typeof error.stack === 'string'
44
- ) {
45
- message = error.message;
46
- name = error.name;
47
- stack = error.stack;
48
- } else {
49
- // A non-error was thrown.
50
- message = '' + error;
51
- name = 'Error';
52
- stack = '';
53
- }
54
-
33
if (__DEV__) {
34
const {
35
componentName,
@@ -61,25 +39,9 @@ function logCapturedError(capturedError: CapturedError): void {
39
willRetry,
40
} = capturedError;
41
64
- const errorSummary = message ? `${name}: ${message}` : name;
65
-
42
const componentNameMessage = componentName
67
- ? `React caught an error thrown by ${componentName}.`
68
- : 'React caught an error thrown by one of your components.';
69
-
70
- // Error stack varies by browser, eg:
71
- // Chrome prepends the Error name and type.
72
- // Firefox, Safari, and IE don't indent the stack lines.
73
- // Format it in a consistent way for error logging.
74
- let formattedCallStack = stack.slice(0, errorSummary.length) ===
75
- errorSummary
76
- ? stack.slice(errorSummary.length)
77
- : stack;
78
- formattedCallStack = formattedCallStack
79
- .trim()
80
- .split('\n')
81
- .map(line => `\n ${line.trim()}`)
82
- .join();
43
+ ? `The above error occurred in the <${componentName}> component:`
44
+ : 'The above error occurred in one of your React components:';
45
46
let errorBoundaryMessage;
47
// errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
@@ -90,25 +52,28 @@ function logCapturedError(capturedError: CapturedError): void {
52
`using the error boundary you provided, ${errorBoundaryName}.`;
53
} else {
54
errorBoundaryMessage =
93
- `This error was initially handled by the error boundary ${errorBoundaryName}. ` +
55
+ `This error was initially handled by the error boundary ${errorBoundaryName}.\n` +
56
`Recreating the tree from scratch failed so React will unmount the tree.`;
57
}
58
} else {
59
errorBoundaryMessage =
98
- 'Consider adding an error boundary to your tree to customize error handling behavior. ' +
99
- 'See https://fb.me/react-error-boundaries for more information.';
60
+ 'Consider adding an error boundary to your tree to customize error handling behavior.\n' +
61
+ 'You can learn more about error boundaries at https://fb.me/react-error-boundaries.';
62
}
101
-
102
- console.error(
103
- `${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n` +
104
- `${errorSummary}\n\n` +
105
- `The error is located at: ${componentStack}\n\n` +
106
- `The error was thrown at: ${formattedCallStack}`,
107
- );
63
+ const combinedMessage =
64
+ `${componentNameMessage}${componentStack}\n\n` +
65
+ `${errorBoundaryMessage}`;
66
+
67
+ // In development, we provide our own message with just the component stack.
68
+ // We don't include the original error message and JS stack because the browser
69
+ // has already printed it. Even if the application swallows the error, it is still
70
+ // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
71
+ console.error(combinedMessage);
72
} else {
109
- console.error(
110
- `React caught an error thrown by one of your components.\n\n${error.stack}`,
111
- );
73
+ // In production, we print the error directly.
74
+ // This will include the message, the JS stack, and anything the browser wants to show.
75
+ // We pass the error object instead of custom message so that the browser displays the error natively.
76
+ console.error(error);
77
}
78
}
79
src/renderers/shared/fiber/ReactFiberScheduler.js
+1
@@ -1188,6 +1188,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
1188
if (capturedErrors === null) {
1189
capturedErrors = new Map();
1190
}
1191
+
1192
capturedErrors.set(boundary, {
1193
componentName,
1194
componentStack,
src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
+16
-20
@@ -902,18 +902,15 @@ describe('ReactIncrementalErrorHandling', () => {
902
903
expect(console.error.calls.count()).toBe(1);
904
const errorMessage = console.error.calls.argsFor(0)[0];
905
- expect(errorMessage).toContain(
906
- 'React caught an error thrown by ErrorThrowingComponent. ' +
907
- 'You should fix this error in your code. ' +
908
- 'Consider adding an error boundary to your tree to customize error handling behavior.',
909
- );
910
- expect(errorMessage).toContain('Error: componentWillMount error');
905
expect(normalizeCodeLocInfo(errorMessage)).toContain(
912
- 'The error is located at: \n' +
906
+ 'The above error occurred in the <ErrorThrowingComponent> component:\n' +
907
' in ErrorThrowingComponent (at **)\n' +
908
' in span (at **)\n' +
909
' in div (at **)',
910
);
911
+ expect(errorMessage).toContain(
912
+ 'Consider adding an error boundary to your tree to customize error handling behavior.',
913
+ );
914
});
915
916
it('should log errors that occur during the commit phase', () => {
@@ -936,18 +933,15 @@ describe('ReactIncrementalErrorHandling', () => {
933
934
expect(console.error.calls.count()).toBe(1);
935
const errorMessage = console.error.calls.argsFor(0)[0];
939
- expect(errorMessage).toContain(
940
- 'React caught an error thrown by ErrorThrowingComponent. ' +
941
- 'You should fix this error in your code. ' +
942
- 'Consider adding an error boundary to your tree to customize error handling behavior.',
943
- );
944
- expect(errorMessage).toContain('Error: componentDidMount error');
936
expect(normalizeCodeLocInfo(errorMessage)).toContain(
946
- 'The error is located at: \n' +
937
+ 'The above error occurred in the <ErrorThrowingComponent> component:\n' +
938
' in ErrorThrowingComponent (at **)\n' +
939
' in span (at **)\n' +
940
' in div (at **)',
941
);
942
+ expect(errorMessage).toContain(
943
+ 'Consider adding an error boundary to your tree to customize error handling behavior.',
944
+ );
945
});
946
947
it('should ignore errors thrown in log method to prevent cycle', () => {
@@ -1026,15 +1020,17 @@ describe('ReactIncrementalErrorHandling', () => {
1020
expect(handleErrorCalls.length).toBe(1);
1021
expect(console.error.calls.count()).toBe(2);
1022
expect(console.error.calls.argsFor(0)[0]).toContain(
1029
- 'React caught an error thrown by ErrorThrowingComponent. ' +
1030
- 'You should fix this error in your code. ' +
1031
- 'React will try to recreate this component tree from scratch ' +
1023
+ 'The above error occurred in the <ErrorThrowingComponent> component:',
1024
+ );
1025
+ expect(console.error.calls.argsFor(0)[0]).toContain(
1026
+ 'React will try to recreate this component tree from scratch ' +
1027
'using the error boundary you provided, ErrorBoundaryComponent.',
1028
);
1029
expect(console.error.calls.argsFor(1)[0]).toContain(
1035
- 'React caught an error thrown by ErrorThrowingComponent. ' +
1036
- 'You should fix this error in your code. ' +
1037
- 'This error was initially handled by the error boundary ErrorBoundaryComponent. ' +
1030
+ 'The above error occurred in the <ErrorThrowingComponent> component:',
1031
+ );
1032
+ expect(console.error.calls.argsFor(1)[0]).toContain(
1033
+ 'This error was initially handled by the error boundary ErrorBoundaryComponent.\n' +
1034
'Recreating the tree from scratch failed so React will unmount the tree.',
1035
);
1036
});
src/renderers/shared/utils/ReactErrorUtils.js
+16
@@ -208,10 +208,14 @@ if (__DEV__) {
208
let error;
209
// Use this to track whether the error event is ever called.
210
let didSetError = false;
211
+ let isCrossOriginError = false;
212
213
function onError(event) {
214
error = event.error;
215
didSetError = true;
216
+ if (error === null && event.colno === 0 && event.lineno === 0) {
217
+ isCrossOriginError = true;
218
+ }
219
}
220
221
// Create a fake event type.
@@ -240,6 +244,18 @@ if (__DEV__) {
244
'or switching to a modern browser. If you suspect that this is ' +
245
'actually an issue with React, please file an issue.',
246
);
247
+ } else if (isCrossOriginError) {
248
+ error = new Error(
249
+ "A cross-origin error was thrown. React doesn't have access to " +
250
+ 'the actual error because it catches errors using a global ' +
251
+ 'error handler, in order to preserve the "Pause on exceptions" ' +
252
+ 'behavior of the DevTools. This is only an issue in DEV-mode; ' +
253
+ 'in production, React uses a normal try-catch statement.\n\n' +
254
+ 'If you are using React from a CDN, ensure that the <script> tag ' +
255
+ 'has a `crossorigin` attribute, and that it is served with the ' +
256
+ '`Access-Control-Allow-Origin: *` HTTP header. ' +
257
+ 'See https://fb.me/react-cdn-crossorigin',
258
+ );
259
}
260
ReactErrorUtils._hasCaughtError = true;
261
ReactErrorUtils._caughtError = error;