• Joe Haddad's avatar
    Add runtime error overlay (#1101) · ed5c016d
    Joe Haddad authored
    * Add red box prototype
    
    * Unmount fail node when hot-reloaded (future proofing)
    
    * Slightly improve error reason
    
    * Add Chrome unhandledrejection listener
    
    * Close red box when Escape is pressed
    
    * Construct our own source if not available
    
    * Resolve sourcemaps for friendlier traces
    
    * Allow error to be scrolled
    
    * Only utilize sourcemaps, not the magic. :(
    
    * Make view similar to React Native
    
    * Fix an uncaught syntax error
    
    * Add workaround for Firefox 50
    
    * Add a hint for closing the prompt
    
    * Multiple error support
    When there's multiple errors, simply state that there are more instead of re-rendering
    
    * Log any renderer error
    
    * Dim node_modules in display
    
    * Override chrome stack trace limit
    
    * Magic: show me some source!
    
    * Add ability to toggle internal calls
    
    * Switch text from show -> hide
    
    * Change color scheme to something easier on the eyes
    
    * Change UI to be friendlier (thanks @nicinabox)
    https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263621057
    https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263636171
    
    * Update styles
    
    * Add container inside overlay
    
    * Apply pre style
    
    * Add line highlight
    
    * Add omitted frames ui
    
    * Move yellow to var
    
    * Do all function names in black
    
    * Adapt container based on screen size
    
    * Extract ansiHTML
    
    Use base16-github theme
    
    * Linting
    
    * Add syntax highlighting of errors
    
    * Linting
    
    * Remove white background
    
    * Append new files to package.json
    
    * Target exact version
    
    * White is a little harsh, use same color as red box.
    
    * Fix a bug where omitted frames would never be rendered
    (under certain circumstances)
    
    * Show local file path instead of confusing webpack://
    
    * Do not require the entire file
    
    * Remove css file
    
    * Use context size, not a magic variable.
    
    * Fix title regression
    
    * Update dependency
    
    * Do not center text for internal calls
    
    * Temporarily disable links
    
    * Switch internal toggle to 'i'
    
    * Remove unnecessary rules from container style
    
    * Reduce omitted frames font size
    
    * Fix font family in pre > code
    
    * Re-introduce line highlighting
    
    * Object.<anonymous> -> (anonymous function)
    
    * Add ability to see script source
    
    * Add missing ansi mappings
    
    * Remove SIAF
    
    * Skip native functions
    
    * Extract hints div function
    
    * Extract renderers
    
    * Refacor var names
    
    * If source is disabled, don't use the line.
    
    * Allow toggle between source
    
    * Allow bundles to be expanded
    
    * Wow, how did I let this one slip?
    
    * Toggle text for UX/DX
    
    * Make it so clicking Close unmounts the error component
    
    * Do not allow hot reloading once an error is thrown
    
    * Do not wrap lines for small displays
    
    * Fix toggle when additional errors happen
    
    * Make the close a button
    
    * Capture and store errors
    
    * Dispose on render; move additional logic
    
    * Only make code not wrap
    
    * Switch to a view-by-index method
    
    * Allow user to switch between errors with arrow keys
    
    * Fix text while switching between errors
    
    * Update close button style
    
    * Render additional errors at top
    
    * Add left and right arrows
    
    * Make frames pointy
    
    * UTF-8 arrows
    
    * Don't mount unneeded DOM node
    
    * Switch to single changing text for compiled <-> source
    
    * Don't display arrows with only one error.
    
    * Collapsed and expanded
    
    * Make sure the last collapse toggle is appended
    
    * Do not show the stack trace if it doesn't resolve to a file we wrote
    
    * Style container with media queries
    
    * Do not allow x overflow; break words by default.
    
    * Trim off whitespace of lines
    
    * Remove padding since it's not outer-most
    
    * Add footer message
    
    * Extract css file to JS
    
    * Only inject the css when the overlay is up
    
    * Extract red variable
    
    * Remove env
    
    * Update babel-code-frame
    
    * Set force color to true
    
    * Extract out collapse div logic
    
    * Remove arrow field
    
    * Insert a top collapse
    
    * Make browser friendlier
    
    * Absolutify ^
    
    * Make arrows buttons
    
    * Accessify
    
    * Let there be ES5
    
    * Pretty css
    
    * Use forEach where we can ...
    
    * Remove extracted loop
    
    * Fix IE compatibility
    
    * Capture React warnings
    
    * Add source override via React output parsing
    
    * Whoops, fix arguments to crash.
    
    * es5-ify
    
    * Re-enable e2e-install directory test
    
    * Only rewrite line number if it was resolved and leaves a line at bottom
    
    * Rename failFast to crashOverlay
    
    * Disable console proxy
    
    * Appease linter
    
    * Appease more
    ed5c016d
eslintFormatter.js 1.41 KiB
'use strict';
const chalk = require('chalk');
const table = require('text-table');
function isError(message) {
  if (message.fatal || message.severity === 2) {
    return true;
  return false;
function formatter(results) {
  let output = '\n';
  results.forEach(result => {
    let messages = result.messages;
    if (messages.length === 0) {
      return;
    let hasErrors = false;
    messages = messages.map(message => {
      let messageType;
      if (isError(message)) {
        messageType = 'error';
        hasErrors = true;
      } else {
        messageType = 'warn';
      let line = message.line || 0;
      let column = message.column || 0;
      let position = chalk.dim(`${line}:${column}`);
      return [
        '',
        position,
        messageType,
        message.message.replace(/\.$/, ''),
        chalk.cyan(message.ruleId || ''),
    });
    // if there are error messages, we want to show only errors
    if (hasErrors) {
      messages = messages.filter(m => m[2] === 'error');
    // add color to messageTypes
    messages.forEach(m => {
      m[2] = m[2] === 'error' ? chalk.red(m[2]) : chalk.yellow(m[2]);
    });
    let outputTable = table(messages, {
      align: ['l', 'l', 'l'],
      stringLength(str) {
        return chalk.stripColor(str).length;
    });
    output += `${outputTable}\n\n`;
  });
  return output;
module.exports = formatter;