Collapse stack frames that are too close to each other

Created by: gaearon

This adjusts warning logic to my latest changes in https://github.com/facebook/react/pull/9679#issuecomment-301275629.

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

@@ -146,6 +146,20 @@ function createFrame(
     functionName = '(anonymous function)';
   }
 
+  let isTooClose = false;
+  if (
+    omits.lastFileName != null &&
+    sourceFileName === omits.lastFileName &&
+    omits.lastLineNumber != null &&
+    sourceLineNumber != null &&
+    Math.abs(sourceLineNumber - omits.lastLineNumber) < 3
+  ) {
+    isTooClose = true;
+  } else {
+    omits.lastFileName = sourceFileName;
+    omits.lastLineNumber = sourceLineNumber;
+  }
+
   let url;
   if (!compiled && sourceFileName && sourceLineNumber) {
     // Remove everything up to the first /src/
@@ -168,13 +182,18 @@ function createFrame(
   }
 
   let needsHidden = false;
-  const internalUrl = isInternalFile(url, sourceFileName);
-  if (internalUrl) {
+  let internalUrl = isInternalFile(url, sourceFileName);
+
+  let shouldCollapse = internalUrl || isTooClose;
+  let shouldSkipCode = internalUrl;
+
+  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);
@@ -187,7 +206,7 @@ function createFrame(
           omittedFrames
         );
       });
-      if (lastElement && internalUrl) {
+      if (lastElement && shouldCollapse) {
         collapseElement = omittedFrames;
       } else {
         parentContainer.appendChild(omittedFrames);
@@ -197,14 +216,14 @@ function createFrame(
     omits.value = 0;
   }
 
-  const elem = frameDiv(document, functionName, url, internalUrl);
+  const elem = frameDiv(document, functionName, url, shouldCollapse);
   if (needsHidden) {
     applyStyles(elem, hiddenStyle);
     elem.setAttribute('name', 'bundle-' + omitBundle);
   }
 
   let hasSource = false;
-  if (!internalUrl) {
+  if (!shouldSkipCode) {
     if (
       compiled && scriptLines && scriptLines.length !== 0 && lineNumber != null
     ) {

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

@@ -5,7 +5,12 @@ 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,
+  lastFileName: ?string,
+  lastLineNumber: ?number,
+};
 type FrameSetting = { compiled: boolean };
 export type { OmitsObject, FrameSetting };
 
@@ -54,7 +59,7 @@ function createFrameWrapper(
       }
     });
     compiledDiv.appendChild(compiledText);
-    elemWrapper.appendChild(compiledDiv);
+    elem.appendChild(compiledDiv);
   }
 
   if (collapseElement != null) {
@@ -80,7 +85,12 @@ function createFrames(
 
   let index = 0;
   let critical = true;
-  const omits: OmitsObject = { value: 0, bundle: 1 };
+  const omits: OmitsObject = {
+    value: 0,
+    bundle: 1,
+    lastFileName: null,
+    lastLineNumber: null,
+  };
   resolvedFrames.forEach(function(frame) {
     const lIndex = index++;
     const elem = createFrameWrapper(