Error Overlay Is Not Invoked When There Is a Client-Side Error

[devloco]

Error Overlay Is Not Invoked When There Is a Client-Side Error

[devloco]

Looks like this is only a problem when enabling TypeScript. Which makes sense, since TSC is pushed onto a different thread, and thus any errors are not immediately reported by Webpack. Or something like that.

I imagine the changes that Facebook made to error overlay are exactly because of this.

[devloco]

It's not pretty, but if you use TypeScript, keep your browser's JS console open. Errors are reported there.

[devloco]

I played with this for quite a while over the weekend, and actually the bug is much less serious than I first thought. I quite accidentally stumbled on an edge case. The error overlay works with TypeScript in most cases. The only time I noticed the overlay not work was with a React Stateless Component on which I remarked out the import * as React from "react"; line.

I'm sure there are other case, but the trick here is that the error happens on the client-side, not in Webpack/serevr-side at all. The server side does not report any problem in that scenario. But React does see the problem, and reports it to the JS console.

Create-react-app is somehow capturing these client-side errors and sending them to the Error Overlay. I'll figure out how and update my implementation of the Error Overlay to work in a similar fashion.

[devloco]

Fixed by updating to Create-React-App v.2.1.8.