From 3521eb7c8b657d7ca08f4da650474d2c48b57691 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 a3f845cf0..1b6a1d5d8 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 58d6705ec..1a337d2f5 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 75ff36f14..855778cbd 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 = {
--
GitLab