Razzle: Add error overlay like create-react-app's

[jaredpalmer]

Create-react-app uses a custom webpack dev server client and its own custom error overlay. We could use switch to react-dev-utils/webpackHotDevClient.js, except that it uses window.location.port. From my initial explorations, this was the dealbreaker.

That being said, it would be really nice to get an error overlay like CRA's for Razzle

[jariz]

Hey @jaredpalmer!
What do you think of the idea to proxy all requests from /sockjs-node/ to the webpack server from the main entry point.
It's kind of hacky but probably a better solution than forking react-dev-utils/webpackHotDevClient.js and editing it to the webpack server port.
Preferably we'd have a middleware in razzle-dev-utils which could be used from src/index.js as so:

+import razzleHMRProxy from 'razzle-dev-utils/razzleHMRProxy';

export default express()
+   .use((req, res) => razzleHMRProxy(req, res))
    .use((req, res) => app.handle(req, res))
    .listen(port, function (err) {

[jariz]

Or furthermore, perhaps even ditch the webpack dev server entirely and migrate it to the webpack middleware? (swapping out the proxy in above example for a webpack middleware that razzle could export)

[jaredpalmer]

That would be cool.

[jariz]

What was the reasoning behind running the dev server on a seperate port in the first place instead of using the middleware, if I may ask?

[jariz]

@jaredpalmer 🎉
Nice!

[jariz]

Does this display serverside errors too?

[jaredpalmer]

Don't think so. It works by creating a socket from webpack-dev-server and your client bundle.

[jaredpalmer]

I am working with Dan to fix a bug that is preventing runtime errors from showing up. Right now only compiler / lint errors show

https://github.com/facebookincubator/create-react-app/pull/2515#issuecomment-325461989

[tsiq-swyx]

how about using componentDidCatch now that it exists? sorry if this has been discussed elsewhere before.

[jaredpalmer]

AFAIK componentDidCatch can’t be used with SSR