Add runtime error overlay (facebook#1101)

Timer · web-flow · commit 558bf207ff09 · 2017-03-06T21:59:57.000-05:00
* 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) facebook#1101 (comment) facebook#1101 (comment) * 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
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -58,6 +58,8 @@ module.exports = {
     require.resolve('react-dev-utils/webpackHotDevClient'),
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
+    // Errors should be considered fatal in development
+    require.resolve('react-dev-utils/crashOverlay'),
     // Finally, this is your app's code:
     paths.appIndexJs
     // We include the app code last so that if there is a runtime error during
