[DevTools] Fix display of stack frames with anonymous sources

Author: eps1lon

packages/react-devtools-shared/src/backend/utils/parseStackTrace.js

@@ -52,8 +52,8 @@ function parseStackTraceFromChromeStack(
     if (filename === '<anonymous>') {
       filename = '';
     }
-    const line = +(parsed[3] || parsed[6]);
-    const col = +(parsed[4] || parsed[7]);
+    const line = +(parsed[3] || parsed[6] || 0);
+    const col = +(parsed[4] || parsed[7] || 0);
     parsedFrames.push([name, filename, line, col, 0, 0, isAsync]);
   }
   return parsedFrames;
@@ -235,6 +235,7 @@ function collectStackTrace(
 //     at name (filename:0:0)
 //     at filename:0:0
 //     at async filename:0:0
+//     at Array.map (<anonymous>)
 const chromeFrameRegExp =
   /^ *at (?:(.+) \((?:(.+):(\d+):(\d+)|\<anonymous\>)\)|(?:async )?(.+):(\d+):(\d+)|\<anonymous\>)$/;
 

packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js

@@ -63,13 +63,18 @@ export function CallSiteView({
   return (
     <div className={styles.CallSite}>
       {functionName || virtualFunctionName}
-      {' @ '}
-      <span
-        className={linkIsEnabled ? styles.Link : null}
-        onClick={viewSource}
-        title={url + ':' + line}>
-        {formatLocationForDisplay(url, line, column)}
-      </span>
+      {url !== '' && (
+        <>
+          {' @ '}
+          <span
+            className={linkIsEnabled ? styles.Link : null}
+            onClick={viewSource}
+            title={url + ':' + line}>
+            {formatLocationForDisplay(url, line, column)}
+          </span>
+        </>
+      )}
+
       <ElementBadges environmentName={environmentName} />
     </div>
   );

packages/react-devtools-shared/src/devtools/views/Components/formatLocationForDisplay.js

@@ -40,5 +40,9 @@ export default function formatLocationForDisplay(
     }
   }
 
+  if (line === 0) {
+    return nameOnly;
+  }
+
   return `${nameOnly}:${line}`;
 }