From 3c13419093bbf7cdc177899ca913057dd5d4c81d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 11 May 2017 15:37:48 +0100
Subject: [PATCH] Make error box messages friendlier (#2123)

---
 .../src/components/frame.js                    | 10 +++++++++-
 .../src/components/overlay.js                  | 18 +++++++++++++-----
 packages/react-error-overlay/src/styles.js     |  1 +
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index a3f845cf0b9..1b6a1d5d8b2 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 58d6705ec8b..1a337d2f58a 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 75ff36f1441..855778cbd13 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 = {