Skip to content

Commit ed5c016

Browse files
authored
Add runtime error overlay (#1101)
* 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) #1101 (comment) #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
1 parent 24f38f8 commit ed5c016

File tree

5 files changed

+946
-22
lines changed

5 files changed

+946
-22
lines changed

packages/react-dev-utils/ansiHTML.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
'use strict';
11+
12+
var Anser = require('anser');
13+
14+
// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
15+
// var base00 = 'ffffff'; // Default Background
16+
var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
17+
// var base02 = 'c8c8fa'; // Selection Background
18+
var base03 = '969896'; // Comments, Invisibles, Line Highlighting
19+
// var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
20+
var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
21+
// var base06 = 'ffffff'; // Light Foreground (Not often used)
22+
// var base07 = 'ffffff'; // Light Background (Not often used)
23+
var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
24+
// var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
25+
// var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
26+
var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted
27+
var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes
28+
// var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
29+
var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
30+
// var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
31+
32+
// Map ANSI colors from what babel-code-frame uses to base16-github
33+
// See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
34+
var colors = {
35+
reset: [base05, 'transparent'],
36+
black: base05,
37+
red: base08, /* marker, bg-invalid */
38+
green: base0B, /* string */
39+
yellow: base08, /* capitalized, jsx_tag, punctuator */
40+
blue: base0C,
41+
magenta: base0C, /* regex */
42+
cyan: base0E, /* keyword */
43+
gray: base03, /* comment, gutter */
44+
lightgrey: base01,
45+
darkgrey: base03
46+
};
47+
48+
var anserMap = {
49+
'ansi-bright-black': 'black',
50+
'ansi-bright-yellow': 'yellow',
51+
'ansi-yellow': 'yellow',
52+
'ansi-bright-green': 'green',
53+
'ansi-green': 'green',
54+
'ansi-bright-cyan': 'cyan',
55+
'ansi-cyan': 'cyan',
56+
'ansi-bright-red': 'red',
57+
'ansi-red': 'red',
58+
'ansi-bright-magenta': 'magenta',
59+
'ansi-magenta': 'magenta'
60+
};
61+
62+
function ansiHTML(txt) {
63+
var arr = new Anser().ansiToJson(txt, {
64+
use_classes: true
65+
});
66+
67+
var result = '';
68+
var open = false;
69+
for (var index = 0; index < arr.length; ++index) {
70+
var c = arr[index];
71+
var content = c.content,
72+
fg = c.fg;
73+
74+
var contentParts = content.split('\n');
75+
for (var _index = 0; _index < contentParts.length; ++_index) {
76+
if (!open) {
77+
result += '<span data-ansi-line="true">';
78+
open = true;
79+
}
80+
var part = contentParts[_index].replace('\r', '');
81+
var color = colors[anserMap[fg]];
82+
if (color != null) {
83+
result += '<span style="color: #' + color + ';">' + part + '</span>';
84+
} else {
85+
if (fg != null) console.log('Missing color mapping: ', fg);
86+
result += '<span>' + part + '</span>';
87+
}
88+
if (_index < contentParts.length - 1) {
89+
result += '</span>';
90+
open = false;
91+
result += '<br/>';
92+
}
93+
}
94+
}
95+
if (open) {
96+
result += '</span>';
97+
open = false;
98+
}
99+
return result;
100+
}
101+
102+
module.exports = ansiHTML;

0 commit comments

Comments
 (0)