Show errored file always in the error overlay. (vercel#1470)

arunoda · web-flow · commit bc2d5f3bdb50 · 2017-03-23T04:43:23.000+05:30
This was not happening when there's module not found errors.
Now we try to do this for all the errors if possible.
diff --git a/lib/error-debug.js b/lib/error-debug.js
@@ -10,16 +10,16 @@ export default ({ error, error: { name, message, module } }) => (
     {module ? <div style={styles.heading}>Error in {module.rawRequest}</div> : null}
     {
       name === 'ModuleBuildError'
-      ? <pre style={styles.message} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
+      ? <pre style={styles.stack} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
       : <StackTrace error={error} />
     }
   </div>
 )
 
 const StackTrace = ({ error: { name, message, stack } }) => (
   <div>
-    <div style={styles.heading}>{name && message && `${name}: ${message}`}</div>
-    <pre style={styles.message}>
+    <div style={styles.heading}>{message || name}</div>
+    <pre style={styles.stack}>
       {stack}
     </pre>
   </div>
@@ -39,21 +39,22 @@ const styles = {
     zIndex: 9999
   },
 
-  message: {
+  stack: {
     fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", consolas, menlo-regular, monospace',
     fontSize: '13px',
     color: '#fbe7f1',
     margin: 0,
     whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word'
+    wordWrap: 'break-word',
+    marginTop: '20px'
   },
 
   heading: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
     fontSize: '15px',
     fontWeight: 'bold',
-    color: '#ff84bf',
-    marginBottom: '20px'
+    color: '#febfdd',
+    marginBottom: '5px'
   }
 }
 
diff --git a/server/render.js b/server/render.js
@@ -142,9 +142,9 @@ function errorToJSON (err) {
   const { name, message, stack } = err
   const json = { name, message, stack }
 
-  if (name === 'ModuleBuildError') {
-    // webpack compilation error
-    const { module: { rawRequest } } = err
+  if (err.module) {
+    // rawRequest contains the filename of the module which has the error.
+    const { rawRequest } = err.module
     json.module = { rawRequest }
   }
 
