Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add “red box” on any JavaScript errors in development

See original GitHub issue

This is likely to cause some controversy so I’d love to hear the arguments against doing this.

I want to enable “red box” on any JavaScript error in development, similar to the proposal in When an uncaught exception is thrown, an error is shown full screen similar to our syntax overlay (#744). It shows the error message and the stack. The full-screen message can be dismissed by pressing “Escape” in case you still want to interact with a broken app. The error is also printed in the console, like before.

We can use although I’d prefer to have full control over this box in our monorepo to quickly patch bugs and improve the output.

Why I want to do this:

  • React is currently not tolerant to errors thrown inside components. Its internal state often gets corrupted by this, so we want to surface errors early and prominently.
  • We already do this on React Native to great success.
  • In CRA we control the environment and we can do this.
  • This is a part of my plan to bring hot reloading to CRA:

Open questions:

  • How to capture all errors with stacks in development. Does window.onerror provide Error objects in modern browsers now?
  • What to do about unhandled Promise rejections. Ideally we want to surface them given how common this problem and misunderstanding is.
  • What do do about errors inside React that accidentally get caught, like Even if the code is technically valid, React just doesn’t support this pattern. Any error inside setState() or ReactDOM.render() is going to mess it up. We could monkey-patch them to report errors, or add some hooks in React itself to surface them.

Feedback and thoughts welcome.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:38
  • Comments:25 (13 by maintainers)

github_iconTop GitHub Comments

gaearoncommented, Nov 28, 2016

The color aside, I’d prefer to see the errors in the console and step through them. With Redbox, all I get is the line numbers, which aren’t even right since cheap source maps devtool doesn’t work in Chrome currently.

None of these are problems with the idea of catching errors and displaying them. These are problems with one particular way of doing so.

There is no reason why we couldn’t:

  • Use a different color
  • Figure out a way to fix line numbers
  • Figure out a way to show more useful info, e.g. a code snippet around failing lines

Please unleash your fantasy 😉 . We don’t need to think in terms of existing solutions, we need think about the desired experience, and then figure out a way to make it possible.

gaearoncommented, Feb 24, 2017

Yes, we plan to add this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

дэн on Twitter: "RFC: Add “red box” to Create React App in ...
RFC: Add “red box” to Create React App in development. Add “red box” on any JavaScript errors in development · Issue #783 ......
Read more >
add in error red border - CodeProject
im wondering how am i going to add in the red border js ... I can't add image on it , I want...
Read more >
Handling Errors in JavaScript: The Definitive Guide
This prevents us from having an empty red box on our page at all times. Of course you can change the appearance and...
Read more >
Red box (unable to run SQL scripts) - Oracle Communities
Red box (unable to run SQL scripts) ... problem (i.e. what tool are you using, what are you doing, what error messages if...
Read more >
It looks like you didn't add the movies hash! - Codecademy
... the error response, and I end up with the same error in the red box like you did. The first input you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found