Normalized stack format/display for different browsers

Author: Brian Vaughn

src/renderers/shared/fiber/ReactFiberErrorLogger.js

@@ -25,16 +25,25 @@ function logCapturedError(capturedError : CapturedError) : void {
       willRetry,
     } = capturedError;
 
-    const errorSummary = error.message
-      ? `Error: ${error.message}\n\n`
-      : '';
+    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.';
 
-    const callStack = error.stack;
-    const trimmedCallStack = callStack.substring(callStack.indexOf('\n'));
+    // Error stack varies by browser; normalize it for our logging.
+    const formattedCallStack = stack.replace(new RegExp(`^${errorSummary}\n`), '')
+      .split('\n')
+      .map((line) => `\n    ${line.trim()}`)
+      .join();
 
     let errorBoundaryMessage;
     // errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
@@ -56,9 +65,9 @@ function logCapturedError(capturedError : CapturedError) : void {
 
     console.error(
       `${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n` +
-      errorSummary +
+      `${errorSummary}\n\n` +
       `The error is located at: ${componentStack}\n\n` +
-      `The error was thrown at: ${trimmedCallStack}`
+      `The error was thrown at: ${formattedCallStack}`
     );
   }