Resolve sourcemaps for friendlier traces

Author: Timer

packages/react-dev-utils/failFast.js

@@ -1,5 +1,7 @@
 (function() {
   const ErrorStackParser = require('error-stack-parser')
+  const StackTraceGPS = require('stacktrace-gps')
+  const gps = new StackTraceGPS()
 
   const overlayStyle = {
     position: 'fixed',
@@ -82,16 +84,47 @@
   }
 
   function crash(error, unhandledRejection = false) {
-    let frames = []
-    try {
-      frames = ErrorStackParser.parse(error)
-    } catch (e) {
-    }
-    if (unhandledRejection) {
-      render(`Unhandled Rejection (${error.name})`, error.message, frames)
-    } else {
-      render(error.name, error.message, frames)
-    }
+    new Promise(function(resolve, reject) {
+      let frames = []
+
+      // Wrap all this up to make sure we have a fail case (external apis) ...
+      try {
+        // Error -> StackFrame[]
+        frames = ErrorStackParser.parse(error)
+        if (frames.length === 0) {
+          resolve(frames)
+          return
+        }
+
+        // Resolve StackFrames via sourcemaps and magic
+        const frames2 = []
+        let pending = frames.length
+        frames.forEach(function(frame, index) {
+          gps.pinpoint(frame).then(function(nFrame) {
+            frames2[index] = nFrame
+            if (--pending === 0) resolve(frames2)
+          }).catch(function() {
+            // Failed to pinpoint frame ... reuse old frame.
+            frames2[index] = frame
+            if (--pending === 0) resolve(frames2)
+          })
+        })
+      } catch (e) {
+        // Failed to resolve frames at one point or another (synchronous)
+        // Default to using `frames` which should contain the browser's stack
+        resolve(frames)
+      }
+    }).then(function(frames) {
+      if (unhandledRejection) {
+        render(`Unhandled Rejection (${error.name})`, error.message, frames)
+      } else {
+        render(error.name, error.message, frames)
+      }
+    }).catch(function() {
+      // This is another fail case (unlikely to happen)
+      // e.g. render(...) throws an error with provided arguments
+      render('Error', 'Unknown Error (failure to materialize)', [])
+    })
   }
 
   window.onerror = function(messageOrEvent, source, lineno, colno, error) {

packages/react-dev-utils/package.json

@@ -31,6 +31,7 @@
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
+    "stacktrace-gps": "2.4.4",
     "strip-ansi": "3.0.1"
   }
 }