Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated react-error-overlay to latest Flow (0.54.0) #3065

Merged
merged 6 commits into from
Sep 11, 2017

Conversation

duvet86
Copy link
Contributor

@duvet86 duvet86 commented Sep 4, 2017

Update react-error-overlay package to the latest flow, version 0.54.0.
Few unit tests are still failing. See screenshots:
Before 0.54:
image

After applying 0.54:
image

Cheers
Luca

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@gaearon
Copy link
Contributor

gaearon commented Sep 4, 2017

Why are unit tests failing?

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 5, 2017

Hi, the unit tests that are failing are the same that were failing on the master branch.
Regarding the reason why they are failing I am investigating and fixing them now.
Cheers

@Timer
Copy link
Contributor

Timer commented Sep 5, 2017

They seem to be passing in master. Is your tree clean and have you ran npm install?

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 5, 2017

My steps are:

  • cloning create-react-app
  • cd into react-error-overlay
  • npm install
  • npm test

This is the result:
image

What am I doing wrong?

@Timer
Copy link
Contributor

Timer commented Sep 5, 2017

You must run npm install in the root of the directory, you should not be running it within react-error-overlay.

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 5, 2017

I'm running npm install in the root folder.
Then if I do npm test in the root folder I get:
image

If I run npm test into react-overlay-error folder I get the previous output.
image

@Timer
Copy link
Contributor

Timer commented Sep 5, 2017

That's really odd, that's from a fresh clone?
I'm not sure what's going on ... maybe some weird windows quirks due to line endings?

We might need to add a .gitattributes file to force files to be checked out using LF.
Or maybe Jest needs to normalize endings .. (does Jest already normalize endings?)

Can you test if checking out as LF fixes this?
You should be able to do git config --global core.autocrlf false and make a fresh clone, followed by trying again.

Make sure you run git config --global core.autocrlf true after trying this!

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 6, 2017

You are absolutely right. Adding core.autocrlf false fixes the issue and all the unit tests pass.
I'll fix and commit the code tonight.
Cheers Luca

@Timer Timer mentioned this pull request Sep 6, 2017
gaearon
gaearon previously requested changes Sep 6, 2017
Copy link
Contributor

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style nits.

@@ -9,6 +9,7 @@

/* @flow */
import React, { Component } from 'react';
import type { Element } from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please leave them typed as React.Element instead of import type? For explicitness (Element is a global in Flow that means DOM element).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without the import flow fails:
image

Flow doc suggests to import React as a namespace with import * as React from 'react' instead of as a default with import React from 'react'.
https://flow.org/en/docs/react/components/
But I thought it was a big change and I decided not to do it.
Cheers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could use this syntax: React$Element.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I guess you'd have to import * as React from 'react' at which point you'd bump into a false positive warning about accessing PropTypes in 15. Let's keep it this way then.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you do import type { Element as ReactElement } from 'react'?

@@ -9,6 +9,7 @@

/* @flow */
import React, { Component } from 'react';
import type { Node } from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here (and everywhere below).

@@ -65,4 +65,5 @@ function RuntimeError({ errorRecord, launchEditorEndpoint }: Props) {
);
}

export type { ErrorRecord };
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please just add export to type definition itself?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently I can't.
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or you probably meant:

export type ErrorRecord = {|
  error: Error,
  unhandledRejection: boolean,
  contextSize: number,
  stackFrames: StackFrame[],
|};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's what I meant.

@@ -14,8 +14,19 @@ import CloseButton from '../components/CloseButton';
import NavigationBar from '../components/NavigationBar';
import RuntimeError from './RuntimeError';
import Footer from '../components/Footer';
import type { ErrorRecord } from './RuntimeError';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please always add newline before import types?

import x from 'x';
import y from 'y';

import type { z } from 'z';

// code

@@ -12,6 +12,7 @@ import React, { Component } from 'react';
import CodeBlock from './StackFrameCodeBlock';
import { getPrettyURL } from '../utils/getPrettyURL';
import { darkGray } from '../styles';
import type { StackFrame as StackFrameType } from '../utils/stack-frame';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here (and below).

@@ -74,7 +88,7 @@ class StackFrame extends Component {
}

openInEditor = () => {
if (!this.canOpenInEditor()) {
if (!this.props.launchEditorEndpoint) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this change? Seems like it's more permissive than it used to be.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was a stupid hack to fix this:
image
Basically launchEditorEndpoint prop is defined as nullable but flow doesn't understand that the check if (!this.props.launchEditorEndpoint) gets done in canOpenInEditor()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I have no idea how to fix this other than adding the same condition twice.

if (!this.props.launchEditorEndpoint && !this.canOpenInEditor()) {
      return;
    }

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can replace canOpen function with a getEditorEndpoint(): null | string function that returns null if it can't open. Then you can use this function in both places. Since it returns an endpoint you can exit if it's null early and now Flow knows it's a string.

Copy link
Contributor Author

@duvet86 duvet86 Sep 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I don't understand, sorry.
This is what I've done but it doesn't work and it still more permissive than before.
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry still not working:
image

Copy link
Contributor

@gaearon gaearon Sep 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not working because you're not using the return value and instead read the same thing again from props. Flow doesn't know the props are immutable so it's bailing out thinking they might have changed. I am suggesting to use the return value of getEditorEndpoint that you currently ignore. If you compare it against null first and exit if it is, but then use it Flow will know it can't possibly be null.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry again, I'm even using the double equals to check for undefined and null but:
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are calling the function twice. Flow can’t know that the value hasn’t changed since last call.

You need to do this:

const endpointUrl = this.getEndpointUrl();
if (endpointUrl === null) {
  return;
}

// ...

// By now Flow knows endpointUrl can't possibly be null
fetch(
  `${endpointUrl}/...`
)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, now I understand.

@@ -54,43 +68,45 @@ class StackFrame extends Component {
}));
};

canOpenInEditor() {
getEndpointUrl() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please let's explicitly type this as : string | null.

}
// Code is in a real file
return true;
return this.props.launchEditorEndpoint;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add || null here so that it falls back to explicit null for bad values.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why making the distinction between null and undefined?

}

openInEditor = () => {
if (!this.canOpenInEditor()) {
const endpointUrl = this.getEndpointUrl();
if (endpointUrl == null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then we can use strict === null check here.

@@ -152,12 +168,10 @@ class StackFrame extends Component {
}
}

const canOpenInEditor = this.canOpenInEditor();
const canOpenInEditor = this.getEndpointUrl() != null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here.

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 11, 2017

Hi, why making the distinction between null and undefined?

@gaearon
Copy link
Contributor

gaearon commented Sep 11, 2017

It's easier to know there is just one "bad" value than two. And types can enforce that.

@gaearon
Copy link
Contributor

gaearon commented Sep 11, 2017

Have you verified it still works as expected?

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 11, 2017

How do I verify that it works as expected?
I create an app with my branch and I break the code to see if error gets displayed as expected?

@gaearon
Copy link
Contributor

gaearon commented Sep 11, 2017

You can just build it (npm start in packages/react-error-overlay), then npm start in the root. Then edit packages/react-scripts/template/src/App.js to throw a runtime exception and check that it works.

@duvet86
Copy link
Contributor Author

duvet86 commented Sep 11, 2017

image
image

@gaearon gaearon added this to the 1.0.13 milestone Sep 11, 2017
@gaearon gaearon merged commit eed708a into facebook:master Sep 11, 2017
@gaearon
Copy link
Contributor

gaearon commented Sep 11, 2017

This is great. Thanks!

matart15 pushed a commit to matart15/create-react-app that referenced this pull request Sep 13, 2017
…react-app

* 'master' of https://github.com/facebookincubator/create-react-app:
  Resolved issue facebook#2971 (facebook#2989)
  Revert "run npm 5.4.0 in CI (facebook#3026)" (facebook#3107)
  Updated react-error-overlay to latest Flow (0.54.0) (facebook#3065)
  Auto-detect running editor on Linux for error overlay (facebook#3077)
  Clean target directory before compiling overlay (facebook#3102)
  Rerun prettier and pin version (facebook#3058)
  Reload the page when an error has occurred (facebook#3098)
  run npm 5.4.0 in CI (facebook#3026)
  Unmapper Windows compatibility (facebook#3079)
  Update eslint-config npm install command (facebook#3072)
  Set travis config to use 'precise' ci environment
  Publish
  Changelog for 1.0.13
  Add missing slash
  Make error overlay filename configurable (facebook#3028)
  provide empty mock for child_process so importing libraries with it works (facebook#3033)
  Rename Overlay to ErrorOvelay (facebook#3051)
  Strip hash from chunk file name (facebook#3049)
  Fix error overlay 'Object.assign' issue in IE by including polyfills before webpack client (facebook#3046)
thongdong7 pushed a commit to thongdong7/create-react-app that referenced this pull request Sep 24, 2017
* Updated react-error-overlay to latest Flow (0.54.0)

* Revert "Updated react-error-overlay to latest Flow (0.54.0)"

This reverts commit 6deaffb.

* Fixed unit tests.

* Updated code as per code review.

* Fixed code as per code review.

* Updated the code as per review.
thongdong7 pushed a commit to thongdong7/create-react-app that referenced this pull request Sep 24, 2017
* Updated react-error-overlay to latest Flow (0.54.0)

* Revert "Updated react-error-overlay to latest Flow (0.54.0)"

This reverts commit 6deaffb.

* Fixed unit tests.

* Updated code as per code review.

* Fixed code as per code review.

* Updated the code as per review.
kasperpeulen pushed a commit to kasperpeulen/create-react-app that referenced this pull request Sep 24, 2017
* Updated react-error-overlay to latest Flow (0.54.0)

* Revert "Updated react-error-overlay to latest Flow (0.54.0)"

This reverts commit 6deaffb.

* Fixed unit tests.

* Updated code as per code review.

* Fixed code as per code review.

* Updated the code as per review.
suutari-ai referenced this pull request in andersinno/create-react-app-ai Jan 25, 2018
…pescript

* 'master' of https://github.com/wmonk/create-react-app-typescript: (265 commits)
  fix typo in changelog
  Update README For 2.13.0
  v2.13.0
  Remove tslint-loader from prod build (again)
  Include TypeScript as devDependency in boilerplate output
  Documented how to define custom module formats for the TypeScript compiler so that you can import images and other files (references wmonk#172)
  v2.12.0
  Update README For 2.12.0
  Update typescript to 2.6.2
  v2.11.0
  Update changelog for 2.11.0
  Fixed problem with tsconfig.json baseUrl and paths
  Update createJestConfig.js
  Update changelog for 2.10.0
  v2.10.0
  Readd transformIgnorePatterns
  Update react-dev-utils
  Update package.json dependencies
  Readd Missing raf Package
  Update JestConfig Creation
  Fix
  Fix Missing Variable
  Fix package.json
  Merge pull request wmonk#204 from StefanSchoof/patch-1
  Merge pull request wmonk#201 from StefanSchoof/patch-1
  Merge pull request wmonk#199 from DorianGrey/master
  Merge pull request wmonk#165 from johnnyreilly/master
  Publish
  Add 1.0.17 changelog (#3402)
  Use new WebpackDevServer option (#3401)
  Fix grammar in README (#3394)
  Add link to VS Code troubleshooting guide (#3399)
  Update VS Code debug configuration (#3400)
  Update README.md (#3392)
  Publish
  Reorder publishing instructions
  Changelog for 1.0.16 (#3376)
  Update favicon description (#3374)
  Changelog for 1.0.15 (#3357)
  Replace template literal; fixes #3367 (#3368)
  CLI@1.4.2
  Publish
  Add preflight CWD check for npm (#3355)
  Stop using `npm link` in tests (#3345)
  Fix for add .gitattributes file #3080 (#3122)
  Mention that start_url needs to be "." for client side routing
  start using npm-run-all to build scss and js (#2957)
  Updating the Service Worker opt-out documentation (#3108)
  Remove an useless negation in registerServiceWorker.js (#3150)
  Remove output.path from dev webpack config (#3158)
  Add `.mjs` support (#3239)
  Add documentation for Enzyme 3 integration (#3286)
  Make uglify work in Safari 10.0 - fixes #3280 (#3281)
  Fix favicon sizes value in manifest (#3287)
  Bump dependencies (#3342)
  recommend react-snap; react-snapshot isn't upgraded for React 16 (#3328)
  Update appveyor.cleanup-cache.txt
  Polyfill rAF in test environment (#3340)
  Use React 16 in development
  Use a simpler string replacement for the overlay
  Clarify the npm precompilation advice
  --no-edit
  Update `eslint-plugin-react` (#3146)
  Add jest coverage configuration docs (#3279)
  Update link to Jest Expect docs (#3303)
  Update README.md
  Fix dead link to Jest "expect" docs (#3289)
  v2.8.0
  Use production React version for bundled overlay (#3267)
  Add warning when using `react-error-overlay` in production (#3264)
  Add external links to deployment services (#3265)
  `react-error-overlay` has no dependencies now (#3263)
  Add click-to-open support for build errors (#3100)
  Update style-loader and disable inclusion of its HMR code in builds (#3236)
  Update url-loader to 0.6.2 for mime ReDoS vuln (#3246)
  Make error overlay to run in the context of the iframe (#3142)
  Upgrade to typescript 2.5.3
  Fix Windows compatibility (#3232)
  Fix package management link in README (#3227)
  Watch for changes in `src/**/node_modules` (#3230)
  More spec compliant HTML template (#2914)
  Minor change to highlight dev proxy behaviour (#3075)
  Correct manual proxy documentation (#3185)
  Improve grammar in README (#3211)
  Publish
  Fix license comments
  Changelog for 1.0.14
  BSD+Patents -> MIT (#3189)
  Add link to active CSS modules discussion (#3163)
  Update webpack-dev-server to 2.8.2 (#3157)
  Part of class fields to stage 3 (#2908)
  Update unclear wording in webpack config docs (#3160)
  Display pid in already running message (#3131)
  Link local react-error-overlay package in kitchensink test
  Resolved issue #2971 (#2989)
  Revert "run npm 5.4.0 in CI (#3026)" (#3107)
  Updated react-error-overlay to latest Flow (0.54.0) (#3065)
  Auto-detect running editor on Linux for error overlay (#3077)
  Clean target directory before compiling overlay (#3102)
  Rerun prettier and pin version (#3058)
  ...
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants