diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js index db9812cc30c..8cdfa5a7c9a 100644 --- a/packages/react-error-overlay/src/components/frame.js +++ b/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 ) { diff --git a/packages/react-error-overlay/src/components/frames.js b/packages/react-error-overlay/src/components/frames.js index ba3b7effdf8..7e7089cfa50 100644 --- a/packages/react-error-overlay/src/components/frames.js +++ b/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(