Convert react-error-overlay to React by tharakawj · Pull Request #2515 · react/create-react-app

tharakawj · 2017-06-11T03:36:08Z

Proposed in #2100

Some points to discuss,

CodeBlock component still depends on old DOM manipulation code and dangerouslySetInnerHTML. Any suggestions to make it better?
Used HTML button elements instead of clickable (tab clickable) divs with similar styling. Any downside of that?
I'm not much sure about the purpose of consumeEvent.js. Can you think of a better alternative to get the same behavior with React?

gaearon · 2017-06-11T10:23:04Z

Wow, thanks for tackling this! I'm a bit busy now but will review next time I get the chance.

gaearon · 2017-06-27T16:11:19Z

Hey, sorry for long time no review. I'm putting out some fires related to Node 8 and Windows but hoping to get back to this soon. In the meantime, do you want to try converting the compile-time overlay to this set of components as well? That was the original plan—right now there's too much duplication between them.

tharakawj · 2017-06-28T00:14:05Z

No problem. Yes. I was thinking to change the compile-time overlay as well. But later I thought to wait until I get feedback for this. Anyway, if this looks good I'll try that and update the PR.

tharakawj · 2017-07-09T07:01:42Z

@gaearon Updated PR with changes to compile-time overlay. I had to refactor several files and that's why more files have changed. Let me know if you need it to be a separate PR or anything to make it easier to review.

I'm not sure why AppVeyor build has failed. Maybe we need to trigger the build manually again.

gaearon · 2017-07-09T18:42:29Z

Retrying. Fingers crossed!

gaearon · 2017-07-12T13:26:42Z

Looks like Flow is choking:

\node_modules/react-dev-utils/node_modules/react-error-overlay/node_modules/react-dev-utils/node_modules/react-error-overlay/node_modules/eslint-plugin-jsx-a11y/src/util/hasAccessibleChild.js:5
5: import isHiddenFromScreenReader from './isHiddenFromScreenReader';
^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./isHiddenFromScreenReader. Required module not found

This is because we use a version of jsx-a11y plugin that happened to publish its internal Flow sources on npm. If you explicitly add it to [ignore] section in .flowconfig this should be fixed.

tharakawj · 2017-07-13T00:04:51Z

@gaearon Thanks for the tip. I'll update and see.

* Refactor react-error-overlay components to container and presentational components. * Make the compile-time error overlay a part of react-error-overlay package. * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.

tharakawj · 2017-07-15T09:18:20Z

🎉 @gaearon ready for the review.

cr101 · 2017-07-17T22:37:42Z

@tharakawj Would it be possible to easily integrate react-error-overlay in a non-CRA project?

gaearon · 2017-07-18T00:18:27Z

It is already possible. Although API will change.

gaearon · 2017-08-26T22:18:52Z

I finally got the time to look into this. I think this is mostly good except for some minor things. I wanted to check—would you be willing to finish this up in response to review, or would you have somebody take over this? I understand it's been a long time and you might be busy or uninterested. In any case thanks for much for this!

tharakawj · 2017-08-27T00:14:41Z

@gaearon Yes! I'm here. Let's finish this up.

gaearon · 2017-08-26T23:03:21Z

- frameLink.appendChild(frameAnchor);
- frame.appendChild(frameLink);
-
- if (typeof onSourceClick === 'function') {


I think this part got lost. I can't click on the source code snippet but I used to be able to.

gaearon · 2017-08-27T01:38:46Z

+}
+
+function showCompileErrorOverlay(error: string) {
+ if (container == null) {


Shouldn't we check iframeReference instead? What if we call showCompileErrorOverlay() twice in a row before mountOverlayIframe callback returns? Wouldn't that result in two iframes being created?

gaearon · 2017-08-28T01:45:48Z

I'll just get it in. #yolo

gaearon · 2017-08-28T02:30:30Z

Aaand it's out in 1.0.12! Please give it a try. Thanks again :-)
I'll write up some next work directions if you're interested.

jaredpalmer · 2017-08-28T02:54:59Z

Aside from the path to the bundle being at static/js/bundle.js, what other assumptions does error overlay make about a React app? Want to use it outside of CRA.

gaearon · 2017-08-28T03:05:27Z

I don't think it does any. (And we probably want to get rid of that bundle.js assumption too. Need to pass it from outside with the options.)

tharakawj · 2017-08-28T03:19:30Z

@gaearon Nice! Yes please, I'm happy to contribute more.

KyleAMathews · 2017-08-28T03:38:51Z

Yeah would love to get this into Gatsby!

gaearon · 2017-08-28T09:55:16Z

Happy to take a PR if there's something that doesn't let it work out of the box for you.

jaredpalmer · 2017-08-28T16:20:18Z

So I have a slightly modified version of the latest webpackHotDevClient that makes the socket connection on another port (3001 instead of window.location.port) because that's where webpack-dev-server runs in Razzle. Compile / lint errors work, but can't seem to get the runtime error overlay working...

Thoughts?

Build Errors ✅

Runtime Errors ❌

gaearon · 2017-08-28T17:09:26Z

Can you give me an example to look at?

jaredpalmer · 2017-08-28T19:57:07Z

@gaearon here you go https://github.com/jaredpalmer/react-error-overlay-razzle-bug

gaearon · 2017-08-28T20:56:40Z

The event.error property is null so we can't extract that data. This happens when the code that throws is from a different origin than the app.

To fix it I added a crossorigin attribute to the bundle <script> tag:

- <script src="${assets.client.js}" defer></script>+ <script src="${assets.client.js}" crossorigin defer></script>

That fixed it. jaredpalmer/react-error-overlay-razzle-bug#1

…react-app * 'master' of https://github.com/facebookincubator/create-react-app: (36 commits) Publish Changelog for 1.0.12 (react#3016) Relax React dep requirements Default Favicon lossless optimisation (react#2917) update babel-runtime dependency in react-error-overlay and react-scripts (react#2991) Convert react-error-overlay to React (react#2515) Bump react-dev-utils Fix module function name in error overlay (react#3012) Docs: debugging in WebStorm (react#2986) Fix docs for `printFileSizesAfterBuild` (react#2942) Remove Modulus from user guide (react#2948) Remove superfluous lodash usage (react#2938) Update README.md (react#2927) Publish Prepare for 1.0.11 release (react#2924) Update dev deps (react#2923) Update README.md Use env variable to disable source maps (react#2818) Make formatWebpackMessages return all messages (react#2834) Adjust the `checkIfOnline` check if in a corporate proxy environment (react#2884) ...

* Convert react-error-overlay to React * Update compile-time error overlay to use react-error-overlay components * Refactor react-error-overlay components to container and presentational components. * Make the compile-time error overlay a part of react-error-overlay package. * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors. * Run Prettier * Move the function name fix into StackFrame itself * Fix clicking on source code snippet to open the code in editor * Use exact objects + minor style tweak * Don't linkify frames that don't exist on the disk * Fix lint * Consolidate iframe rendering logic * Remove circular dependency between react-dev-utils and react-error-overlay * Fix lint * Fix decoupling of react-dev-utils and react-error-overlay by moving middleware * Deduplicate identical errors

@tharakawj

## 1.0.13 (September 2, 2017) #### 🐛 Bug Fix * `react-error-overlay` * [#3051](#3051) Fix case-sensitivity issue with upgrading the package version. ([@tharakawj](https://github.com/tharakawj)) * `react-dev-utils` * [#3049](#3049) Print filesize difference for chunks. ([@esturcke](https://github.com/esturcke)) * `react-scripts` * [#3046](#3046) Fix crash in development mode on IE11. ([@tharakawj](https://github.com/tharakawj)) #### 💅 Enhancement * `react-scripts` * [#3033](#3033) Add an empty mock for `child_process` to let some libraries compile. ([@McFlurriez](https://github.com/McFlurriez)) #### 🏠 Internal * `react-dev-utils`, `react-error-overlay` * [#3028](#3028) Make error overlay filename configurable. ([@jaredpalmer](https://github.com/jaredpalmer)) #### Committers: 4 - Anthony ([McFlurriez](https://github.com/McFlurriez)) - Erik J. Sturcke ([esturcke](https://github.com/esturcke)) - Jared Palmer ([jaredpalmer](https://github.com/jaredpalmer)) - Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) ### Migrating from 1.0.12 to 1.0.13 Inside any created project that has not been ejected, run: ``` npm install --save --save-exact react-scripts@1.0.13 ``` or ``` yarn add --exact react-scripts@1.0.13 ``` ## 1.0.12 (August 28, 2017) #### 🐛 Bug Fix * `react-error-overlay` * [#3012](#3012) Fix module function name in error overlay. ([@gaearon](https://github.com/gaearon)) * `react-dev-utils` * [#2938](#2938) Remove superfluous lodash usage. ([@Timer](https://github.com/Timer)) #### 💅 Enhancement * `react-scripts` * [#2917](#2917) Optimize the size of default favicon. ([@sylvainbaronnet](https://github.com/sylvainbaronnet)) #### 📝 Documentation * `react-scripts` * [#2986](#2986) Docs: debugging in WebStorm. ([@prigara](https://github.com/prigara)) * [#2948](#2948) Remove Modulus from user guide. ([@Zertz](https://github.com/Zertz)) * [#2927](#2927) Update README.md. ([@tbassetto](https://github.com/tbassetto)) * `react-dev-utils` * [#2942](#2942) Fix docs for `printFileSizesAfterBuild`. ([@Kerumen](https://github.com/Kerumen)) #### 🏠 Internal * `react-error-overlay`, `react-scripts` * [#2991](#2991) Update `babel-runtime` dependency ([@christophehurpeau](https://github.com/christophehurpeau)) * `react-dev-utils`, `react-error-overlay`, `react-scripts` * [#2515](#2515) Convert `react-error-overlay` to React ([@tharakawj](https://github.com/tharakawj)) #### Committers: 9 - Christophe Hurpeau ([christophehurpeau](https://github.com/christophehurpeau)) - Dan Abramov ([gaearon](https://github.com/gaearon)) - Ekaterina Prigara ([prigara](https://github.com/prigara)) - Joe Haddad ([Timer](https://github.com/Timer)) - Pier-Luc Gendreau ([Zertz](https://github.com/Zertz)) - Sylvain Baronnet ([sylvainbaronnet](https://github.com/sylvainbaronnet)) - Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) - Thomas Bassetto ([tbassetto](https://github.com/tbassetto)) - Yann Pringault ([Kerumen](https://github.com/Kerumen)) ### Migrating from 1.0.11 to 1.0.12 Inside any created project that has not been ejected, run: ``` npm install --save --save-exact react-scripts@1.0.12 ``` or ``` yarn add --exact react-scripts@1.0.12 ``` **Note:** there’s a [known issue](#3041) that might cause the project to not compile after upgrading. In this case, migrate straight to `1.0.13` which doesn’t have this issue.

* Convert react-error-overlay to React * Update compile-time error overlay to use react-error-overlay components * Refactor react-error-overlay components to container and presentational components. * Make the compile-time error overlay a part of react-error-overlay package. * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors. * Run Prettier * Move the function name fix into StackFrame itself * Fix clicking on source code snippet to open the code in editor * Use exact objects + minor style tweak * Don't linkify frames that don't exist on the disk * Fix lint * Consolidate iframe rendering logic * Remove circular dependency between react-dev-utils and react-error-overlay * Fix lint * Fix decoupling of react-dev-utils and react-error-overlay by moving middleware * Deduplicate identical errors

facebook-github-bot added the CLA Signed label Jun 11, 2017

tharakawj force-pushed the reactify-error-overlay branch 3 times, most recently from a97e090 to 59e421aCompare June 11, 2017 07:07

tharakawj force-pushed the reactify-error-overlay branch from 59e421a to fd7c996Compare July 1, 2017 01:12

tharakawj force-pushed the reactify-error-overlay branch 2 times, most recently from c1af487 to 5736b21Compare July 9, 2017 06:16

tharakawj added 2 commits July 15, 2017 13:39

Convert react-error-overlay to React
1e43349

tharakawj force-pushed the reactify-error-overlay branch from 5736b21 to 822a5f6Compare July 15, 2017 08:10

This was referenced Jul 17, 2017
add editor/ide quick edit link to file/line on each error message #1566
Closed
Jump to editor from build time overlay #2805
Closed

gaearon added 2 commits August 26, 2017 16:08

Run Prettier
f8eb25d

Merge with master
c68882c

Port the fix fromreact#3012
03c74c6

Move the function name fix into StackFrame itself
36f1361

gaearon reviewed Aug 27, 2017
View reviewed changes

gaearon merged commit ecd1f05 into react:masterAug 28, 2017

gaearon mentioned this pull request Aug 28, 2017
Changelog for 1.0.12 #3016
Merged

KyleAMathews mentioned this pull request Aug 28, 2017
Add error-overlay from CRA gatsbyjs/gatsby#1835
Closed

jaredpalmer mentioned this pull request Aug 28, 2017
Add error overlay like create-react-app's jaredpalmer/razzle#284
Closed

jaredpalmer mentioned this pull request Aug 29, 2017
Make error overlay filename configurable #3028
Merged

gaearon mentioned this pull request Sep 8, 2017
Runtime error overlay does not disappear when fixed with HMR #3096
Closed

tharakawj mentioned this pull request Sep 16, 2017
Link local react-error-overlay package in kitchensink test #3139
Merged

renovateBot mentioned this pull request Feb 2, 2018
Update dependency react-scripts to v1.1.1 - autoclosed kkostov/react-calendar-icon#32
Closed

lockBot locked and limited conversation to collaborators Jan 20, 2019

Uh oh!

Uh oh!

Conversation

tharakawj commented Jun 11, 2017

Uh oh!

gaearon commented Jun 11, 2017

Uh oh!

gaearon commented Jun 27, 2017

Uh oh!

tharakawj commented Jun 28, 2017

Uh oh!

tharakawj commented Jul 9, 2017

Uh oh!

gaearon commented Jul 9, 2017

Uh oh!

gaearon commented Jul 12, 2017

Uh oh!

tharakawj commented Jul 13, 2017

Uh oh!

tharakawj commented Jul 15, 2017

Uh oh!

cr101 commented Jul 17, 2017

Uh oh!

gaearon commented Jul 18, 2017

Uh oh!

gaearon commented Aug 26, 2017

Uh oh!

tharakawj commented Aug 27, 2017

Uh oh!

gaearonAug 26, 2017

Choose a reason for hiding this comment

Uh oh!

tharakawjAug 27, 2017

Choose a reason for hiding this comment

Uh oh!

gaearonAug 27, 2017

Choose a reason for hiding this comment

Uh oh!

gaearon commented Aug 28, 2017

Uh oh!

gaearon commented Aug 28, 2017

Uh oh!

jaredpalmer commented Aug 28, 2017

Uh oh!

gaearon commented Aug 28, 2017

Uh oh!

tharakawj commented Aug 28, 2017

Uh oh!

KyleAMathews commented Aug 28, 2017

Uh oh!

gaearon commented Aug 28, 2017

Uh oh!

jaredpalmer commented Aug 28, 2017• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Build Errors ✅

Runtime Errors ❌

Uh oh!

gaearon commented Aug 28, 2017

Uh oh!

jaredpalmer commented Aug 28, 2017

Uh oh!

gaearon commented Aug 28, 2017• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

jaredpalmer commented Aug 28, 2017•
edited
Loading

gaearon commented Aug 28, 2017•
edited
Loading