diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index a3f845cf0b95204150630ff380a51924bd7d7932..1b6a1d5d8b2de257486c36d7b2d4d08d44ad0f65 100644
--- a/packages/react-error-overlay/src/components/frame.js
+++ b/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 --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 58d6705ec8b01b5d6a5571ddadb48019906e25af..1a337d2f58a6878ba4a88f242aa873e33629ca60 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/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 --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 75ff36f1441bf717f1381c682bd6c00626b6cbe1..855778cbd13ff1a8919bf0486273d4d9d1056c12 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/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 = {