Don't collapse unintentional top-level errors

Author: gaearon

packages/react-error-overlay/src/components/frame.js

@@ -115,6 +115,21 @@ function frameDiv(document: Document, functionName, url, internalUrl) {
   return frame;
 }
 
+function isBultinErrorName(errorName: ?string) {
+  switch (errorName) {
+    case 'EvalError':
+    case 'InternalError':
+    case 'RangeError':
+    case 'ReferenceError':
+    case 'SyntaxError':
+    case 'TypeError':
+    case 'URIError':
+      return true;
+    default:
+      return false;
+  }
+}
+
 function createFrame(
   document: Document,
   frameSetting: FrameSetting,
@@ -124,7 +139,8 @@ function createFrame(
   omits: OmitsObject,
   omitBundle: number,
   parentContainer: HTMLDivElement,
-  lastElement: boolean
+  lastElement: boolean,
+  errorName: ?string
 ) {
   const { compiled } = frameSetting;
   let { functionName, _originalFileName: sourceFileName } = frame;
@@ -149,35 +165,47 @@ function createFrame(
     functionName = '(anonymous function)';
   }
 
-  let url;
-  if (!compiled && sourceFileName && sourceLineNumber) {
-    // Remove everything up to the first /src/
-    const trimMatch = /^[/|\\].*?[/|\\](src[/|\\].*)/.exec(sourceFileName);
+  let prettyURL;
+  if (!compiled && sourceFileName && typeof sourceLineNumber === 'number') {
+    // Remove everything up to the first /src/ or /node_modules/
+    const trimMatch = /^[/|\\].*?[/|\\]((src|node_modules)[/|\\].*)/.exec(
+      sourceFileName
+    );
     if (trimMatch && trimMatch[1]) {
-      sourceFileName = trimMatch[1];
+      prettyURL = trimMatch[1];
+    } else {
+      prettyURL = sourceFileName;
     }
-
-    url = sourceFileName + ':' + sourceLineNumber;
-    if (sourceColumnNumber) {
-      url += ':' + sourceColumnNumber;
+    prettyURL += ':' + sourceLineNumber;
+    if (typeof sourceColumnNumber === 'number') {
+      prettyURL += ':' + sourceColumnNumber;
     }
-  } else if (fileName && lineNumber) {
-    url = fileName + ':' + lineNumber;
-    if (columnNumber) {
-      url += ':' + columnNumber;
+  } else if (fileName && typeof lineNumber === 'number') {
+    prettyURL = fileName + ':' + lineNumber;
+    if (typeof columnNumber === 'number') {
+      prettyURL += ':' + columnNumber;
     }
   } else {
-    url = 'unknown';
+    prettyURL = 'unknown';
   }
 
   let needsHidden = false;
-  const internalUrl = isInternalFile(url, sourceFileName);
-  if (internalUrl) {
+  const isInternalUrl = isInternalFile(sourceFileName, fileName);
+  const isThrownIntentionally = !isBultinErrorName(errorName);
+  const shouldCollapse = isInternalUrl &&
+    (isThrownIntentionally || omits.hasReachedAppCode);
+
+  if (!isInternalUrl) {
+    omits.hasReachedAppCode = true;
+  }
+
+  if (shouldCollapse) {
     ++omits.value;
     needsHidden = true;
   }
+
   let collapseElement = null;
-  if (!internalUrl || lastElement) {
+  if (!shouldCollapse || lastElement) {
     if (omits.value > 0) {
       const capV = omits.value;
       const omittedFrames = getGroupToggle(document, capV, omitBundle);
@@ -190,7 +218,7 @@ function createFrame(
           omittedFrames
         );
       });
-      if (lastElement && internalUrl) {
+      if (lastElement && shouldCollapse) {
         collapseElement = omittedFrames;
       } else {
         parentContainer.appendChild(omittedFrames);
@@ -200,14 +228,14 @@ function createFrame(
     omits.value = 0;
   }
 
-  const elem = frameDiv(document, functionName, url, internalUrl);
+  const elem = frameDiv(document, functionName, prettyURL, shouldCollapse);
   if (needsHidden) {
     applyStyles(elem, hiddenStyle);
     elem.setAttribute('name', 'bundle-' + omitBundle);
   }
 
   let hasSource = false;
-  if (!internalUrl) {
+  if (!shouldCollapse) {
     if (
       compiled && scriptLines && scriptLines.length !== 0 && lineNumber != null
     ) {

packages/react-error-overlay/src/components/frames.js

@@ -5,7 +5,11 @@ import { traceStyle, toggleStyle } from '../styles';
 import { enableTabClick } from '../utils/dom/enableTabClick';
 import { createFrame } from './frame';
 
-type OmitsObject = { value: number, bundle: number };
+type OmitsObject = {
+  value: number,
+  bundle: number,
+  hasReachedAppCode: boolean,
+};
 type FrameSetting = { compiled: boolean };
 export type { OmitsObject, FrameSetting };
 
@@ -68,7 +72,8 @@ function createFrames(
   document: Document,
   resolvedFrames: StackFrame[],
   frameSettings: FrameSetting[],
-  contextSize: number
+  contextSize: number,
+  errorName: ?string
 ) {
   if (resolvedFrames.length !== frameSettings.length) {
     throw new Error(
@@ -80,7 +85,7 @@ function createFrames(
 
   let index = 0;
   let critical = true;
-  const omits: OmitsObject = { value: 0, bundle: 1 };
+  const omits: OmitsObject = { value: 0, bundle: 1, hasReachedAppCode: false };
   resolvedFrames.forEach(function(frame) {
     const lIndex = index++;
     const elem = createFrameWrapper(
@@ -96,7 +101,8 @@ function createFrames(
         omits,
         omits.bundle,
         trace,
-        index === resolvedFrames.length
+        index === resolvedFrames.length,
+        errorName
       ),
       lIndex,
       frameSettings,

packages/react-error-overlay/src/components/overlay.js

@@ -73,7 +73,7 @@ function createOverlay(
 
   // Create trace
   container.appendChild(
-    createFrames(document, frames, frameSettings, contextSize)
+    createFrames(document, frames, frameSettings, contextSize, name)
   );
 
   // Show message

packages/react-error-overlay/src/utils/isInternalFile.js

@@ -1,10 +1,12 @@
 /* @flow */
-function isInternalFile(url: string, sourceFileName: string | null | void) {
-  return url.indexOf('/~/') !== -1 ||
-    url.indexOf('/node_modules/') !== -1 ||
-    url.trim().indexOf(' ') !== -1 ||
-    sourceFileName == null ||
-    sourceFileName.length === 0;
+function isInternalFile(sourceFileName: ?string, fileName: ?string) {
+  return sourceFileName == null ||
+    sourceFileName === '' ||
+    sourceFileName.indexOf('/~/') !== -1 ||
+    sourceFileName.indexOf('/node_modules/') !== -1 ||
+    sourceFileName.trim().indexOf(' ') !== -1 ||
+    fileName == null ||
+    fileName === '';
 }
 
 export { isInternalFile };