React errors UI appears differently

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:

Old – better UI:

[obsius]

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

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

Old overlay in runtime error scenario:

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

[RichardLindhout]

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