Add syntax error overlay in development by gaearon · Pull Request #744 · react/create-react-app

gaearon · 2016-09-25T00:28:42Z

Fixes#89.
Fixes#569.
Fully fixes#263 (we don’t log anything now, and don’t try to reconnect).

Some screenshots:

gaearon · 2016-09-25T00:30:49Z

I’m bad at CSS so if you have ideas how to make it wrap code better or something, I’m up for it.

gaearon · 2016-09-25T00:53:51Z

Travis seems to fail because of #698.

glenjamin · 2016-09-25T08:57:36Z

Nice work!

I think it's worth logging just the once when a disconnect happens, with a note to reload after the server is available again?

white-space: pre-wrap might do what you need in the overlay too.

gaearon · 2016-09-25T10:31:11Z

Going to get this in. Can fix nits later. 😄

goshacmd · 2016-09-25T10:36:57Z

Making the overlay slightly transparent also gives a sense of depth. As in, "hey, your stuff is here, but you gotta fix this first". Minor and probably subjective, but I have liked it on several projects

gaearon · 2016-09-25T11:40:05Z

@glenjamin

👍

@goshakkk

We might make it transparent when we support hot reloading for JS, but for now, fixing a syntax error triggers a full refresh anyway, so I think making it transparent might make it annoying (“my stuff is there, why are you refreshing?”)

vjeux · 2016-09-26T19:52:01Z

+ message = lines.join('\n');
+ // Internal stacks are generally useless so we strip them
+ message = message.replace(
+ /^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, ''


are node error message internationalized? PHP ones are and this would break with them

Not as far as I know. At least not yet.

vjeux · 2016-09-26T19:54:34Z

+ }
+
+ // https://webpack.github.io/docs/hot-module-replacement.html#check
+ module.hot.check(/* autoApply */true, function(err, updatedModules) {


inline comment for booleans ftw :)

Learned this from you!

Woah this is neat, good tip!

oh, nice one

jefflau · 2016-09-30T09:05:33Z

I'm trying to merge the create-react-app into a current project so I can use all the build stuff you guys use. I've got a ton of errors from es-lint and other things which i want to gradually get rid of. The app is working behind the iframe, but I'd like it to be optional to have this massive iframe overlay so I can get rid of the errors gradually. Is that possible right now?

gaearon · 2016-09-30T09:18:39Z

@jefflau You can remove react-dev-utils/webpackHotDevClient and instead use the stock client, as described here.

gaearon · 2016-09-30T09:20:00Z

You can't do that without ejecting, but presumably you already ejected? Otherwise I'm not sure where lint errors are coming from. We only use lint warnings in CRA lint configuration except for no-undef which we treat as an error. So normally the overlay shouldn't show up.

jefflau · 2016-09-30T09:57:09Z

Hey @gaearon I ejected already to do some extra webpack build config. We've got some global variables being injected by other things, so I changed the nodef to warning until I can (if I can) change it to not use globals.

Does webpackhotdevclient do the HMR for JS? I wouldn't want to remove it if it does

gaearon · 2016-09-30T11:43:52Z

We've got some global variables being injected by other things, so I changed the nodef to warning until I can (if I can) change it to not use globals.

You can replace myGlobal with window.myGlobal if it’s intentional, and the warning will go away.

gaearon · 2016-09-30T11:44:32Z

Does webpackhotdevclient do the HMR for JS? I wouldn't want to remove it if it does

I haven’t tried but I think it does if you already handle HMR somewhere in the code. Our CSS hot reloads because style-loader uses HMR API, so it should work.

* Add syntax error overlay in development * Support HMR being disabled * Tweak CSS

gaearon added this to the 0.6.0 milestone Sep 25, 2016

gaearon assigned vjeux Sep 25, 2016

ghost added the CLA Signed label Sep 25, 2016

Add syntax error overlay in development
00c9208

gaearon force-pushed the bsod branch from 621d91d to 00c9208Compare September 25, 2016 00:34

ghost added the CLA Signed label Sep 25, 2016

gaearon added 2 commits September 25, 2016 11:23

Support HMR being disabled
37edce1

Tweak CSS
2012421

gaearon merged commit 9cce0fb into masterSep 25, 2016

gaearon deleted the bsod branch September 25, 2016 10:31

gaearon mentioned this pull request Sep 25, 2016
Syntax overlay doesn’t work in Firefox #747
Closed

vjeux reviewed Sep 26, 2016
View reviewed changes

SpaceK33z mentioned this pull request Sep 27, 2016
How to enable error display on browser sreen webpack/webpack-dev-server#522
Closed

This was referenced Sep 27, 2016
Status/Roadmap of the project gaearon/react-hot-boilerplate#97
Closed
Add “red box” on any JavaScript errors in development #783
Closed

This was referenced Sep 30, 2016
Use friendly-errors-webpack-plugin to display friendlier errors #499
Closed
Prettier console output and template system #461
Closed

feiqitian pushed a commit to feiqitian/create-react-app that referenced this pull request Oct 25, 2016
Add syntax error overlay in development (react#744)
eae3245
* Add syntax error overlay in development * Support HMR being disabled * Tweak CSS

jrysig mentioned this pull request Dec 3, 2016
Support for syntax error overlay mariusbalcytis/webpack-bundle#32
Closed

osteele mentioned this pull request Jul 26, 2017
Feature proposal: report syntax errors in the web page jekyll/jekyll#6248
Open

KevinGrandon mentioned this pull request Dec 18, 2017
Surface SSR errors in browser UI fusionjs/fusion-core#53
Closed

lockBot locked and limited conversation to collaborators Jan 22, 2019

Uh oh!

Uh oh!

Conversation

gaearon commented Sep 25, 2016

Uh oh!

gaearon commented Sep 25, 2016

Uh oh!

gaearon commented Sep 25, 2016

Uh oh!

glenjamin commented Sep 25, 2016

Uh oh!

gaearon commented Sep 25, 2016

Uh oh!

goshacmd commented Sep 25, 2016

Uh oh!

gaearon commented Sep 25, 2016

Uh oh!

vjeuxSep 26, 2016

Choose a reason for hiding this comment

Uh oh!

gaearonSep 26, 2016

Choose a reason for hiding this comment

Uh oh!

vjeuxSep 26, 2016

Choose a reason for hiding this comment

Uh oh!

gaearonSep 26, 2016

Choose a reason for hiding this comment

Uh oh!

mxstbrSep 30, 2016

Choose a reason for hiding this comment

Uh oh!

geoffreydhuyvettersOct 4, 2016

Choose a reason for hiding this comment

Uh oh!

jefflau commented Sep 30, 2016

Uh oh!

gaearon commented Sep 30, 2016

Uh oh!

gaearon commented Sep 30, 2016

Uh oh!

jefflau commented Sep 30, 2016• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaearon commented Sep 30, 2016

Uh oh!

gaearon commented Sep 30, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

jefflau commented Sep 30, 2016•
edited
Loading