Make error box messages friendlier (facebook#2123)

Author: gaearon

Diff for: packages/react-error-overlay/src/components/frame.js

@@ -127,8 +127,8 @@ function createFrame(
   lastElement: boolean
 ) {
   const { compiled } = frameSetting;
+  let { functionName } = frame;
   const {
-    functionName,
     fileName,
     lineNumber,
     columnNumber,
@@ -139,6 +139,14 @@ function createFrame(
     _originalScriptCode: sourceLines,
   } = frame;
 
+  // TODO: find a better place for this.
+  // Chrome has a bug with inferring function.name:
+  // https://github.com/facebookincubator/create-react-app/issues/2097
+  // Let's ignore a meaningless name we get for top-level modules.
+  if (functionName === 'Object.friendlySyntaxErrorLabel') {
+    functionName = '(anonymous function)';
+  }
+
   let url;
   if (!compiled && sourceFileName && sourceLineNumber) {
     url = sourceFileName + ':' + sourceLineNumber;

Diff for: packages/react-error-overlay/src/components/overlay.js

@@ -50,11 +50,19 @@ function createOverlay(
   // Create header
   const header = document.createElement('div');
   applyStyles(header, headerStyle);
-  if (message.match(/^\w*:/)) {
-    header.appendChild(document.createTextNode(message));
-  } else {
-    header.appendChild(document.createTextNode(name + ': ' + message));
-  }
+
+  // Make message prettier
+  let finalMessage = message.match(/^\w*:/) ? name + ': ' + message : message;
+  finalMessage = finalMessage
+    // TODO: maybe remove this prefix from fbjs?
+    // It's just scaring people
+    .replace('Invariant Violation: ', '')
+    // Break the actionable part to the next line.
+    // AFAIK React 16+ should already do this.
+    .replace(' Check the render method', '\n\nCheck the render method');
+
+  // Put it in the DOM
+  header.appendChild(document.createTextNode(finalMessage));
   container.appendChild(header);
 
   // Create trace

Diff for: packages/react-error-overlay/src/styles.js

@@ -65,6 +65,7 @@ const headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
   color: red,
+  'white-space': 'pre-wrap',
 };
 
 const functionNameStyle = {