Make error box messages friendlier (#2123)

facebook · May 11, 2017 · 3521eb7 · 3521eb7
1 parent a4bd567
commit 3521eb7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -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
@@ -65,6 +65,7 @@ const headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
   color: red,
+  'white-space': 'pre-wrap',
 };
 
 const functionNameStyle = {