Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React errors UI appears differently #11804

Open
xnukernel opened this issue Dec 19, 2021 · 7 comments
Open

React errors UI appears differently #11804

xnukernel opened this issue Dec 19, 2021 · 7 comments

Comments

@xnukernel
Copy link

I see we recently updated to v5.0.0 and there were some changes to the react-error-overlay. Can we revert back to the old version?

This new one has less information, features, and is much harder to read. What happened here?

New – worse UI:
Screen Shot 2021-12-19 at 09 42 37

Old – better UI:
Screen Shot 2021-12-18 at 11 22 33

@xnukernel xnukernel changed the title React errors UI appear differently React errors UI appears differently Dec 19, 2021
@RichardLindhout
Copy link

It's a lot better error message and can be closed, so I don't see why it should be changed back?

@obsius
Copy link

obsius commented Dec 23, 2021

@RichardLindhout That's a very subjective analysis and the initial example is skewed.

Objectively, here are the two side by side (using the stock CRA example, both images at native resolution):

image

First off, "can be closed" is completely irrelevant since it's a build error, and second, the only objective difference is the additional stack trace on the new overlay, which arguably isn't important for a build error anyways. It comes down to which UI looks more visually pleasing to the developer, which isn't worth arguing over.

What is worth arguing over is that the new error overlay does not report runtime errors. This is a huge difference and unless the new UI implements this, the old UI is objectively superior.

For runtime errors, the new overlay is a blank screen, unreported, forcing the developer to rely on console output, whereas the old overlay has the error message, a stack trace (clickable, taking you to the the file and line in your IDE), and (since it is a runtime error) the overlay is closable:

New overlay in runtime error scenario (console output provided since there is no overlay in this case):

image

Old overlay in runtime error scenario:

image

I agree with @xnukernel (although for a different reason) that the new overlay is not yet a sufficient replacement for the old one.

@RichardLindhout
Copy link

Ok valid reasons @obsius! I just liked the close button and in my case some errors were more understandable :)

@obsius
Copy link

obsius commented Dec 23, 2021

@RichardLindhout No hard feelings. I just don't want this ticket to be so readily dismissed and closed out before all changes of the new overlay are justified. In my opinion, the new overlay is visually ok (although I slightly prefer the smaller text of the old), but feature-wise it should be at parity with the old one. Maybe I'm missing something, but I pulled stock CRAv5 and don't see runtime errors onscreen, which to me is a big regression.

Although a minor inconvenience, developers now need to eject and add/change a few lines to the webpack and dev server config files to regain the runtime error.

@MasterCassim
Copy link

MasterCassim commented Jan 9, 2022

see this comment aaddb29#r696840791

We decided to see if we could unite forces with the webpack team / community to settle on one awesome error overlay CRA v5 doesn't use the CRA error overlay (therefor it doesn't need a custom hot client etc.)

There is an open ticket on WDS repo collecting improvements on the overlay.

(For now we keep the code and package, but it might be removed at some point)

Here we go webpack/webpack-dev-server#3689 ⭐ Any improvements welcome

@joshgoebel
Copy link

What is worth arguing over is that the new error overlay does not report runtime errors. This is a huge difference and unless the new UI implements this, the old UI is objectively superior.

Agreed 200%.

I'm running across this while learning React this seems like an unfortunate change to me. Am I missing something? The full screen errors messages I'm seeing in some of the tutorials are so much better than the blank screen I'm seeing in my fresh create-react-app app... Is there some simply way to get the old behavior back or this is just in flux and going to be "broken" like this until it's finished?

Being new to React this seems like a huge step backwards (just getting a blank screen).

@BraianS
Copy link

BraianS commented May 9, 2024

Good morning, @xnukernel, Any updates on this issue? If there is no activity, it can be closed and reopened in the future. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants