Created by: Timer
If you would like to help, please see https://github.com/facebookincubator/create-react-app/issues/1129.
This PR is a prototype implementation for #783 (closed) 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 (closed) 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?
Merged by
(Jul 25, 2025 8:00am UTC)
Activity
Created by: Timer
Great @gaearon! Here's a little animation in the meantime. http://g.recordit.co/604Ch1kQ87.gif
I know the stack trace pointing todone (see below)bundle.jsis suboptimal, so hopefully someone who looks this way can provide some help/suggestions in that respect!Created by: Timer
Update (57fa69d0)!
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 (c12c55bf). https://puu.sh/swopo/06c2a3a357.png
Created by: Timer
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.
Created by: Timer
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.onerroris 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.
Created by: gaearon
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. :-)
Created by: Timer
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
Created by: gaearon
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.
Created by: Pajn
Try setting Error.stackTraceLimit http://stackoverflow.com/questions/9931444/how-to-increase-number-of-call-stack-entries-in-google-chrome-developer-tools-o
Created by: artyomtrityak
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.
Created by: Timer
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.
Created by: Timer
So c0300bef actually fixes the Chrome issue (per request of @Pajn; thanks!) -- not sure if we should leave the issue with chromium open.
Created by: gaearon
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.
Created by: artyomtrityak
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.
Created by: Timer
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.
Created by: gaearon
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.)
