Add runtime error overlay #1101

Merged
merged 124 commits into from Mar 7, 2017

Conversation

Projects
None yet
@Timer
Collaborator

Timer commented Nov 26, 2016

If you would like to help, please see #1129.


This PR is a prototype implementation for #783 which hopefully gets the ball rolling.

This is by no means a complete or even polished proposal, but simply a WIP to track the ongoing discussion in #783 as it unfolds.
There is much to be done for DX and message clarity when the Error object is unavailable or unparsable.

Errors

Errors are captured using window.onerror.
window.onerror provides the Error object in most all modern browsers: Chrome 46(?), Firefox 31, IE 11, and Safari 10(ref). Notably, support is missing from Microsoft Edge (unverified, see here -- can someone test this please?).

Unhandled Rejections

Unfortunately, there seems to be no standard/proper way to capture unhandled rejection -- Chrome seems to be the only browser doing this, exposed via the unhandledrejection event.
Does anyone have any ideas on how to accomplish this / should it be a Chrome only feature?


@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 27, 2016

Member

Neat, going to give this a try next week!

Member

gaearon commented Nov 27, 2016

Neat, going to give this a try next week!

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 27, 2016

Collaborator

Great @gaearon! Here's a little animation in the meantime.
http://g.recordit.co/604Ch1kQ87.gif

I know the stack trace pointing to bundle.js is suboptimal, so hopefully someone who looks this way can provide some help/suggestions in that respect! done (see below)

Collaborator

Timer commented Nov 27, 2016

Great @gaearon! Here's a little animation in the meantime.
http://g.recordit.co/604Ch1kQ87.gif

I know the stack trace pointing to bundle.js is suboptimal, so hopefully someone who looks this way can provide some help/suggestions in that respect! done (see below)

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 27, 2016

Collaborator

Update (57fa69d)! 🎉

After a little research I found that the folks over at @stacktracejs actually make some really cool stuff. They have a package (stacktrace-gps) which actually resolves stacks via sourcemaps (and other cool magic).

The result is friendlier stacktraces, which means spending less time debugging / looking in the console! 😄

Additionally, the view now looks more like React Native (c12c55b).
https://puu.sh/swopo/06c2a3a357.png

Collaborator

Timer commented Nov 27, 2016

Update (57fa69d)! 🎉

After a little research I found that the folks over at @stacktracejs actually make some really cool stuff. They have a package (stacktrace-gps) which actually resolves stacks via sourcemaps (and other cool magic).

The result is friendlier stacktraces, which means spending less time debugging / looking in the console! 😄

Additionally, the view now looks more like React Native (c12c55b).
https://puu.sh/swopo/06c2a3a357.png

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 27, 2016

Collaborator

Does anyone have an opinion on a lingering artifact after dismissing the error prompt (via escape)?
This would make it clear to the developer that (s)he is still interacting with a potentially corrupt/broken application.

I was thinking something like a semi-transparent warning bar at the bottom of the screen, dismissable with a long esc press/second press/etc.

Collaborator

Timer commented Nov 27, 2016

Does anyone have an opinion on a lingering artifact after dismissing the error prompt (via escape)?
This would make it clear to the developer that (s)he is still interacting with a potentially corrupt/broken application.

I was thinking something like a semi-transparent warning bar at the bottom of the screen, dismissable with a long esc press/second press/etc.

Multiple error support
When there's multiple errors, simply state that there are more instead of re-rendering
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

This would make it clear to the developer that (s)he is still interacting with a potentially corrupt/broken application.

I don’t think it would be worth it to be honest. Since this feature is pretty obtrusive I think we don’t need to make it more obtrusive.

Member

gaearon commented Nov 28, 2016

This would make it clear to the developer that (s)he is still interacting with a potentially corrupt/broken application.

I don’t think it would be worth it to be honest. Since this feature is pretty obtrusive I think we don’t need to make it more obtrusive.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

What do you think about dimming out stack trace entries inside node_modules?
We want to focus attention on the entries in the trace inside src.

Another question: can we get a full stack trace? I only see a part of it:

screen shot 2016-11-28 at 15 09 19

Member

gaearon commented Nov 28, 2016

What do you think about dimming out stack trace entries inside node_modules?
We want to focus attention on the entries in the trace inside src.

Another question: can we get a full stack trace? I only see a part of it:

screen shot 2016-11-28 at 15 09 19

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

Also... is there any way we could show the source code around the line that failed?
Not holding my hopes high but.

Member

gaearon commented Nov 28, 2016

Also... is there any way we could show the source code around the line that failed?
Not holding my hopes high but.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

I don’t think it would be worth it to be honest. Since this feature is pretty obtrusive I think we don’t need to make it more obtrusive.

Fair enough, I was just toying with the idea.

What do you think about dimming out stack trace entries inside node_modules?
We want to focus attention on the entries in the trace inside src.

I say that's a reasonable request; I'll fiddle with it and see what looks best.

Another question: can we get a full stack trace? I only see a part of it

I'm not sure if we can accomplish this one ... the Error object provided from window.onerror is implemented differently across browsers.

For Chrome, it seems they cut down the stack trace -- if you try this in another browser, say Safari, we receive the full stack trace.
We could file a bug/request with the chrome team and ask if they can provide the full stack, I'm not sure how long it'd take for something like that to go through though (or if they'd do it).

Also... is there any way we could show the source code around the line that failed?
Not holding my hopes high but.

Standby ... I'll look at it after work today.

Collaborator

Timer commented Nov 28, 2016

I don’t think it would be worth it to be honest. Since this feature is pretty obtrusive I think we don’t need to make it more obtrusive.

Fair enough, I was just toying with the idea.

What do you think about dimming out stack trace entries inside node_modules?
We want to focus attention on the entries in the trace inside src.

I say that's a reasonable request; I'll fiddle with it and see what looks best.

Another question: can we get a full stack trace? I only see a part of it

I'm not sure if we can accomplish this one ... the Error object provided from window.onerror is implemented differently across browsers.

For Chrome, it seems they cut down the stack trace -- if you try this in another browser, say Safari, we receive the full stack trace.
We could file a bug/request with the chrome team and ask if they can provide the full stack, I'm not sure how long it'd take for something like that to go through though (or if they'd do it).

Also... is there any way we could show the source code around the line that failed?
Not holding my hopes high but.

Standby ... I'll look at it after work today.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

We could file a bug/request with the chrome team and ask if they can provide the full stack, I'm not sure how long it'd take for something like that to go through though (or if they'd do it).

Could you do that please? We filed bugs before and the team has been responsive once some people get pinged. :-)

Member

gaearon commented Nov 28, 2016

We could file a bug/request with the chrome team and ask if they can provide the full stack, I'm not sure how long it'd take for something like that to go through though (or if they'd do it).

Could you do that please? We filed bugs before and the team has been responsive once some people get pinged. :-)

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

Could you do that please? We filed bugs before and the team has been responsive once some people get pinged. :-)

Not sure if this was the right place, but the ball is in motion (hopefully)!
https://bugs.chromium.org/p/chromium/issues/detail?id=669085

Collaborator

Timer commented Nov 28, 2016

Could you do that please? We filed bugs before and the team has been responsive once some people get pinged. :-)

Not sure if this was the right place, but the ball is in motion (hopefully)!
https://bugs.chromium.org/p/chromium/issues/detail?id=669085

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

I think showing the source code is pretty essential to sell people on this feature. Otherwise it doesn't add much benefit for people used to looking at the console, and they might get annoyed.

I think it’s important enough that it’d be worth to write a tiny middleware for the webpack dev server that sends the relevant source if we can’t extract it.

Member

gaearon commented Nov 28, 2016

I think showing the source code is pretty essential to sell people on this feature. Otherwise it doesn't add much benefit for people used to looking at the console, and they might get annoyed.

I think it’s important enough that it’d be worth to write a tiny middleware for the webpack dev server that sends the relevant source if we can’t extract it.

@artyomtrityak

This comment has been minimized.

Show comment
Hide comment
@artyomtrityak

artyomtrityak Nov 28, 2016

Errors are something you face really often during development, i don't think it will be good for my mental health to see red screen every time i make mistake. I've tried and wanted throw away my laptop and get some coffee once i saw this.

P.S. React team did great job for printing errors in console, this is enough for me.

artyomtrityak commented Nov 28, 2016

Errors are something you face really often during development, i don't think it will be good for my mental health to see red screen every time i make mistake. I've tried and wanted throw away my laptop and get some coffee once i saw this.

P.S. React team did great job for printing errors in console, this is enough for me.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

I think showing the source code is pretty essential to sell people on this feature. Otherwise it doesn't add much benefit for people used to looking at the console, and they might get annoyed.

I think it’s important enough that it’d be worth to write a tiny middleware for the webpack dev server that sends the relevant source if we can’t extract it.

Would you like to see the transpiled (bundle.js) source or the original? The latter is most likely more difficult, though we can look into it.

Collaborator

Timer commented Nov 28, 2016

I think showing the source code is pretty essential to sell people on this feature. Otherwise it doesn't add much benefit for people used to looking at the console, and they might get annoyed.

I think it’s important enough that it’d be worth to write a tiny middleware for the webpack dev server that sends the relevant source if we can’t extract it.

Would you like to see the transpiled (bundle.js) source or the original? The latter is most likely more difficult, though we can look into it.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

So c0300be actually fixes the Chrome issue (per request of @Pajn; thanks!) -- not sure if we should leave the issue with chromium open.

Collaborator

Timer commented Nov 28, 2016

So c0300be actually fixes the Chrome issue (per request of @Pajn; thanks!) -- not sure if we should leave the issue with chromium open.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

Errors are something you face really often during development, i don't think it will be good for my mental health to see red screen every time i make mistake.

Well, it doesn't have to be red. The point is to surface errors prominently, not to use the "red box" literally. I'd like to explore different color choices here, and make it more similar e.g. to Python error pages.

Member

gaearon commented Nov 28, 2016

Errors are something you face really often during development, i don't think it will be good for my mental health to see red screen every time i make mistake.

Well, it doesn't have to be red. The point is to surface errors prominently, not to use the "red box" literally. I'd like to explore different color choices here, and make it more similar e.g. to Python error pages.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

Would you like to see the transpiled (bundle.js) source or the original?

As in, with a tabbed interface: Source | Compiled.

Member

gaearon commented Nov 28, 2016

Would you like to see the transpiled (bundle.js) source or the original?

As in, with a tabbed interface: Source | Compiled.

@artyomtrityak

This comment has been minimized.

Show comment
Hide comment
@artyomtrityak

artyomtrityak Nov 28, 2016

Well, it doesn't have to be red. The point is to surface errors prominently, not to use the "red box" literally. I'd like to explore different color choices here, and make it more similar e.g. to Python error pages.

Sometimes your page still renders even there are some errors there. Red box overlaps everything.

Well, it doesn't have to be red. The point is to surface errors prominently, not to use the "red box" literally. I'd like to explore different color choices here, and make it more similar e.g. to Python error pages.

Sometimes your page still renders even there are some errors there. Red box overlaps everything.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

Sometimes your page still renders even there are some errors there. Red box overlaps everything.

The point is that if your application spits out an error, something is broken. You should fix it ASAP so you do not have any unintended consequences to your state/application.

Collaborator

Timer commented Nov 28, 2016

Sometimes your page still renders even there are some errors there. Red box overlaps everything.

The point is that if your application spits out an error, something is broken. You should fix it ASAP so you do not have any unintended consequences to your state/application.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 28, 2016

Member

Sometimes your page still renders even there are some errors there.

React gets into inconsistent internal state after an error is thrown. The page may technically render but it's broken from that moment on, and further attempts to interact with it cause other, more cryptic errors. I’ve learned this from the experience of closing issues about this in React repo every week. People often miss the original errors.

I agree that in general this might not be the best default, but I believe that for React single-page apps it is. Fail fast also works great in React Native, once people get used to it.

Also don’t forget you can still dismiss it by pressing Escape. (UX still needs more work of course.)

Member

gaearon commented Nov 28, 2016

Sometimes your page still renders even there are some errors there.

React gets into inconsistent internal state after an error is thrown. The page may technically render but it's broken from that moment on, and further attempts to interact with it cause other, more cryptic errors. I’ve learned this from the experience of closing issues about this in React repo every week. People often miss the original errors.

I agree that in general this might not be the best default, but I believe that for React single-page apps it is. Fail fast also works great in React Native, once people get used to it.

Also don’t forget you can still dismiss it by pressing Escape. (UX still needs more work of course.)

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Nov 28, 2016

Collaborator

@gaearon let me know if you think the dimming in the latest commits is sufficient ... I almost feel like we should remove the entries completely or collapse them in some form or another

Collaborator

Timer commented Nov 28, 2016

@gaearon let me know if you think the dimming in the latest commits is sufficient ... I almost feel like we should remove the entries completely or collapse them in some form or another

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Feb 4, 2017

Collaborator

Did you end up playing with this at all? I think it would be much easier to test if it was released as an alpha and had a few people playing with it.

Collaborator

Timer commented Feb 4, 2017

Did you end up playing with this at all? I think it would be much easier to test if it was released as an alpha and had a few people playing with it.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Feb 4, 2017

Member

I’m on a very tight schedule right now with React itself and didn’t get the time to look at cutting new releases yet. If you’d like to help I’d be happy to give you permissions to cut 0.9.0 and then 0.10.0-alpha with this and the Flow integration. What do you think? Feel free to DM me on Twitter to discuss.

Member

gaearon commented Feb 4, 2017

I’m on a very tight schedule right now with React itself and didn’t get the time to look at cutting new releases yet. If you’d like to help I’d be happy to give you permissions to cut 0.9.0 and then 0.10.0-alpha with this and the Flow integration. What do you think? Feel free to DM me on Twitter to discuss.

Timer added some commits Feb 11, 2017

@gaearon gaearon referenced this pull request Feb 24, 2017

Closed

0.9.4 and 0.10.0 roadmap #1634

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Feb 25, 2017

Collaborator

Maybe we should name this something better than failFast.js before landing it.

Collaborator

Timer commented Feb 25, 2017

Maybe we should name this something better than failFast.js before landing it.

@NE-SmallTown

This comment has been minimized.

Show comment
Hide comment
@NE-SmallTown

NE-SmallTown Feb 26, 2017

How do I import the "UI of error handler" above,I know that is a part of react-scripts,but react-scripts is a little difficult to be imported in a existing project with no changes.

NE-SmallTown commented Feb 26, 2017

How do I import the "UI of error handler" above,I know that is a part of react-scripts,but react-scripts is a little difficult to be imported in a existing project with no changes.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Feb 26, 2017

Collaborator

Are you ejected? If so, you need to publish your own version of react-dev-utils. If you're not ejected, you need your own version of react-scripts that depends on your own version of react-dev-utils.

Alternatively, if you can wait a few days and are not ejected, we'll be releasing an alpha with this in it.

Collaborator

Timer commented Feb 26, 2017

Are you ejected? If so, you need to publish your own version of react-dev-utils. If you're not ejected, you need your own version of react-scripts that depends on your own version of react-dev-utils.

Alternatively, if you can wait a few days and are not ejected, we'll be releasing an alpha with this in it.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Feb 26, 2017

Collaborator

Actually if you're ejected you can just add this manually by copying in these changes.

Collaborator

Timer commented Feb 26, 2017

Actually if you're ejected you can just add this manually by copying in these changes.

@NE-SmallTown

This comment has been minimized.

Show comment
Hide comment
@NE-SmallTown

NE-SmallTown Feb 26, 2017

@Timer Sorry for that I can't understand the word "ejected".My English is bad:(.Let me try to describle again,What I mean is that there is a project which has been developed a few days,we have our own webpack.config and server.config,but it doesn't have the beautiful UI of runtime error.

So,I want to just import the the part of error handle and corresponding UI of react-dev-utils(I am not sure,maybe they are parts of react-scripts?) to make my project beautiful.But I don't want to modify a lot in existing config or replace them with the whole react-dev-utils.So I want to know is there a good way to slove this because I think the doc of react-scripts is not very clear.

NE-SmallTown commented Feb 26, 2017

@Timer Sorry for that I can't understand the word "ejected".My English is bad:(.Let me try to describle again,What I mean is that there is a project which has been developed a few days,we have our own webpack.config and server.config,but it doesn't have the beautiful UI of runtime error.

So,I want to just import the the part of error handle and corresponding UI of react-dev-utils(I am not sure,maybe they are parts of react-scripts?) to make my project beautiful.But I don't want to modify a lot in existing config or replace them with the whole react-dev-utils.So I want to know is there a good way to slove this because I think the doc of react-scripts is not very clear.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Feb 26, 2017

Collaborator

Ah, just copy ansiHTML.js and failFast.js to your project, install the required deps, and add failFast.js as a webpack entry point.

Collaborator

Timer commented Feb 26, 2017

Ah, just copy ansiHTML.js and failFast.js to your project, install the required deps, and add failFast.js as a webpack entry point.

@NE-SmallTown

This comment has been minimized.

Show comment
Hide comment
@NE-SmallTown

NE-SmallTown Feb 26, 2017

@Timer Thanks!I will give it a try later.

@Timer Thanks!I will give it a try later.

Timer added some commits Mar 1, 2017

@kennetpostigo kennetpostigo referenced this pull request in webpack-contrib/webpack-hot-middleware Mar 4, 2017

Open

Adopt/Share overlay implementation with create-react-app? #184

Timer added some commits Mar 7, 2017

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Mar 7, 2017

Collaborator

I've been waiting a long time to do this. 😄
Thank you so much to everyone that has contributed! Our vision is now this much closer to being a reality.

:shipit: 🚀

Collaborator

Timer commented Mar 7, 2017

I've been waiting a long time to do this. 😄
Thank you so much to everyone that has contributed! Our vision is now this much closer to being a reality.

:shipit: 🚀

@Timer Timer merged commit ed5c016 into facebook:master Mar 7, 2017

1 of 2 checks passed

continuous-integration/appveyor/pr Waiting for AppVeyor build to complete
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gaearon

This comment has been minimized.

Show comment
Hide comment
Member

gaearon commented Mar 7, 2017

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Mar 7, 2017

Collaborator

Next up, hot reloading. 🙄

Stay tuned, stargazers.

Collaborator

Timer commented Mar 7, 2017

Next up, hot reloading. 🙄

Stay tuned, stargazers.

kohver added a commit to stockspiking/create-react-app that referenced this pull request Mar 9, 2017

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)
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

@codepunkt codepunkt referenced this pull request in ctrlplusb/react-universally Mar 16, 2017

Closed

Add a smart error handling component. #392

WiNloSt added a commit to prontotools/create-react-app that referenced this pull request Apr 4, 2017

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)
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

sbuzonas pushed a commit to sbuzonas/react-scripts that referenced this pull request May 5, 2017

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)
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
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 16, 2017

Member

Please help beta test the new version that includes this change!
#2172

Member

gaearon commented May 16, 2017

Please help beta test the new version that includes this change!
#2172

@iainbeeston iainbeeston referenced this pull request in facebook/prop-types May 23, 2017

Open

Add ability to throw error instead of warning in tests #28

bmson pushed a commit to zendesk/create-react-app that referenced this pull request Jun 23, 2017

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)
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

@sigarthur sigarthur referenced this pull request in BuckleScript/bucklescript Jul 13, 2017

Closed

Future of Bucklescript #1797

iamlacroix added a commit to trunkclub/tcweb-build that referenced this pull request Aug 2, 2017

Merge upstream create-react-app v1.0.7 (#90)
* Bust AppVeoyr cache

* Relax ESLint config peerDependency (#1740)

* Fix internal linting setup and add missing headers (#1741)

* Fix eject for linked react-scripts (#1736)

* fix eject for linked react-scripts

* path.resolve => resolveApp

* Add changelog for 0.9.4

* Published branch 0.9.x

 - create-react-app@1.3.0
 - eslint-config-react-app@0.6.1
 - react-dev-utils@0.5.2
 - react-scripts@0.9.4

* Adjust changelog wording

* Switch to preset-env (#1742)

* Switch to preset-env
Disables webpack modules by enabling babel modules to resolve #1638

* Bump babel-core to match babel preset versions

* Add uglify to targets

* 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)
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

* Whitelist files that can be embedded through url-loader (#1305)

* Whitelist files that can be embedded through url-loader

Change the current catch-all loader to use file-loader instead of
url-loader, and exclude common image file extensons. Add another url-loader
for images, configured identically to the original catch-all loader.

Part of issue #1293.

* Update tests to reflect change in loader config

* Integration test fix

* More CI fixes

* Work around broken loader-utils behaviour in integration tests

* Revise the documentation around file loading

* Documentation tweaks

* Docs tweak

* Update test now that webpack/loader-utils has been updated

* Update react-scripts to depend on babel-loader@7.0.0-alpha.2

* Bump deps

* Update deps for webpack 2

* Update broken link

* Display yarn instead of yarnpkg when creating a new app (#1747)

* Display yarn instead of yarnpkg

* Refactored displayd commands

* Removed testing directory

* update to modern code style (#1738)

* mv create-react-app/index.js -> create-react-app/creteReactApp.js

* update to modern code style

* var -> cosnt

* set trailing-coma to es5 for prettier

* Create PR_TEMPLATE.md

* Rename PR_TEMPLATE.md to PULL_REQUEST_TEMPLATE.md

* Update PULL_REQUEST_TEMPLATE.md

* Add yarn steps for adding flow (#1756)

[skip ci]

* Add lint-staged + husky for prettier auto-formatting on commit (#1759)

* Clarify philosophy about configuration (#1679)

* Update configuration philosophy (#1768)

* Update configuration philosophy

* Remove explanation

* Suggest `serve` for running in production (#1760)

* Suggest `serve` for serving the `build` directory

* How to handle it with Node in prod (or other platforms)

* Pretty newline added

* Adjusted default port of static server

* Remove `open` command from output

* Removed constant assignment

* Better explanation for not using having to use a static server

* Cute newline added

* Style nits

* Remove 'guard-for-in' lint rule (#1773)

Iterating over an object's keys using `for/in` is idiomatic and it's safe (in all modern browsers) to not check hasOwnProperty as long as the object is a plain object. Can we remove this lint rule?

* Run CI on Node 7; Bump detect-port: 1.0.1 -> 1.1.0 (#1776) (#1783)

* Run CI on Node 7

* Bump detect-port: 1.0.1 -> 1.1.0

* Run AppVeyor CI on Node 7

* Add 0.9.5 changelog (#1784)

* Add 0.9.5 changelog

* Update CHANGELOG.md

* docs(babel-preset): Update comment info about babel-preset-env. (#1787)

* Feature/readme-nomoretools (#1799)

* docs: replace TDLR with a meaningful heading

* docs: insert section No additional build tools

* Tweak wording

* Suggest "yarn build" rather than "yarn run build" (#1800)

* Fix for issue #1798: Suggested 'yarn build' versus 'yarn run build'

* remove 'run' from 'yarn test' command as well

* conditionally show 'run' if Yarn is not available

* Tweak the wording

* Fixes a silent crash when ejecting (#1810)

* Fixes a silent crash when ejecting

* Delete unnecessary files

* Remove references to eslintrc in Webpack config

* Fix lint

* Correct ESLint CLI options

* Link to CRNA

* Make scripts crash on unhandled rejections (#1819)

* Makes end-to-end testing crash on unhandled rejections

* Comment fix

* Allow creation of apps in empty mercurial repos (#1811)

* Allow creation of apps in empty mercurial repos

* Adding .hgignore to list of validFiles for isSafeToCreateProjectIn check

* Adding .hgcheck to list of validFiles for isSafeToCreateProjectIn check

* Make Surge guide more focused

* User Guide: Removed blockquote from code section, due to markdown conflict (#1869)

* Removed blockquote from code section

* Fix the fix

* Fix AppVeyor CI (#1876)

* Provide commander with package name (#1867)

commander to figure it out on its own

* Fix responsive behavior in iOS 9+ (#1821)

* Adding shrink-to-fit=no for proper responsive handling on Safari 9+

* Check internet connectivity with lookup instead of resolve (#1863)

Resolves #1818

* Update `detect-port` (#1861)

Previous changes caused `detect-port` to pick random port on app startup. Update fixes this regression, `detect-port` pick next available port instead.

* Fix importing npm linked libraries (#1359)

* Fix importing npm linked libraries

* Update webpack.config.dev.js

* Update webpack.config.prod.js

* Test for accidental extraneous dependencies (#1825)

* Added test to check for accidental dependencies

* Refactored test into a function

* Removed non capturing group from grep

* Update e2e-installs.sh

* Fix AppVeyor CI (#1868)

* Fix AppVeyor CI (#1876)

* Run AppVeyor on Visual Studio 2017

* Re-disable babel modules transform (#1894)

* Upgrade webpack & related deps

* Disable module transform (requires webpack 2+)

* Duplicate CLI file warning header

* Suggest Yarn in HTML template (#1911)

* Fix npm to yarn

* yarn & npm

* Update index.html

* Switch ordering of suggestion

We should suggest NPM first for new users.

* Note that only jest-enzyme@2.x is compatible

* Add sku to the list of alternatives (#1962)

* Update information in User Guide for Enzyme dependency (#1982)

* Ensure proxy url starts with `http://` or `https://` (#1890)

* Add linked modules test (#1913)

* Start the dev server at the specified host (#1301)

Pass the host from environment variable as argument of the devServer's
listen function instead of a field of options object.
Set the default host to 0.0.0.0 instead of localhost.

* Add folder structure docs for new contributors (#1991)

* Adding folder structure to help people navigate through project. It helps in resolving issues by providing brief description of each package and its purpose

* Removing unnecessary packages from Folder structure heading

* Update CONTRIBUTING.md

* Relax label rules (#1989)

* Update doc server example to work from any directory (#1988)

* Node.js serving with absolute path

It’s safer to use the absolute path of the directory that you want to serve, in case you run the express app from another directory.

* Update README.md

* removed options in UglifyJsPlugin which are equal to the defaults (#1993)

* removed redundant already default options in UglifyJsPlugin

* re-enabled remove comments Uglify option

JSDoc-style comments weren't being removed

* Resolve localhost when offline on Windows (#1839)

* Change proxy localhost to I27.0.0.1 for windows

* Update comment

* resolve localhost IP with DNS lookup on windows

* Fix CI errors

* Promisify addWebpackMiddleware

* Remove Node 6 syntax

* Update addWebpackMiddleware.js

* Actually use the resolved proxy

* Minify and map css (#2013)

Minify and map css

* Fix AppVeyor CI (#2010)

* Update README.md CSS Preprocessor --> node-sass-chokidar alternative (#1987)

* resolves facebook/create-react-app#1986 updates CSS Preprocessor docs to include information on node-sass-chokidar alternative to node-sass

* Update README.md

* Turn off CSS source maps

* Use custom sourcemap file names

* Modularize and extract crashOverlay to iframe (#1842)

* Modularize and extract crashOverlay to iframe

* Do not break words

* Disable warning overlay

* Use CJS imports

* Upgrade webpack deps and use strictExportPresence (#2028)

* Fix Netlify heading level. (#2033)

* Use prop-types package (#2029)

* Update README.md (#2040)

* Define dev chunk names (#2050)

* Define dev chunk names

Fixes #2046

* Add comment

* Suggest to create .eslintrc for IDE lint plugins (#2054)

* Suggest to create .eslintrc for IDE lint plugins

* Update README.md

* Update README.md

* Update README.md (#2058)

* Update README.md

* Update README.md

* Fix instructions for serving with now (#2052)

* Fix instructions for serving with now

Not sure if new, but the `--single` flag is now important.

* Keep it shorter

* Temporarily pin Yarn to fix CI

* Fixed documentation link for storybook in README.md (#2081)

* Forbid using window properties as global variables (#1840)

* Forbid using window properties as global variables

* Change globals list to match Standard.

* Fix globals

* Ignore the yarn cache directory (#2063)

* Revert "Forbid using window properties as global variables" (#2099)

* Revert "Ignore the yarn cache directory (#2063)"

This reverts commit 94149c7.

* Revert "Forbid using window properties as global variables (#1840)"

This reverts commit 5a7d8e8.

* Minor tweaks for crash overlay (#2101)

* Bump minimal Node version to 6 (#1897)

* Bump minimal Node version to 4.7.0

* Bump minimal Node version to 4.7.0

Modified additional files that needed a bump to 4.7.0 minimum node version

* Bump minimal Node version to 4.7.0

Reverse changes to packages/create-react-app/index.js as this file needs to continue to work on Node 0.10+

* Bump minimal node version to 6

* Bump minimal node version to 6

* Bump minimal node version to 6

* Prettify errors and warnings for Webpack 2 (#2113)

* Prettify errors and warnings for Webpack 2

* Update formatWebpackMessages.js

* Do not parse `.eslintignore` (#2115)

* Add `react-error-overlay` package (#2111)

* ༼ つ ◕_◕ ༽つ stack-frame-overlay

* Fix linting

* Remove auto overlay

* Fix e2e

* Pull in the rest

* Appease flow

* Correct dep

* Remove old repo references

* Check flow on test

* Test overlay in e2e

* Add cross env

* Rename package

* Make sure it gets built post-install

* Update the README

* Remove extra builds now that there's a postinstall script

* Revert "Remove extra builds now that there's a postinstall script"

This reverts commit 8bf601d.

* Remove broken script

* Fix some dev ergo

* Default to 0.0.0.0 (#2117)

* Omit ESLint warnings when there are ESLint errors (#2120)

* Adds tests for the overlay (#2118)

* Add get-source-map tests

* Fixtures shouldn't be formatted

* Add mapper tests

* Add stack-frame tests

* Add more util tests

* Add unmapper tests

* Add parser tests

* Switch to snapshots

* Snapshot more

* disable ignoring unused vars prefixed with _ (#1763)

* Bump React in development (#2122)

* Make error box messages friendlier (#2123)

* Only show first error (#2125)

* Fix a bad condition

facebook#2123 (comment)

* Update Sass docs (#2114)

* update readme with fix from facebook#1939

* update with better globbing

* added note

* updating with a note and reverting previous changes

* how about this?

* refactor

* added note about new files back in after verifying locally

* spaces back in, sorry was my editor!

* removed note about new files :)

* added bullet about new files issue currently open on node-sass

* Feature/different env config files #1343 (#1344)

* support different env configs.

* fomrat code

* Hide doc

* Slightly rework the PR

* Remove .env in default template
* Use just one entry in the paths
* Unify env.js and loadEnv.js

* Oops, forgot these folks

* Add note about yarn.lock in CONTRIBUTING.md (#2135)

* Add note about yarn.lock in CONTRIBUTING.md

* Update CONTRIBUTING.md

* Update README.md (#2137)

* Improve unmapper file heuristic, add limited warning support, and ignore internal errors (#2128)

* Browser sort is not stable

* Fix ordering of final message

* Register the warning capture

* Display only createElement warnings

* Use different method name

* Fix regression

* Ignore errors with only node_module files

* Ignore null files, too

* Revise count

* Revise warning

* Update overlay.js

* Add support for facebook/react#9679

* Use absolute paths

* Trim path if it's absolute

* Make sure it's an absolute path

* Oops

* Tweak for new behavior

* Make it safer

* More resilient warnings

* Prettier output

* Fix flow

* Skip React frames that are too close (#2143)

* Click to view source from error overlay (#2141)

* Click to view source

* Update package.json

* Update package.json

* Fix lint

* Work around weird inferred name in Chrome

* Don't collapse unintentional top-level errors (#2145)

* Don't collapse unintentional top-level errors

* Linkify internal stack frames too

* Add a missing color mapping (#2146)

Closes #2127

* Blacklist confusing global variables (#2130)

* Blacklist confusing global variables

* Blacklist globals

* Fix kitchensink test to lint

* Edit the list

* Use no-restricted globals for this

* Temporarily fork detect-port (#2147)

* Temporarily fork detect-port

* Fix get process id

* Use different package

* Unnecessary var

* Replace prompt function from react-dev-utils with Inquirer.js. (#1772)

* Print error messages for editor integration (#2150)

* Add custom eslint formatter (#2138)

* Add custom eslint formatter

* Add formatter docs

* Update formatter docs

* Slightly tweak it

* Update README.md

* Fix CI

* Tweak error and warning output (#2152)

* Tweak error and warning output

* Add a colon

* Focus on line in eslint messages

* Fix CI

* [Internal] Warn for missing brackets (#2151)

* Warn for missing braces

* Overlay, too

* Allow custom proxies in development (#1790)

* Change proxy handling to allow multiple proxies to be specified in package.json.

* Up webpack-dev-server to 2.4.2

Webpack Dev Server version 2.4.2 handles the external websocket upgrade
for all proxies

* Fix the listen() call

* Switch to correct default host

* Remove promises and extract to react-dev-utils

* oops

* Add support for IPv6 hosts

* Prefer localhost as an address (#2154)

* Show network address on start (#2155)

* Show network address on start

* Tweak visual representation

* Bump webpack packages

* Internal Webpack paths should not be clickable

* Make error/warning output more useful (#2161)

* Fix lint

* Fix CI

* Update to Jest 19 (#1614)

* Upgrade to Jest 19

* Use testMatch

* Correct version

* Put console.stack() behind a react vendor prefix (#2164)

Matches what we did in facebook/react#9679

* Unpin Yarn (#2124)

* Unpin Yarn

* Try 0.24.2

* Update e2e-simple.sh

* ESLint Config: Upgrade eslint-plugin-jsx-a11y and activate more rules. (#2163)

* ESLint Config: Upgrade eslint-plugin-jsx-a11y and activate more rules.

* Try to fix Lerna

* Update README.md

* Remove html-has-lang

* Update README.md

* Removing extra `eslint` rules (#2064)

Removing a stylistic lint rule

* Support hoisting react-scripts and add require.resolve() to loaders (#2166)

* Support hoisting react-scripts

* require.resolve() loaders and configs

This makes it so that loaders and configs are resolved relative to the config rather than to the app. This seems to make more sense to me.

* Support node scripts in BROWSER (#1590)

* Support node scripts in BROWSER

Modify OpenBrowser.js to run node scripts specified with the BROWSER environment
variable . If the value of the BROWSER environment variable ends with '.js' a
child process is spawned to execute the script with node.js. Any
arguments passed to npm start are also passed to this script, as well as
the url where the app is served.
The command executed in the child process is:

node <pathToScript> [OPTIONS] <url>

Update User Guide.

* Tweak code style

* Pin dep

* Comment out 0.10 docs

* Enable CSS sourcemaps in production (#2168)

* Adding plugin postcss-flexbugs-fixes and flexbox: 'no-2009' to Autoprefixer (#1771)

* Adding postcss-flexbugs-fixes

Using postcss-flexbugs-fixes to fix all flexbug's issues.

* Adding flexbox: 'no-2009' to Autoprefixer

It will add flexbox prefixes only for final and IE versions of
specification.

* Try to fix CI

* Try again

* Only run tests in <rootDir>/src (#544) (#1808)

* Only run tests in <rootDir>/src (#544)

* updates Jest to 19.0.2

* removes testPathIgnorePatterns from jest config

* adds testMatch to jest config to only match files in src

* Bump babel-jest to 19.0.0 to match jest 19.0.2

* Bump dependencies (#2170)

* Bump dependencies

* Bump CSS deps

* Somehow I missed dotenv

* Bump ESLint deps

* Tweak ESLint rules

* react-dev-utils/openBrowser now supports urls with 2+ params (#2076)

* react-dev-utils/openBrowser now supports urls with 2+ params

Fixed #2047

* react-dev-utils/openBrowser: encode url before open the browser

* Jest 20 (#2171)

* Make coverage and snapshot Jest options overridable in package.json (#1830)

* Override Jest config collectCoverageFrom with package.json

* Protect against overriding other options

* Better error message

* Create Jest config early on eject

* Tweak wording

* Dry it up

* Bump versions

* Resolve regenerator runtime relative to react-scripts (#2175)

* Fix Flow hopefully

* Disable require.ensure() warning (#2177)

* Reenable require.ensure()

* Tweak colors for better contrast on Windows (#2180)

* Handle errors from port detector (#2182)

* Tweak lint rules (#2186)

* Ignore Moment.js locales by default (#2187)

* Ignore Moment.js locales by default

* Update README.md

* Disable Yarn on CI temporarily

* Add module scope plugin (#2189)

* Add module scope plugin

* Oops

* Add comments

* Check windows seps too

* More descriptive error

* Document it

* Webpack config typo (#2193)

* Webpack config typo

* Webpack config more typo

* PWA-ification, via SWPrecacheWebpackPlugin + manifest.json (#1728)

* sw-precache-webpack-plugin, SW registration, manifest.json

* Documentation + a few SW tweaks.

* Added an unregister method, too, just in case.

* More info for the READMEs.

* Add minify to SWPrecacheWebpackPlugin config

* Fix SWPrecacheWebpackPlugin typo

* Fix file references in READMEmd

* Add instructions for testing service-worker locally

* Review feedback

* Some additional PWA metadata

* Use sw-precache-webpack-plugin v0.9.1 for node >=4.0.0 support

* Review feedback.

* Add manifest.json context in a comment.

* Fix typo

* Downgrade to sw-precache-webpack-plugin 0.9.1

* Hide changes in README until 1.0

* Hide changes in User Guide until 1.0

* Hide more docs

* Tidy up some build logs (#2197)

* Bump Jest to 20.0.3 (#2196)

* Test module scoping (#2198)

* Correct readme

* Add tests

* Update README.md

* Disable Uglify reduce_vars (#2200)

* Tweaking error overlay styles (#2201)

* Tweaked overlay styles

* Tweaked pre-style

* Clicked to background overlay dismiss

* Tidied up styles tobe more mobile Safari friendly

* Re-enabled pre-wrap

* Margin fixes

* Base font-size 10 -> 11px

* Error overlay is full-screen now based on feedback

* Make "N errors on the page" visible again

* Fix bottom margin of frame location and lack of tab nav

* Add tooltip to close button

* Bring compile error styles closer to runtime overlay

* s/when/if/

* Refactor and improve build output (#2202)

* Tweaked error overlay styles (pt2) (#2208)

* Fixed several of the issues and nits from PR:

* Moved margin between header and file name to header, so when content was scrolled, the header would remain more separate
* Made build-time and runtime overlays better match
* Secondary error <pre> style now uses yellow bg instead of red
* 'Scrollable Header' (see above comment to why this is necessary) but I did increase the max-height from 35% to 50%.
* Fixed header and 'X' button vertical alignment

* Temporary stack margin fix

* Move "N errors" to the top

* Move more logic from react-scripts to react-dev-utils (#2209)

* Show warnings for builds

* Move WebpackDevServer helpers into react-dev-utils

* Fix vertical alignment of close button

* Cleaned up next/prev error arrow styles; arrows wrap around when clicked now (#2210)

* Add temporary support for Node 4.x to global CLI (#2214)

* Replace text-align: start with left to fix Edge (#2215)

* ES6 syntax (#2213)

* Move error overlay middleware (#2216)

* "rule keywords" => "keywords"

* Improve interaction between compile and runtime overlays (#2219)

* Better document PWA stuff

* Enable 1.0 docs (#2220)

* Uncomment merged PRs

* Switch to br

* Update some webpack links

* Add a little about section for PWA

* oops

* fast on subsequent visits

* Add manual proxy config instructions

* hint package.json

* Change to js for comments

* Tune wording

* Add documentation about using code splitting (#1801)

* Add documentation about using code splitting

* Revise docs a bit

* Update README.md

* Update README.md

* Update README.md

* Swap changelogs (#2222)

* Swap changelogs

* Update and rename CHANGELOG.md to CHANGELOG-0.x.md

* Update and rename CHANGELOG-1.x.md to CHANGELOG.md

* Update CHANGELOG.md

* Publish

 - babel-preset-react-app@3.0.0
 - create-react-app@1.3.1
 - eslint-config-react-app@1.0.0
 - react-dev-utils@1.0.0
 - react-error-overlay@1.0.0
 - react-scripts@1.0.0

* Update CHANGELOG.md

* March -> May

* Fix shortcut handling in react-error-overlay (#2238)

* Add explicit package dependence (#2243)

Closes #2232

* Fix read of .env variables (#2242)

* Gracefully shut down the server on signals (#2246)

* Shame on me

* Correct docs on which .env.* files are supported. (#2247)

* Correct which .env. files are referenced in docs

* Highlight this is not available until 1.0.0

* Formatting

* Update README.md

* Update README.md

* Hide React Storybook from the User Guide while it's incompatible (#2252)

* Hide React Storybook from the User Guide while it's incompatible

* Update README.md

* Show customized build path for serve instruction (#2229)

* Show customized build path for serve instruction

* Remove cyan

* Ignore .env.local in test environment (#2250)

* add noscript to template's index.html (#2224)

* add noscript to template's index.html

* Tweak message

* Work around Windows path issue in SWPrecacheWebpackPlugin (#2255)

* Turn off operator-assignment stylistic rule (#2256)

* update readme with example of include path (#2258)

* update readme with example of include path

* Update README.md

* update reference with new name (#2259)

s/adding-images-and-fonts/adding-images-fonts-and-files/

* Additional fix to service worker config for "homepage" field (#2262)

* Always resolve NODE_PATH (#2261)

* Always resolve NODE_PATH

* Update env.js

* Fix a bug on empty NODE_PATH (#2264)

* Shut down server silently, as it is too noisy

* Add changelog for 1.0.1 (#2266)

* Publish

 - eslint-config-react-app@1.0.1
 - react-dev-utils@1.0.1
 - react-error-overlay@1.0.1
 - react-scripts@1.0.1

* Fix missing dependency (#2269)

* Adding missing dependency

* Pinning text-table dependency

* Describe build in less fluffy terms

* Update README.md

* Update README.md

* Update CHANGELOG.md

* Add WSL support to launchEditor utility (#2282)

* Only enable host check if you use proxy, and add a way to opt out of it (#2288)

* Disable host check if you don't use proxy

* Add a way to opt out and document it

* Ejecting should ensure you have clean git status (#2221)

* Ejecting should ensure you have clean git status

* Rename function

* Style

* Minor changes

- extract function
- exclude error output for missing git
- more descriptive error message
- no need to mutate answer
- fix answering "no" to return 0 exit code

* Add missing license headers

* Wrap console calls into a check (#2290)

* Provide a no-op SW that will be served by the dev environment. (#2276)

* Provide a no-op SW that will be served by the dev environment.

* Hide no-op service worker from user

* Remove unnecessary dependencies(#751) (#2283)

* Remove unnecessary dependencies(#751)

* Sort alphabetically

* Add changelog for 1.0.2 (#2291)

* Publish

 - react-dev-utils@1.0.2
 - react-error-overlay@1.0.2
 - react-scripts@1.0.2

* Roll back to an older version of case-sensitive-paths-webpack-plugin (#2314)

* Wrap console calls into a check (#2301)

* Wrap console calls into a check

* Add another check

* Remove `flowtype/require-valid-file-annotation` temporarily. (#2311)

Until this issue (gajus/eslint-plugin-flowtype#165) is
fixed we're disabling `flowtype/require-valid-file-annotation`.

* Ensure address is private (#2297)

* Ensure address is private
Resolves #2296

* adjust rule

* Update WebpackDevServerUtils.js

* Changelog for 1.0.3 (#2315)

* Publish

 - eslint-config-react-app@1.0.2
 - react-dev-utils@1.0.3
 - react-error-overlay@1.0.3
 - react-scripts@1.0.3

* Remove tarec from README (#2323)

I no longer support this package.

Create-react-app is so great I can no longer call tarec a credible alternative 😄

* 1.0.4 changelog

* Publish

 - react-error-overlay@1.0.4
 - react-scripts@1.0.4

* Remove connect-history-api-fallback and cross-spawn dependencies from react-scripts (#751) (#2320)

* Allow declaring variables before use in a scope above (#2325)

* Limit console warnings to 5 files at most (#2327)

* Files in public/ folder should not be requested through proxy (#2326)

* Add changelog for 1.0.5 (#2329)

* Add "Migrating" section

* Publish

 - eslint-config-react-app@1.0.3
 - react-dev-utils@2.0.0
 - react-error-overlay@1.0.5
 - react-scripts@1.0.5

* Add missing files to README (#2334)

* add missing files

* Update README.md

* Update CHANGELOG.md

* Don't resolve localhost if on network (#2332)

* Don't resolve if on network

* Update WebpackDevServerUtils.js

* Resolve flow errors in eslint JSX a11y (#2346)

* Upgraded eslint-plugin-jsx-a11y to 5.0.3 to take advantage of
  d70ac7d7975819e7a52b85465ec67a0d93eb962a

* Add navigateFallbackWhitelist /__* to SW Precache config (#2347)

* Add navigateFallbackWhitelist /__* to SW Precache config

* Add comments

* Add changelog for 1.0.6 (#2348)

* Publish

 - eslint-config-react-app@1.0.4
 - react-dev-utils@2.0.1
 - react-error-overlay@1.0.6
 - react-scripts@1.0.6

* Update webpack to v2.6.0 in react-scripts (#2349)

* Fix broken links (#2350)

* Print file sizes with correct build folder path. (#2361)

* Print file sizes with correct build folder path.

* Just use the print the basename.

* Update README.md for `now` deployments (#2372)

Simplified steps for deploying app to `now` as a static site. No need to `serve` script in `package.json` file. As of May 15, 2017, all static deployments on `now` are free and unlimited.

* Removed the overriding of reduce_vars to false since webpack v2.6.0 included the fixed for Uglify bug (#2351)

* Disable comparisons feature in uglify compression in production (#2379)

* Disable a micro-option in uglify that appears to be buggy

See facebook#2376

* wrong plugin

* Add a comment

* Consistently set environment variables (#2382)

* Update webpack to 2.6.1 (#2383)

* Add changelog for 1.0.7 (#2384)

* Publish

 - react-dev-utils@3.0.0
 - react-error-overlay@1.0.7
 - react-scripts@1.0.7

* Bump beta version

* Fix deploy script env vars

* Bump react-scripts beta version

* Fix Sass transforms and module mapping in the Jest config

* Update babel-preset-trunkclub beta version; add code coverage to tests

* Update Flow dependency, remove old devDeps, bump beta version

* Update the v8 upgrade docs

* Update Jest config

* Run prettier on build-module script before merging TC upstream

* Update upgrade docs

* Release v9.0.0

@dlmr dlmr referenced this pull request in webpack-contrib/webpack-hot-client Feb 22, 2018

Closed

feat: Overlay support request #19

1 of 3 tasks complete

rrdelaney pushed a commit to reasonml-community/reason-scripts that referenced this pull request May 23, 2018

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)
facebook/create-react-app#1101 (comment)
facebook/create-react-app#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment