Modularize and extract crashOverlay to iframe (#1842)

* Modularize and extract crashOverlay to iframe

* Do not break words

* Disable warning overlay

* Use CJS imports

packages/react-dev-utils/crashOverlay.js

@@ -9,71 +9,214 @@
 
 'use strict';
 
-var codeFrame = require('babel-code-frame');
+function _interopDefault(ex) {
+  return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex;
+}
+
+var stackFrameParser = require('stack-frame-parser');
+var stackFrameMapper = require('stack-frame-mapper');
+var stackFrameUnmapper = require('stack-frame-unmapper');
+var codeFrame = _interopDefault(require('babel-code-frame'));
 var ansiHTML = require('./ansiHTML');
-var StackTraceResolve = require('stack-frame-resolver').default;
 
-var CONTEXT_SIZE = 3;
+var boundErrorHandler = null;
 
-var black = '#293238';
-var darkGray = '#878e91';
-var lightGray = '#fafafa';
-var red = '#ce1126';
-var lightRed = '#fccfcf';
-var yellow = '#fbf5b4';
+function errorHandler(callback, e) {
+  if (!e.error) {
+    return;
+  }
+  // $FlowFixMe
+  var error = e.error;
 
-function getHead() {
-  return document.head || document.getElementsByTagName('head')[0];
+  if (error instanceof Error) {
+    callback(error);
+  } else {
+    // A non-error was thrown, we don't have a trace. :(
+    // Look in your browser's devtools for more information
+    callback(new Error(error));
+  }
 }
 
-var injectedCss = [];
+function registerUnhandledError(target, callback) {
+  if (boundErrorHandler !== null) {
+    return;
+  }
+  boundErrorHandler = errorHandler.bind(undefined, callback);
+  target.addEventListener('error', boundErrorHandler);
+}
 
-// From: http://stackoverflow.com/a/524721/127629
-function injectCss(css) {
-  var head = getHead();
-  var style = document.createElement('style');
+function unregisterUnhandledError(target) {
+  if (boundErrorHandler === null) {
+    return;
+  }
+  target.removeEventListener('error', boundErrorHandler);
+  boundErrorHandler = null;
+}
 
-  style.type = 'text/css';
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
+var boundRejectionHandler = null;
+
+function rejectionHandler(callback, e) {
+  if (e == null || e.reason == null) {
+    return callback(new Error('Unknown'));
+  }
+  var reason = e.reason;
+
+  if (reason instanceof Error) {
+    return callback(reason);
+  }
+  // A non-error was rejected, we don't have a trace :(
+  // Look in your browser's devtools for more information
+  return callback(new Error(reason));
+}
+
+function registerUnhandledRejection(target, callback) {
+  if (boundRejectionHandler !== null) {
+    return;
+  }
+  boundRejectionHandler = rejectionHandler.bind(undefined, callback);
+  // $FlowFixMe
+  target.addEventListener('unhandledrejection', boundRejectionHandler);
+}
+
+function unregisterUnhandledRejection(target) {
+  if (boundRejectionHandler === null) {
+    return;
+  }
+  // $FlowFixMe
+  target.removeEventListener('unhandledrejection', boundRejectionHandler);
+  boundRejectionHandler = null;
+}
+
+var SHORTCUT_ESCAPE = 'SHORTCUT_ESCAPE';
+var SHORTCUT_LEFT = 'SHORTCUT_LEFT';
+var SHORTCUT_RIGHT = 'SHORTCUT_RIGHT';
+
+var boundKeyHandler = null;
+
+function keyHandler(callback, e) {
+  var key = e.key, keyCode = e.keyCode, which = e.which;
+
+  if (key === 'Escape' || keyCode === 27 || which === 27) {
+    callback(SHORTCUT_ESCAPE);
+  } else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) {
+    callback(SHORTCUT_LEFT);
+  } else if (key === 'ArrowRight' || keyCode === 39 || which === 39) {
+    callback(SHORTCUT_RIGHT);
+  }
+}
+
+function registerShortcuts(target, callback) {
+  if (boundKeyHandler !== null) {
+    return;
+  }
+  boundKeyHandler = keyHandler.bind(undefined, callback);
+  target.addEventListener('keydown', boundKeyHandler);
+}
+
+function unregisterShortcuts(target) {
+  if (boundKeyHandler === null) {
+    return;
+  }
+  target.removeEventListener('keydown', boundKeyHandler);
+  boundKeyHandler = null;
+}
+
+var stackTraceRegistered = false;
+// Default: https://docs.microsoft.com/en-us/scripting/javascript/reference/stacktracelimit-property-error-javascript
+var restoreStackTraceValue = 10;
+
+var MAX_STACK_LENGTH = 50;
+
+function registerStackTraceLimit() {
+  var limit = arguments.length > 0 && arguments[0] !== undefined
+    ? arguments[0]
+    : MAX_STACK_LENGTH;
+
+  if (stackTraceRegistered) {
+    return;
+  }
+  try {
+    restoreStackTraceValue = Error.stackTraceLimit;
+    Error.stackTraceLimit = limit;
+    stackTraceRegistered = true;
+  } catch (e) {
+    // Not all browsers support this so we don't care if it errors
+  }
+}
+
+function unregisterStackTraceLimit() {
+  if (!stackTraceRegistered) {
+    return;
+  }
+  try {
+    Error.stackTraceLimit = restoreStackTraceValue;
+    stackTraceRegistered = false;
+  } catch (e) {
+    // Not all browsers support this so we don't care if it errors
+  }
+}
+
+var recorded = [];
+
+var errorsConsumed = 0;
+
+function consume(error) {
+  var unhandledRejection = arguments.length > 1 && arguments[1] !== undefined
+    ? arguments[1]
+    : false;
+  var contextSize = arguments.length > 2 && arguments[2] !== undefined
+    ? arguments[2]
+    : 3;
+
+  var parsedFrames = stackFrameParser.parse(error);
+  var enhancedFramesPromise = void 0;
+  if (error.__unmap_source) {
+    enhancedFramesPromise = stackFrameUnmapper.unmap(
+      error.__unmap_source,
+      parsedFrames,
+      contextSize
+    );
   } else {
-    style.appendChild(document.createTextNode(css));
+    enhancedFramesPromise = stackFrameMapper.map(parsedFrames, contextSize);
   }
+  return enhancedFramesPromise.then(function(enhancedFrames) {
+    enhancedFrames = enhancedFrames.filter(function(_ref) {
+      var functionName = _ref.functionName;
+      return functionName == null ||
+        functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1;
+    });
+    recorded[++errorsConsumed] = {
+      error: error,
+      unhandledRejection: unhandledRejection,
+      contextSize: contextSize,
+      enhancedFrames: enhancedFrames,
+    };
+    return errorsConsumed;
+  });
+}
 
-  head.appendChild(style);
-  injectedCss.push(style);
+function getErrorRecord(ref) {
+  return recorded[ref];
 }
 
-var css = [
-  '.cra-container {',
-  '  padding-right: 15px;',
-  '  padding-left: 15px;',
-  '  margin-right: auto;',
-  '  margin-left: auto;',
-  '}',
-  '',
-  '@media (min-width: 768px) {',
-  '  .cra-container {',
-  '    width: calc(750px - 6em);',
-  '  }',
-  '}',
-  '',
-  '@media (min-width: 992px) {',
-  '  .cra-container {',
-  '    width: calc(970px - 6em);',
-  '  }',
-  '}',
-  '',
-  '@media (min-width: 1200px) {',
-  '  .cra-container {',
-  '    width: calc(1170px - 6em);',
-  '  }',
-  '}',
-].join('\n');
+function drain() {
+  // $FlowFixMe
+  var keys = Object.keys(recorded);
+  for (var index = 0; index < keys.length; ++index) {
+    delete recorded[keys[index]];
+  }
+}
 
-var overlayStyle = {
+var black = '#293238';
+var darkGray = '#878e91';
+var lightGray = '#fafafa';
+var red = '#ce1126';
+var lightRed = '#fccfcf';
+var yellow = '#fbf5b4';
+
+var iframeStyle = {
+  'background-color': lightGray,
   position: 'fixed',
-  'box-sizing': 'border-box',
   top: '1em',
   left: '1em',
   bottom: '1em',
@@ -81,16 +224,19 @@ var overlayStyle = {
   width: 'calc(100% - 2em)',
   height: 'calc(100% - 2em)',
   'border-radius': '3px',
-  'background-color': lightGray,
-  padding: '4rem',
+  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'z-index': 1337,
+};
+
+var overlayStyle = {
+  'box-sizing': 'border-box',
+  padding: '4rem',
   'font-family': 'Consolas, Menlo, monospace',
   color: black,
   'white-space': 'pre-wrap',
   overflow: 'auto',
   'overflow-x': 'hidden',
-  'word-break': 'break-all',
-  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
+  'word-break': 'break-word',
   'line-height': 1.5,
 };
 
@@ -220,153 +366,163 @@ var footerStyle = {
   color: darkGray,
 };
 
+var injectedCount = 0;
+var injectedCache = {};
+
+function getHead(document) {
+  return document.head || document.getElementsByTagName('head')[0];
+}
+
+function injectCss(document, css) {
+  var head = getHead(document);
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  style.appendChild(document.createTextNode(css));
+  head.appendChild(style);
+
+  injectedCache[++injectedCount] = style;
+  return injectedCount;
+}
+
 function applyStyles(element, styles) {
   element.setAttribute('style', '');
-  // Firefox can't handle const due to non-compliant implementation
-  // Revisit Jan 2016
-  // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
   for (var key in styles) {
-    if (!styles.hasOwnProperty(key)) continue;
-    var val = styles[key];
-    if (typeof val === 'function') val = val();
-    element.style[key] = val.toString();
+    if (!styles.hasOwnProperty(key)) {
+      continue;
+    }
+    // $FlowFixMe
+    element.style[key] = styles[key];
   }
 }
 
-var overlayReference = null;
-var additionalReference = null;
-var capturedErrors = [];
-var viewIndex = -1;
-var frameSettings = [];
+function createHint(document, hint) {
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(hint));
+  applyStyles(span, hintStyle);
+  return span;
+}
 
-function consumeEvent(e) {
-  e.preventDefault();
-  e.target.blur();
+function createClose(document, callback) {
+  var hints = document.createElement('div');
+  applyStyles(hints, hintsStyle);
+
+  var close = createHint(document, '×');
+  close.addEventListener('click', function() {
+    return callback();
+  });
+  applyStyles(close, closeButtonStyle);
+  hints.appendChild(close);
+  return hints;
 }
 
-function accessify(node) {
-  node.setAttribute('tabindex', 0);
+function enableTabClick(node) {
+  node.setAttribute('tabindex', '0');
   node.addEventListener('keydown', function(e) {
     var key = e.key, which = e.which, keyCode = e.keyCode;
+
     if (key === 'Enter' || which === 13 || keyCode === 13) {
       e.preventDefault();
-      e.target.click();
+      if (typeof e.target.click === 'function') {
+        e.target.click();
+      }
     }
   });
 }
 
-function renderAdditional() {
-  if (additionalReference.lastChild) {
-    additionalReference.removeChild(additionalReference.lastChild);
-  }
-
-  var text = ' ';
-  if (capturedErrors.length <= 1) {
-    additionalReference.appendChild(document.createTextNode(text));
-    return;
-  }
-  text = 'Errors ' + (viewIndex + 1) + ' of ' + capturedErrors.length;
-  var span = document.createElement('span');
-  span.appendChild(document.createTextNode(text));
-  var group = document.createElement('span');
-  applyStyles(group, groupStyle);
-  var left = document.createElement('button');
-  applyStyles(left, groupElemLeft);
-  left.addEventListener('click', function(e) {
-    consumeEvent(e);
-    switchError(-1);
-  });
-  left.appendChild(document.createTextNode('←'));
-  accessify(left);
-  var right = document.createElement('button');
-  applyStyles(right, groupElemRight);
-  right.addEventListener('click', function(e) {
-    consumeEvent(e);
-    switchError(1);
-  });
-  right.appendChild(document.createTextNode('→'));
-  accessify(right);
-  group.appendChild(left);
-  group.appendChild(right);
-  span.appendChild(group);
-  additionalReference.appendChild(span);
-}
-
 function removeNextBr(parent, component) {
   while (component != null && component.tagName.toLowerCase() !== 'br') {
-    component = component.nextSibling;
+    component = component.nextElementSibling;
   }
   if (component != null) {
     parent.removeChild(component);
   }
 }
 
-function absolutifyCode(component) {
+function absolutifyCaret(component) {
   var ccn = component.childNodes;
   for (var index = 0; index < ccn.length; ++index) {
     var c = ccn[index];
-    if (c.tagName.toLowerCase() !== 'span') continue;
-    var text = c.innerText.replace(/\s/g, '');
-    if (text !== '|^') continue;
+    // $FlowFixMe
+    if (c.tagName.toLowerCase() !== 'span') {
+      continue;
+    }
+    var _text = c.innerText;
+    if (_text == null) {
+      continue;
+    }
+    var text = _text.replace(/\s/g, '');
+    if (text !== '|^') {
+      continue;
+    }
+    // $FlowFixMe
     c.style.position = 'absolute';
+    // $FlowFixMe
     removeNextBr(component, c);
   }
 }
 
-function sourceCodePre(sourceLines, lineNum, columnNum) {
-  var main = arguments.length > 3 && arguments[3] !== undefined
-    ? arguments[3]
+function createCode(document, sourceLines, lineNum, columnNum, contextSize) {
+  var main = arguments.length > 5 && arguments[5] !== undefined
+    ? arguments[5]
     : false;
 
   var sourceCode = [];
   var whiteSpace = Infinity;
-  sourceLines.forEach(function(_ref2) {
-    var text = _ref2.text;
+  sourceLines.forEach(function(e) {
+    var text = e.content;
 
     var m = text.match(/^\s*/);
-    if (text === '') return;
+    if (text === '') {
+      return;
+    }
     if (m && m[0]) {
       whiteSpace = Math.min(whiteSpace, m[0].length);
     } else {
       whiteSpace = 0;
     }
   });
-  sourceLines.forEach(function(_ref3) {
-    var text = _ref3.text, line = _ref3.line;
+  sourceLines.forEach(function(e) {
+    var text = e.content;
+    var line = e.lineNumber;
 
-    if (isFinite(whiteSpace)) text = text.substring(whiteSpace);
+    if (isFinite(whiteSpace)) {
+      text = text.substring(whiteSpace);
+    }
     sourceCode[line - 1] = text;
   });
-  sourceCode = sourceCode.join('\n');
   var ansiHighlight = codeFrame(
-    sourceCode,
+    sourceCode.join('\n'),
     lineNum,
     columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
     {
       forceColor: true,
-      linesAbove: CONTEXT_SIZE,
-      linesBelow: CONTEXT_SIZE,
+      linesAbove: contextSize,
+      linesBelow: contextSize,
     }
   );
   var htmlHighlight = ansiHTML(ansiHighlight);
   var code = document.createElement('code');
   code.innerHTML = htmlHighlight;
-  absolutifyCode(code);
+  absolutifyCaret(code);
   applyStyles(code, codeStyle);
 
   var ccn = code.childNodes;
-  for (var index = 0; index < ccn.length; ++index) {
+  oLoop: for (var index = 0; index < ccn.length; ++index) {
     var node = ccn[index];
-    var breakOut = false;
     var ccn2 = node.childNodes;
     for (var index2 = 0; index2 < ccn2.length; ++index2) {
       var lineNode = ccn2[index2];
-      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) continue;
+      var text = lineNode.innerText;
+      if (text == null) {
+        continue;
+      }
+      if (text.indexOf(' ' + lineNum + ' |') === -1) {
+        continue;
+      }
+      // $FlowFixMe
       applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
-      breakOut = true;
+      break oLoop;
     }
-    if (breakOut) break;
   }
   var pre = document.createElement('pre');
   applyStyles(pre, preStyle);
@@ -374,66 +530,17 @@ function sourceCodePre(sourceLines, lineNum, columnNum) {
   return pre;
 }
 
-function createHint(hint) {
-  var span = document.createElement('span');
-  span.appendChild(document.createTextNode(hint));
-  applyStyles(span, hintStyle);
-  return span;
-}
-
-function hintsDiv() {
-  var hints = document.createElement('div');
-  applyStyles(hints, hintsStyle);
-
-  var close = createHint('×');
-  close.addEventListener('click', function() {
-    unmount();
-  });
-  applyStyles(close, closeButtonStyle);
-  hints.appendChild(close);
-  return hints;
-}
-
-function frameDiv(functionName, url, internalUrl) {
-  var frame = document.createElement('div');
-  var frameFunctionName = document.createElement('div');
-
-  var cleanedFunctionName = void 0;
-  if (!functionName || functionName === 'Object.<anonymous>') {
-    cleanedFunctionName = '(anonymous function)';
-  } else {
-    cleanedFunctionName = functionName;
-  }
-
-  var cleanedUrl = url.replace('webpack://', '.');
-
-  if (internalUrl) {
-    applyStyles(
-      frameFunctionName,
-      Object.assign({}, functionNameStyle, depStyle)
-    );
-  } else {
-    applyStyles(frameFunctionName, functionNameStyle);
-  }
-
-  frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName));
-  frame.appendChild(frameFunctionName);
-
-  var frameLink = document.createElement('div');
-  applyStyles(frameLink, linkStyle);
-  var frameAnchor = document.createElement('a');
-  applyStyles(frameAnchor, anchorStyle);
-  //frameAnchor.href = url
-  frameAnchor.appendChild(document.createTextNode(cleanedUrl));
-  frameLink.appendChild(frameAnchor);
-  frame.appendChild(frameLink);
-
-  return frame;
+function isInternalFile(url, sourceFileName) {
+  return url.indexOf('/~/') !== -1 ||
+    url.indexOf('/node_modules/') !== -1 ||
+    url.trim().indexOf(' ') !== -1 ||
+    sourceFileName == null ||
+    sourceFileName.length === 0;
 }
 
-function getGroupToggle(omitsCount, omitBundle) {
+function getGroupToggle(document, omitsCount, omitBundle) {
   var omittedFrames = document.createElement('div');
-  accessify(omittedFrames);
+  enableTabClick(omittedFrames);
   var text1 = document.createTextNode(
     '\u25B6 ' + omitsCount + ' stack frames were collapsed.'
   );
@@ -461,15 +568,23 @@ function getGroupToggle(omitsCount, omitBundle) {
   return omittedFrames;
 }
 
-function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
+function insertBeforeBundle(
+  document,
+  parent,
+  omitsCount,
+  omitBundle,
+  actionElement
+) {
   var children = document.getElementsByName('bundle-' + omitBundle);
-  if (children.length < 1) return;
+  if (children.length < 1) {
+    return;
+  }
   var first = children[0];
-  while (first.parentNode !== parent) {
+  while (first != null && first.parentNode !== parent) {
     first = first.parentNode;
   }
   var div = document.createElement('div');
-  accessify(div);
+  enableTabClick(div);
   div.setAttribute('name', 'bundle-' + omitBundle);
   var text = document.createTextNode(
     '\u25BC ' + omitsCount + ' stack frames were expanded.'
@@ -484,9 +599,48 @@ function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
   parent.insertBefore(div, first);
 }
 
-function traceFrame(
+function frameDiv(document, functionName, url, internalUrl) {
+  var frame = document.createElement('div');
+  var frameFunctionName = document.createElement('div');
+
+  var cleanedFunctionName = void 0;
+  if (!functionName || functionName === 'Object.<anonymous>') {
+    cleanedFunctionName = '(anonymous function)';
+  } else {
+    cleanedFunctionName = functionName;
+  }
+
+  var cleanedUrl = url.replace('webpack://', '.');
+
+  if (internalUrl) {
+    applyStyles(
+      frameFunctionName,
+      Object.assign({}, functionNameStyle, depStyle)
+    );
+  } else {
+    applyStyles(frameFunctionName, functionNameStyle);
+  }
+
+  frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName));
+  frame.appendChild(frameFunctionName);
+
+  var frameLink = document.createElement('div');
+  applyStyles(frameLink, linkStyle);
+  var frameAnchor = document.createElement('a');
+  applyStyles(frameAnchor, anchorStyle);
+  //frameAnchor.href = url
+  frameAnchor.appendChild(document.createTextNode(cleanedUrl));
+  frameLink.appendChild(frameAnchor);
+  frame.appendChild(frameLink);
+
+  return frame;
+}
+
+function createFrame(
+  document,
   frameSetting,
   frame,
+  contextSize,
   critical,
   omits,
   omitBundle,
@@ -498,19 +652,23 @@ function traceFrame(
     fileName = frame.fileName,
     lineNumber = frame.lineNumber,
     columnNumber = frame.columnNumber,
-    scriptLines = frame.scriptLines,
-    sourceFileName = frame.sourceFileName,
-    sourceLineNumber = frame.sourceLineNumber,
-    sourceColumnNumber = frame.sourceColumnNumber,
-    sourceLines = frame.sourceLines;
+    scriptLines = frame._scriptCode,
+    sourceFileName = frame._originalFileName,
+    sourceLineNumber = frame._originalLineNumber,
+    sourceColumnNumber = frame._originalColumnNumber,
+    sourceLines = frame._originalScriptCode;
 
   var url = void 0;
   if (!compiled && sourceFileName) {
     url = sourceFileName + ':' + sourceLineNumber;
-    if (sourceColumnNumber) url += ':' + sourceColumnNumber;
+    if (sourceColumnNumber) {
+      url += ':' + sourceColumnNumber;
+    }
   } else {
     url = fileName + ':' + lineNumber;
-    if (columnNumber) url += ':' + columnNumber;
+    if (columnNumber) {
+      url += ':' + columnNumber;
+    }
   }
 
   var needsHidden = false;
@@ -522,19 +680,17 @@ function traceFrame(
   var collapseElement = null;
   if (!internalUrl || lastElement) {
     if (omits.value > 0) {
-      var omittedFrames = getGroupToggle(omits.value, omitBundle);
-      setTimeout(
-        (function() {
-          insertBeforeBundle.apply(undefined, arguments);
-        }).bind(
-          undefined,
+      var capV = omits.value;
+      var omittedFrames = getGroupToggle(document, capV, omitBundle);
+      window.requestAnimationFrame(function() {
+        insertBeforeBundle(
+          document,
           parentContainer,
-          omits.value,
+          capV,
           omitBundle,
           omittedFrames
-        ),
-        1
-      );
+        );
+      });
       if (lastElement && internalUrl) {
         collapseElement = omittedFrames;
       } else {
@@ -545,7 +701,7 @@ function traceFrame(
     omits.value = 0;
   }
 
-  var elem = frameDiv(functionName, url, internalUrl);
+  var elem = frameDiv(document, functionName, url, internalUrl);
   if (needsHidden) {
     applyStyles(elem, hiddenStyle);
     elem.setAttribute('name', 'bundle-' + omitBundle);
@@ -555,15 +711,24 @@ function traceFrame(
   if (!internalUrl) {
     if (compiled && scriptLines.length !== 0) {
       elem.appendChild(
-        sourceCodePre(scriptLines, lineNumber, columnNumber, critical)
+        createCode(
+          document,
+          scriptLines,
+          lineNumber,
+          columnNumber,
+          contextSize,
+          critical
+        )
       );
       hasSource = true;
     } else if (!compiled && sourceLines.length !== 0) {
       elem.appendChild(
-        sourceCodePre(
+        createCode(
+          document,
           sourceLines,
           sourceLineNumber,
           sourceColumnNumber,
+          contextSize,
           critical
         )
       );
@@ -574,9 +739,18 @@ function traceFrame(
   return { elem: elem, hasSource: hasSource, collapseElement: collapseElement };
 }
 
-function lazyFrame(parent, factory, lIndex) {
+function createFrameWrapper(
+  document,
+  parent,
+  factory,
+  lIndex,
+  frameSettings,
+  contextSize
+) {
   var fac = factory();
-  if (fac == null) return;
+  if (fac == null) {
+    return;
+  }
   var hasSource = fac.hasSource,
     elem = fac.elem,
     collapseElement = fac.collapseElement;
@@ -585,27 +759,34 @@ function lazyFrame(parent, factory, lIndex) {
   elemWrapper.appendChild(elem);
 
   if (hasSource) {
-    (function() {
-      var compiledDiv = document.createElement('div');
-      accessify(compiledDiv);
-      applyStyles(compiledDiv, toggleStyle);
-
-      var o = frameSettings[lIndex];
-      var compiledText = document.createTextNode(
-        'View ' + (o && o.compiled ? 'source' : 'compiled')
-      );
-      compiledDiv.addEventListener('click', function() {
-        if (o) o.compiled = !o.compiled;
+    var compiledDiv = document.createElement('div');
+    enableTabClick(compiledDiv);
+    applyStyles(compiledDiv, toggleStyle);
 
-        var next = lazyFrame(parent, factory, lIndex);
-        if (next != null) {
-          parent.insertBefore(next, elemWrapper);
-          parent.removeChild(elemWrapper);
-        }
-      });
-      compiledDiv.appendChild(compiledText);
-      elemWrapper.appendChild(compiledDiv);
-    })();
+    var o = frameSettings[lIndex];
+    var compiledText = document.createTextNode(
+      'View ' + (o && o.compiled ? 'source' : 'compiled')
+    );
+    compiledDiv.addEventListener('click', function() {
+      if (o) {
+        o.compiled = !o.compiled;
+      }
+
+      var next = createFrameWrapper(
+        document,
+        parent,
+        factory,
+        lIndex,
+        frameSettings,
+        contextSize
+      );
+      if (next != null) {
+        parent.insertBefore(next, elemWrapper);
+        parent.removeChild(elemWrapper);
+      }
+    });
+    compiledDiv.appendChild(compiledText);
+    elemWrapper.appendChild(compiledDiv);
   }
 
   if (collapseElement != null) {
@@ -615,7 +796,12 @@ function lazyFrame(parent, factory, lIndex) {
   return elemWrapper;
 }
 
-function traceDiv(resolvedFrames) {
+function createFrames(document, resolvedFrames, frameSettings, contextSize) {
+  if (resolvedFrames.length !== frameSettings.length) {
+    throw new Error(
+      'You must give a frame settings array of identical length to resolved frames.'
+    );
+  }
   var trace = document.createElement('div');
   applyStyles(trace, traceStyle);
 
@@ -624,21 +810,28 @@ function traceDiv(resolvedFrames) {
   var omits = { value: 0, bundle: 1 };
   resolvedFrames.forEach(function(frame) {
     var lIndex = index++;
-    var elem = lazyFrame(
+    var elem = createFrameWrapper(
+      document,
       trace,
-      traceFrame.bind(
+      createFrame.bind(
         undefined,
+        document,
         frameSettings[lIndex],
         frame,
+        contextSize,
         critical,
         omits,
         omits.bundle,
         trace,
         index === resolvedFrames.length
       ),
-      lIndex
+      lIndex,
+      frameSettings,
+      contextSize
     );
-    if (elem == null) return;
+    if (elem == null) {
+      return;
+    }
     critical = false;
     trace.appendChild(elem);
   });
@@ -648,7 +841,7 @@ function traceDiv(resolvedFrames) {
   return trace;
 }
 
-function footer() {
+function createFooter(document) {
   var div = document.createElement('div');
   applyStyles(div, footerStyle);
   div.appendChild(
@@ -665,19 +858,74 @@ function footer() {
   return div;
 }
 
-function render(error, name, message, resolvedFrames) {
-  dispose();
+function consumeEvent(e) {
+  e.preventDefault();
+  if (typeof e.target.blur === 'function') {
+    e.target.blur();
+  }
+}
 
-  frameSettings = resolvedFrames.map(function() {
-    return { compiled: false };
-  });
+function updateAdditional(
+  document,
+  additionalReference,
+  currentError,
+  totalErrors,
+  switchCallback
+) {
+  if (additionalReference.lastChild) {
+    additionalReference.removeChild(additionalReference.lastChild);
+  }
 
-  injectCss(css);
+  var text = ' ';
+  if (totalErrors <= 1) {
+    additionalReference.appendChild(document.createTextNode(text));
+    return;
+  }
+  text = 'Errors ' + currentError + ' of ' + totalErrors;
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(text));
+  var group = document.createElement('span');
+  applyStyles(group, groupStyle);
+  var left = document.createElement('button');
+  applyStyles(left, groupElemLeft);
+  left.addEventListener('click', function(e) {
+    consumeEvent(e);
+    switchCallback(-1);
+  });
+  left.appendChild(document.createTextNode('←'));
+  enableTabClick(left);
+  var right = document.createElement('button');
+  applyStyles(right, groupElemRight);
+  right.addEventListener('click', function(e) {
+    consumeEvent(e);
+    switchCallback(1);
+  });
+  right.appendChild(document.createTextNode('→'));
+  enableTabClick(right);
+  group.appendChild(left);
+  group.appendChild(right);
+  span.appendChild(group);
+  additionalReference.appendChild(span);
+}
 
+function createOverlay(
+  document,
+  name,
+  message,
+  frames,
+  contextSize,
+  currentError,
+  totalErrors,
+  switchCallback,
+  closeCallback
+) {
+  var frameSettings = frames.map(function() {
+    return { compiled: false };
+  });
   // Create overlay
   var overlay = document.createElement('div');
   applyStyles(overlay, overlayStyle);
-  overlay.appendChild(hintsDiv());
+  overlay.appendChild(createClose(document, closeCallback));
 
   // Create container
   var container = document.createElement('div');
@@ -685,10 +933,16 @@ function render(error, name, message, resolvedFrames) {
   overlay.appendChild(container);
 
   // Create additional
-  additionalReference = document.createElement('div');
-  applyStyles(additionalReference, additionalStyle);
-  container.appendChild(additionalReference);
-  renderAdditional();
+  var additional = document.createElement('div');
+  applyStyles(additional, additionalStyle);
+  container.appendChild(additional);
+  updateAdditional(
+    document,
+    additional,
+    currentError,
+    totalErrors,
+    switchCallback
+  );
 
   // Create header
   var header = document.createElement('div');
@@ -701,235 +955,216 @@ function render(error, name, message, resolvedFrames) {
   container.appendChild(header);
 
   // Create trace
-  container.appendChild(traceDiv(resolvedFrames));
+  container.appendChild(
+    createFrames(document, frames, frameSettings, contextSize)
+  );
 
   // Show message
-  container.appendChild(footer());
+  container.appendChild(createFooter(document));
 
-  // Mount
-  document.body.appendChild((overlayReference = overlay));
+  return {
+    overlay: overlay,
+    additional: additional,
+  };
 }
 
-function dispose() {
-  if (overlayReference === null) return;
-  document.body.removeChild(overlayReference);
-  overlayReference = null;
-  var head = getHead();
-  injectedCss.forEach(function(node) {
-    head.removeChild(node);
-  });
-  injectedCss = [];
-}
+var CONTEXT_SIZE = 3;
+var iframeReference = null;
+var additionalReference = null;
+var errorReferences = [];
+var currReferenceIndex = -1;
 
-function unmount() {
-  dispose();
-  capturedErrors = [];
-  viewIndex = -1;
-}
+var css = [
+  '.cra-container {',
+  '  padding-right: 15px;',
+  '  padding-left: 15px;',
+  '  margin-right: auto;',
+  '  margin-left: auto;',
+  '}',
+  '',
+  '@media (min-width: 768px) {',
+  '  .cra-container {',
+  '    width: calc(750px - 6em);',
+  '  }',
+  '}',
+  '',
+  '@media (min-width: 992px) {',
+  '  .cra-container {',
+  '    width: calc(970px - 6em);',
+  '  }',
+  '}',
+  '',
+  '@media (min-width: 1200px) {',
+  '  .cra-container {',
+  '    width: calc(1170px - 6em);',
+  '  }',
+  '}',
+].join('\n');
 
-function isInternalFile(url, sourceFileName) {
-  return url.indexOf('/~/') !== -1 ||
-    url.trim().indexOf(' ') !== -1 ||
-    !sourceFileName;
+function render(name, message, resolvedFrames) {
+  disposeCurrentView();
+
+  var iframe = window.document.createElement('iframe');
+  applyStyles(iframe, iframeStyle);
+  iframeReference = iframe;
+  iframe.onload = function() {
+    if (iframeReference == null) {
+      return;
+    }
+    var w = iframeReference.contentWindow;
+    var document = iframeReference.contentDocument;
+
+    var _createOverlay = createOverlay(
+      document,
+      name,
+      message,
+      resolvedFrames,
+      CONTEXT_SIZE,
+      currReferenceIndex + 1,
+      errorReferences.length,
+      function(offset) {
+        switchError(offset);
+      },
+      function() {
+        unmount();
+      }
+    ),
+      overlay = _createOverlay.overlay,
+      additional = _createOverlay.additional;
+
+    if (w != null) {
+      w.onkeydown = function(event) {
+        keyHandler(
+          function(type) {
+            return shortcutHandler(type);
+          },
+          event
+        );
+      };
+    }
+    injectCss(iframeReference.contentDocument, css);
+    if (document.body != null) {
+      document.body.appendChild(overlay);
+    }
+    additionalReference = additional;
+  };
+  window.document.body.appendChild(iframe);
 }
 
-function renderError(index) {
-  viewIndex = index;
-  var _capturedErrors$index = capturedErrors[index],
-    error = _capturedErrors$index.error,
-    unhandledRejection = _capturedErrors$index.unhandledRejection,
-    resolvedFrames = _capturedErrors$index.resolvedFrames;
+function renderErrorByIndex(index) {
+  currReferenceIndex = index;
+
+  var _getErrorRecord = getErrorRecord(errorReferences[index]),
+    error = _getErrorRecord.error,
+    unhandledRejection = _getErrorRecord.unhandledRejection,
+    enhancedFrames = _getErrorRecord.enhancedFrames;
 
   if (unhandledRejection) {
     render(
-      error,
       'Unhandled Rejection (' + error.name + ')',
       error.message,
-      resolvedFrames
+      enhancedFrames
     );
   } else {
-    render(error, error.name, error.message, resolvedFrames);
+    render(error.name, error.message, enhancedFrames);
+  }
+}
+
+function switchError(offset) {
+  var nextView = currReferenceIndex + offset;
+  if (nextView < 0 || nextView >= errorReferences.length) {
+    return;
+  }
+  renderErrorByIndex(nextView);
+}
+
+function disposeCurrentView() {
+  if (iframeReference === null) {
+    return;
   }
+  window.document.body.removeChild(iframeReference);
+  iframeReference = null;
+  additionalReference = null;
+}
+
+function unmount() {
+  disposeCurrentView();
+  drain();
+  errorReferences = [];
+  currReferenceIndex = -1;
 }
 
 function crash(error) {
   var unhandledRejection = arguments.length > 1 && arguments[1] !== undefined
     ? arguments[1]
     : false;
-  var sourceOverrides = arguments.length > 2 && arguments[2] !== undefined
-    ? arguments[2]
-    : [];
 
-  if (module.hot) module.hot.decline();
-
-  StackTraceResolve(error, CONTEXT_SIZE)
-    .then(function(resolvedFrames) {
-      resolvedFrames = resolvedFrames.filter(function(_ref) {
-        var functionName = _ref.functionName;
-        return functionName.indexOf('__cra_proxy_console__') === -1;
-      });
-      var overrideCount = sourceOverrides.length,
-        frameCount = resolvedFrames.length;
-      var frameIndex = 0;
-      for (
-        var overrideIndex = 0;
-        overrideIndex < overrideCount;
-        ++overrideIndex
-      ) {
-        var tag = sourceOverrides[overrideIndex];
-        var shouldContinue = false;
-        for (; frameIndex < frameCount; ++frameIndex) {
-          var sourceFileName = resolvedFrames[frameIndex].sourceFileName;
-
-          if (sourceFileName == null) continue;
-          if (sourceFileName.indexOf('/' + tag.file) !== -1) {
-            var prevLineNumber = resolvedFrames[frameIndex].sourceLineNumber;
-            if (Math.abs(prevLineNumber - tag.lineNum) < CONTEXT_SIZE) {
-              resolvedFrames[frameIndex].sourceLineNumber = tag.lineNum;
-            }
-            shouldContinue = true;
-            break;
+  if (module.hot && typeof module.hot.decline === 'function') {
+    module.hot.decline();
+  }
+  consume(error, unhandledRejection, CONTEXT_SIZE)
+    .then(function(ref) {
+      errorReferences.push(ref);
+      if (iframeReference !== null && additionalReference !== null) {
+        updateAdditional(
+          iframeReference.contentDocument,
+          additionalReference,
+          currReferenceIndex + 1,
+          errorReferences.length,
+          function(offset) {
+            switchError(offset);
           }
+        );
+      } else {
+        if (errorReferences.length !== 1) {
+          throw new Error('Something is *really* wrong.');
         }
-        if (shouldContinue) continue;
-        break;
-      }
-      capturedErrors.push({
-        error: error,
-        unhandledRejection: unhandledRejection,
-        resolvedFrames: resolvedFrames,
-      });
-      if (overlayReference !== null)
-        renderAdditional();
-      else {
-        renderError((viewIndex = 0));
+        renderErrorByIndex((currReferenceIndex = 0));
       }
     })
     .catch(function(e) {
-      // This is another fail case (unlikely to happen)
-      // e.g. render(...) throws an error with provided arguments
-      console.log('Red box renderer error:', e);
-      unmount();
-      render(
-        null,
-        'Error',
-        'There is an error with red box. *Please* report this (see console).',
-        []
-      );
+      console.log('Could not consume error:', e);
     });
 }
 
-function switchError(offset) {
-  try {
-    var nextView = viewIndex + offset;
-    if (nextView < 0 || nextView >= capturedErrors.length) return;
-    renderError(nextView);
-  } catch (e) {
-    console.log('Red box renderer error:', e);
-    unmount();
-    render(
-      null,
-      'Error',
-      'There is an error with red box. *Please* report this (see console).',
-      []
-    );
-  }
-}
-
-window.onerror = function(messageOrEvent, source, lineno, colno, error) {
-  if (
-    error == null ||
-    !(error instanceof Error) ||
-    messageOrEvent.indexOf('Script error') !== -1
-  ) {
-    crash(new Error(error || messageOrEvent)); // TODO: more helpful message
-  } else {
-    crash(error);
-  }
-};
-
-var promiseHandler = function promiseHandler(event) {
-  if (event != null && event.reason != null) {
-    var reason = event.reason;
-
-    if (reason == null || !(reason instanceof Error)) {
-      crash(new Error(reason), true);
-    } else {
-      crash(reason, true);
+function shortcutHandler(type) {
+  switch (type) {
+    case SHORTCUT_ESCAPE: {
+      unmount();
+      break;
+    }
+    case SHORTCUT_LEFT: {
+      switchError(-1);
+      break;
+    }
+    case SHORTCUT_RIGHT: {
+      switchError(1);
+      break;
     }
-  } else {
-    crash(new Error('Unknown event'), true);
   }
-};
-
-window.addEventListener('unhandledrejection', promiseHandler);
-
-var escapeHandler = function escapeHandler(event) {
-  var key = event.key, keyCode = event.keyCode, which = event.which;
-
-  if (key === 'Escape' || keyCode === 27 || which === 27) unmount();
-  else if (key === 'ArrowLeft' || keyCode === 37 || which === 37)
-    switchError(-1);
-  else if (key === 'ArrowRight' || keyCode === 39 || which === 39)
-    switchError(1);
-};
+}
 
-window.addEventListener('keydown', escapeHandler);
-
-try {
-  Error.stackTraceLimit = 50;
-} catch (e) {
-  // Browser may not support this, we don't care.
-}
-
-// eslint-disable-next-line
-var proxyConsole = function proxyConsole(type) {
-  var orig = console[type];
-  console[type] = function __cra_proxy_console__() {
-    var warning = [].slice.call(arguments).join(' ');
-    var nIndex = warning.indexOf('\n');
-    var message = warning;
-    if (nIndex !== -1) message = message.substring(0, nIndex);
-    var stack = warning
-      .substring(nIndex + 1)
-      .split('\n')
-      .filter(function(line) {
-        return line.indexOf('(at ') !== -1;
-      })
-      .map(function(line) {
-        var prefix = '(at ';
-        var suffix = ')';
-        line = line.substring(line.indexOf(prefix) + prefix.length);
-        line = line.substring(0, line.indexOf(suffix));
-        var parts = line.split(/[:]/g);
-        if (parts.length !== 2) return null;
-        var file = parts[0];
-        var lineNum = Number(parts[1]);
-        if (isNaN(lineNum)) return null;
-        return { file: file, lineNum: lineNum };
-      })
-      .filter(function(obj) {
-        return obj !== null;
-      });
-    var error = void 0;
-    try {
-      throw new Error(message);
-    } catch (e) {
-      error = e;
-    }
-    setTimeout(function() {
-      return crash(error, false, stack);
-    });
-    return orig.apply(this, arguments);
-  };
-};
+function inject() {
+  registerUnhandledError(window, function(error) {
+    return crash(error);
+  });
+  registerUnhandledRejection(window, function(error) {
+    return crash(error, true);
+  });
+  registerShortcuts(window, shortcutHandler);
+  registerStackTraceLimit();
+}
 
-// proxyConsole('error');
+function uninject() {
+  unregisterStackTraceLimit();
+  unregisterShortcuts(window);
+  unregisterUnhandledRejection(window);
+  unregisterUnhandledError(window);
+}
 
-if (module.hot) {
+inject();
+if (module.hot && typeof module.hot.dispose === 'function') {
   module.hot.dispose(function() {
-    unmount();
-    window.removeEventListener('unhandledrejection', promiseHandler);
-    window.removeEventListener('keydown', escapeHandler);
+    uninject();
   });
 }

packages/react-dev-utils/package.json

@@ -36,7 +36,9 @@
     "opn": "4.0.2",
     "recursive-readdir": "2.1.1",
     "sockjs-client": "1.1.2",
-    "stack-frame-resolver": "0.1.3",
+    "stack-frame-mapper": "0.4.0",
+    "stack-frame-parser": "0.4.0",
+    "stack-frame-unmapper": "0.4.0",
     "strip-ansi": "3.0.1"
   }
 }