Tweaked captured error log slightly based on feedback (#8785)
Tweaked captured error log slightly based on feedback. Normalized stack format/display for different browsers
Brian Vaughn committed
Jan 17, 2017 at 14:32 UTC
16abcef9375bac326100c7e69d1ebced76d624f6
2 files changed
+28
-4
src/renderers/shared/fiber/ReactFiberErrorLogger.js
+26
-2
@@ -25,10 +25,33 @@ function logCapturedError(capturedError : CapturedError) : void {
25
willRetry,
26
} = capturedError;
27
28
+ const {
29
+ message,
30
+ name,
31
+ stack,
32
+ } = error;
33
+
34
+ const errorSummary = message
35
+ ? `${name}: ${message}`
36
+ : name;
37
+
38
const componentNameMessage = componentName
39
? `React caught an error thrown by ${componentName}.`
40
: 'React caught an error thrown by one of your components.';
41
42
+ // Error stack varies by browser, eg:
43
+ // Chrome prepends the Error name and type.
44
+ // Firefox, Safari, and IE don't indent the stack lines.
45
+ // Format it in a consistent way for error logging.
46
+ let formattedCallStack = stack.slice(0, errorSummary.length) === errorSummary
47
+ ? stack.slice(errorSummary.length)
48
+ : stack;
49
+ formattedCallStack = formattedCallStack
50
+ .trim()
51
+ .split('\n')
52
+ .map((line) => `\n ${line.trim()}`)
53
+ .join();
54
+
55
let errorBoundaryMessage;
56
// errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
57
if (errorBoundaryFound && errorBoundaryName) {
@@ -49,8 +72,9 @@ function logCapturedError(capturedError : CapturedError) : void {
72
73
console.error(
74
`${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n` +
52
- `${error.stack}\n\n` +
53
- `The error was thrown in the following location: ${componentStack}`
75
+ `${errorSummary}\n\n` +
76
+ `The error is located at: ${componentStack}\n\n` +
77
+ `The error was thrown at: ${formattedCallStack}`
78
);
79
}
80
src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
+2
-2
@@ -980,7 +980,7 @@ describe('ReactIncrementalErrorHandling', () => {
980
);
981
expect(errorMessage).toContain('Error: componentWillMount error');
982
expect(normalizeCodeLocInfo(errorMessage)).toContain(
983
- 'The error was thrown in the following location: \n' +
983
+ 'The error is located at: \n' +
984
' in ErrorThrowingComponent (at **)\n' +
985
' in span (at **)\n' +
986
' in div (at **)'
@@ -1014,7 +1014,7 @@ describe('ReactIncrementalErrorHandling', () => {
1014
);
1015
expect(errorMessage).toContain('Error: componentDidMount error');
1016
expect(normalizeCodeLocInfo(errorMessage)).toContain(
1017
- 'The error was thrown in the following location: \n' +
1017
+ 'The error is located at: \n' +
1018
' in ErrorThrowingComponent (at **)\n' +
1019
' in span (at **)\n' +
1020
' in div (at **)'