Tweaked captured error log slightly based on feedback (#8785)

Tweaked captured error log slightly based on feedback. Normalized stack format/display for different browsers
facebook · 16abcef9375bac326100c7e69d1ebced76d624f6 · bvaughn committed on GitHub Jan 17, 2017 · Jan 17, 2017 · 16abcef
1 parent 935bdbe
commit 16abcef9375bac326100c7e69d1ebced76d624f6
Unified Split

Showing with 28 additions and 4 deletions.

+26 −2 src/renderers/shared/fiber/ReactFiberErrorLogger.js

+2 −2 src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
diff --git a/src/renderers/shared/fiber/ReactFiberErrorLogger.js b/src/renderers/shared/fiber/ReactFiberErrorLogger.js
@@ -25,10 +25,33 @@ function logCapturedError(capturedError : CapturedError) : void {
       willRetry,
     } = capturedError;
 
+    const {
+      message,
+      name,
+      stack,
+    } = error;
+
+    const errorSummary = message
+      ? `${name}: ${message}`
+      : name;
+
     const componentNameMessage = componentName
       ? `React caught an error thrown by ${componentName}.`
       : 'React caught an error thrown by one of your components.';
 
+    // Error stack varies by browser, eg:
+    // Chrome prepends the Error name and type.
+    // Firefox, Safari, and IE don't indent the stack lines.
+    // Format it in a consistent way for error logging.
+    let formattedCallStack = stack.slice(0, errorSummary.length) === errorSummary
+      ? stack.slice(errorSummary.length)
+      : stack;
+    formattedCallStack = formattedCallStack
+      .trim()
+      .split('\n')
+      .map((line) => `\n    ${line.trim()}`)
+      .join();
+
     let errorBoundaryMessage;
     // errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
     if (errorBoundaryFound && errorBoundaryName) {
@@ -49,8 +72,9 @@ function logCapturedError(capturedError : CapturedError) : void {
 
     console.error(
       `${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n` +
-      `${error.stack}\n\n` +
-      `The error was thrown in the following location: ${componentStack}`
+      `${errorSummary}\n\n` +
+      `The error is located at: ${componentStack}\n\n` +
+      `The error was thrown at: ${formattedCallStack}`
     );
   }
 
diff --git a/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js b/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
@@ -980,7 +980,7 @@ describe('ReactIncrementalErrorHandling', () => {
       );
       expect(errorMessage).toContain('Error: componentWillMount error');
       expect(normalizeCodeLocInfo(errorMessage)).toContain(
-        'The error was thrown in the following location: \n' +
+        'The error is located at: \n' +
         '    in ErrorThrowingComponent (at **)\n' +
         '    in span (at **)\n' +
         '    in div (at **)'
@@ -1014,7 +1014,7 @@ describe('ReactIncrementalErrorHandling', () => {
       );
       expect(errorMessage).toContain('Error: componentDidMount error');
       expect(normalizeCodeLocInfo(errorMessage)).toContain(
-        'The error was thrown in the following location: \n' +
+        'The error is located at: \n' +
         '    in ErrorThrowingComponent (at **)\n' +
         '    in span (at **)\n' +
         '    in div (at **)'