Display an overlay for syntax errors

[davidascher]

My dev flow is to edit the code, and thanks to hot reload, look at the browser window to see the effect. I love those dev tools that in dev mode show the equivalent of what create-react-app currently dumps on console into the browser, e.g. when there are syntax errors.

[gaearon]

I agree we should print the terminal output in an overlay if the compilation fails.

@glenjamin worked on https://github.com/glenjamin/webpack-hot-middleware that does this, but IIRC it had some other problems.

So I’d like to see this as a feature, but probably implemented as a custom client instead of the one that ships with WebpackDevServer.

[glenjamin]

I'd happily accept any PRs / specific fixes for problems in hot-middleware, it already has a custom HMR client and is widely used.

You are of course free to port/fork, but it'd be good to share if possible.

[gaearon]

Could you make it not depend on polyfill in IE? As I recall this was the biggest issue.

[gaearon]

(Not saying it’s the only one tho. If you could make a PR porting from WDS to the middleware it would be easier to find other issues.)

[goshacmd]

One thing I love about Brunch is that in case of error it will show a system notification, no config required. :w and seeing an error notification, it's easier to go to another terminal tab and see the stack trace, than to cmd+tab to the browser after saving a few files only to then spot an error.

[gaearon]

Sounds interesting. Perhaps we should do that. Want to take a stab at PR?

[goshacmd]

There even seems to be a webpack plugin for that already https://www.npmjs.com/package/webpack-error-notification

[goshacmd]

Which doesn't work on Windows, though.

Sure, I'll take a stab at it tomorrow!

[glenjamin]

The options for this are either plain WebSocket, which is IE10+ or a lib that magically deals with fallbacks - which would be weightier.

Any thoughts on what is preferable?

On 22 Jul 2016, at 20:31, Dan Abramov [email protected] wrote:

Could you make it not depend on polyfill in IE? As I recall this was the biggest issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[gaearon]

What was the motivation behind not using WebSockets?

[glenjamin]

Ironically I thought it'd be simpler & more reliable!

On 22 Jul 2016, at 23:17, Dan Abramov [email protected] wrote:

What was the motivation behind not using WebSockets?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[goshacmd]

(Submitted #131 to add notifications)

[gaearon]

I have a proof of concept of this working: https://twitter.com/dan_abramov/status/773799004878565376.
I’d like #419 to land first, and then I can add this.

[vjeux]

#419 landed :)

[gaearon]

I was just looking into it. 😄