Skip to content

Commit a650699

Browse files
acdlitegaearon
acdlite
authored and
gaearon
committed
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
1 parent 028e0ea commit a650699

File tree

6 files changed

+136
-81
lines changed

6 files changed

+136
-81
lines changed

‎fixtures/dom/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
-->
1616
<title>React App</title>
1717
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
18+
<script src="https://unpkg.com/[email protected]/umd/expect.min.js"></script>
1819
</head>
1920
<body>
2021
<div id="root"></div>

‎fixtures/dom/src/components/fixtures/error-handling/index.js‎

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import FixtureSet from '../../FixtureSet';
22
import TestCase from '../../TestCase';
33

44
const React = window.React;
5+
const ReactDOM = window.ReactDOM;
56

67
function BadRender(props) {
7-
throw props.error;
8+
props.doThrow();
89
}
910
class ErrorBoundary extends React.Component {
11+
static defaultProps = {
12+
buttonText: 'Trigger error',
13+
};
1014
state = {
1115
shouldThrow: false,
1216
didThrow: false,
@@ -23,15 +27,15 @@ class ErrorBoundary extends React.Component {
2327
render() {
2428
if (this.state.didThrow) {
2529
if (this.state.error) {
26-
return `Captured an error: ${this.state.error.message}`;
30+
return <p>Captured an error: {this.state.error.message}</p>;
2731
} else {
28-
return `Captured an error: ${this.state.error}`;
32+
return <p>Captured an error: {'' + this.state.error}</p>;
2933
}
3034
}
3135
if (this.state.shouldThrow) {
32-
return <BadRender error={this.props.error} />;
36+
return <BadRender doThrow={this.props.doThrow} />;
3337
}
34-
return <button onClick={this.triggerError}>Trigger error</button>;
38+
return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
3539
}
3640
}
3741
class Example extends React.Component {
@@ -42,13 +46,44 @@ class Example extends React.Component {
4246
render() {
4347
return (
4448
<div>
45-
<ErrorBoundary error={this.props.error} key={this.state.key} />
4649
<button onClick={this.restart}>Reset</button>
50+
<ErrorBoundary
51+
buttonText={this.props.buttonText}
52+
doThrow={this.props.doThrow}
53+
key={this.state.key}
54+
/>
4755
</div>
4856
);
4957
}
5058
}
5159

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+
5287
export default class ErrorHandlingTestCases extends React.Component {
5388
render() {
5489
return (
@@ -69,7 +104,11 @@ export default class ErrorHandlingTestCases extends React.Component {
69104
should be replaced with "Captured an error: Oops!" Clicking reset
70105
should reset the test case.
71106
</TestCase.ExpectedResult>
72-
<Example error={new Error('Oops!')} />
107+
<Example
108+
doThrow={() => {
109+
throw new Error('Oops!');
110+
}}
111+
/>
73112
</TestCase>
74113
<TestCase title="Throwing null" description="">
75114
<TestCase.Steps>
@@ -80,7 +119,44 @@ export default class ErrorHandlingTestCases extends React.Component {
80119
The "Trigger error" button should be replaced with "Captured an
81120
error: null". Clicking reset should reset the test case.
82121
</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 />
84160
</TestCase>
85161
</FixtureSet>
86162
);

‎src/renderers/shared/fiber/ReactFiberErrorLogger.js‎

Lines changed: 18 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,6 @@ function logCapturedError(capturedError: CapturedError): void {
3030
}
3131

3232
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-
5533
if (__DEV__) {
5634
const {
5735
componentName,
@@ -61,25 +39,9 @@ function logCapturedError(capturedError: CapturedError): void {
6139
willRetry,
6240
} = capturedError;
6341

64-
const errorSummary = message ? `${name}: ${message}` : name;
65-
6642
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:';
8345

8446
let errorBoundaryMessage;
8547
// errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
@@ -90,25 +52,28 @@ function logCapturedError(capturedError: CapturedError): void {
9052
`using the error boundary you provided, ${errorBoundaryName}.`;
9153
} else {
9254
errorBoundaryMessage =
93-
`This error was initially handled by the error boundary ${errorBoundaryName}. ` +
55+
`This error was initially handled by the error boundary ${errorBoundaryName}.\n` +
9456
`Recreating the tree from scratch failed so React will unmount the tree.`;
9557
}
9658
} else {
9759
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.';
10062
}
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);
10872
} 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);
11277
}
11378
}
11479

‎src/renderers/shared/fiber/ReactFiberScheduler.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1188,6 +1188,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
11881188
if (capturedErrors === null) {
11891189
capturedErrors = new Map();
11901190
}
1191+
11911192
capturedErrors.set(boundary, {
11921193
componentName,
11931194
componentStack,

‎src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -902,18 +902,15 @@ describe('ReactIncrementalErrorHandling', () => {
902902

903903
expect(console.error.calls.count()).toBe(1);
904904
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');
911905
expect(normalizeCodeLocInfo(errorMessage)).toContain(
912-
'The error is located at: \n' +
906+
'The above error occurred in the <ErrorThrowingComponent> component:\n' +
913907
' in ErrorThrowingComponent (at **)\n' +
914908
' in span (at **)\n' +
915909
' in div (at **)',
916910
);
911+
expect(errorMessage).toContain(
912+
'Consider adding an error boundary to your tree to customize error handling behavior.',
913+
);
917914
});
918915

919916
it('should log errors that occur during the commit phase', () => {
@@ -936,18 +933,15 @@ describe('ReactIncrementalErrorHandling', () => {
936933

937934
expect(console.error.calls.count()).toBe(1);
938935
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');
945936
expect(normalizeCodeLocInfo(errorMessage)).toContain(
946-
'The error is located at: \n' +
937+
'The above error occurred in the <ErrorThrowingComponent> component:\n' +
947938
' in ErrorThrowingComponent (at **)\n' +
948939
' in span (at **)\n' +
949940
' in div (at **)',
950941
);
942+
expect(errorMessage).toContain(
943+
'Consider adding an error boundary to your tree to customize error handling behavior.',
944+
);
951945
});
952946

953947
it('should ignore errors thrown in log method to prevent cycle', () => {
@@ -1026,15 +1020,17 @@ describe('ReactIncrementalErrorHandling', () => {
10261020
expect(handleErrorCalls.length).toBe(1);
10271021
expect(console.error.calls.count()).toBe(2);
10281022
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 ' +
10321027
'using the error boundary you provided, ErrorBoundaryComponent.',
10331028
);
10341029
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' +
10381034
'Recreating the tree from scratch failed so React will unmount the tree.',
10391035
);
10401036
});

‎src/renderers/shared/utils/ReactErrorUtils.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,10 +208,14 @@ if (__DEV__) {
208208
let error;
209209
// Use this to track whether the error event is ever called.
210210
let didSetError = false;
211+
let isCrossOriginError = false;
211212

212213
function onError(event) {
213214
error = event.error;
214215
didSetError = true;
216+
if (error === null && event.colno === 0 && event.lineno === 0) {
217+
isCrossOriginError = true;
218+
}
215219
}
216220

217221
// Create a fake event type.
@@ -240,6 +244,18 @@ if (__DEV__) {
240244
'or switching to a modern browser. If you suspect that this is ' +
241245
'actually an issue with React, please file an issue.',
242246
);
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+
);
243259
}
244260
ReactErrorUtils._hasCaughtError = true;
245261
ReactErrorUtils._caughtError = error;

0 commit comments

Comments
 (0)