fix: error overlay could fail by itself

gaearon · Aug 27, 2019 · da50985 · da50985
1 parent 67e8fbc
commit da50985
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ export default hot(App);
   module.exports = {
     entry: ['react-hot-loader/patch', './src'],
     // ...
-  }
+  };
   ```
 
 4.  If you need hooks support, use [`@hot-loader/react-dom`](#hot-loaderreact-dom)
@@ -123,10 +123,10 @@ module.exports = {
   // ...
   resolve: {
     alias: {
-      'react-dom': '@hot-loader/react-dom'
-    }
-  }
-}
+      'react-dom': '@hot-loader/react-dom',
+    },
+  },
+};
 ```
 
 ### Old API

diff --git a/src/errorReporter.js b/src/errorReporter.js
@@ -68,39 +68,45 @@ const errorHeader = (component, componentStack) => {
   return null;
 };
 
-const mapError = ({ error, errorInfo, component }) => (
-  <React.Fragment>
-    <p style={{ color: 'red' }}>
-      {errorHeader(component, errorInfo && errorInfo.componentStack)}{' '}
-      {error.toString ? error.toString() : (error && error.message) || 'undefined error'}
-    </p>
-    {errorInfo && errorInfo.componentStack ? (
-      <div>
-        <div>Stack trace:</div>
-        <ul style={{ color: 'red', marginTop: '10px' }}>
-          {error.stack
-            .split('\n')
-            .slice(1, 2)
-            .map((line, i) => <li key={String(i)}>{line}</li>)}
-          <hr />
-          {errorInfo.componentStack
-            .split('\n')
-            .filter(Boolean)
-            .map((line, i) => <li key={String(i)}>{line}</li>)}
-        </ul>
-      </div>
-    ) : (
-      error.stack && (
+const mapError = ({ error, errorInfo, component }) => {
+  if (!error) {
+    error = { message: 'undefined error' };
+  }
+
+  return (
+    <React.Fragment>
+      <p style={{ color: 'red' }}>
+        {errorHeader(component, errorInfo && errorInfo.componentStack)}{' '}
+        {error.toString ? error.toString() : (error && error.message) || 'undefined error'}
+      </p>
+      {errorInfo && errorInfo.componentStack ? (
         <div>
           <div>Stack trace:</div>
           <ul style={{ color: 'red', marginTop: '10px' }}>
-            {error.stack.split('\n').map((line, i) => <li key={String(i)}>{line}</li>)}
+            {error.stack
+              .split('\n')
+              .slice(1, 2)
+              .map((line, i) => <li key={String(i)}>{line}</li>)}
+            <hr />
+            {errorInfo.componentStack
+              .split('\n')
+              .filter(Boolean)
+              .map((line, i) => <li key={String(i)}>{line}</li>)}
           </ul>
         </div>
-      )
-    )}
-  </React.Fragment>
-);
+      ) : (
+        error.stack && (
+          <div>
+            <div>Stack trace:</div>
+            <ul style={{ color: 'red', marginTop: '10px' }}>
+              {error.stack.split('\n').map((line, i) => <li key={String(i)}>{line}</li>)}
+            </ul>
+          </div>
+        )
+      )}
+    </React.Fragment>
+  );
+};
 
 class ErrorOverlay extends React.Component {
   state = {