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

duvet86 · 2017-09-04T11:53:51Z

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

After applying 0.54:

Cheers
Luca

facebook-github-bot · 2017-09-04T11:54:15Z

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 · 2017-09-04T11:59:42Z

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

gaearon · 2017-09-04T20:07:33Z

Why are unit tests failing?

duvet86 · 2017-09-05T10:58:56Z

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 · 2017-09-05T11:57:14Z

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

duvet86 · 2017-09-05T12:19:18Z

My steps are:

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

This is the result:

What am I doing wrong?

Timer · 2017-09-05T12:29:11Z

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

duvet86 · 2017-09-05T12:57:15Z

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

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

Timer · 2017-09-05T14:36:55Z

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 · 2017-09-06T08:55:44Z

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

This reverts commit 6deaffb.

gaearon

Style nits.

gaearon · 2017-09-06T14:43:44Z

packages/react-error-overlay/src/components/Collapsible.js

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

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


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).

Without the import flow fails:

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

I could use this syntax: React$Element.

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.

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

gaearon · 2017-09-06T14:43:57Z

packages/react-error-overlay/src/components/ErrorOverlay.js

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

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


Same here (and everywhere below).

gaearon · 2017-09-06T14:44:35Z

packages/react-error-overlay/src/containers/RuntimeError.js

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

+export type { ErrorRecord };


Can you please just add export to type definition itself?

Apparently I can't.

Or you probably meant:

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

Yes, that's what I meant.

gaearon · 2017-09-06T14:45:30Z

packages/react-error-overlay/src/containers/RuntimeErrorContainer.js

@@ -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';


Could you please always add newline before import types?

import x from 'x'; import y from 'y'; import type { z } from 'z'; // code

gaearon · 2017-09-06T14:45:42Z

packages/react-error-overlay/src/containers/StackFrame.js

@@ -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';


Same here (and below).

gaearon · 2017-09-07T15:03:13Z

packages/react-error-overlay/src/containers/StackFrame.js

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

  openInEditor = () => {
-    if (!this.canOpenInEditor()) {
+    if (!this.props.launchEditorEndpoint) {


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

That was a stupid hack to fix this:

Basically launchEditorEndpoint prop is defined as nullable but flow doesn't understand that the check if (!this.props.launchEditorEndpoint) gets done in canOpenInEditor()

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

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

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.

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.

Sorry still not working:

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.

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

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}/...` )

Thank you, now I understand.

outdated

gaearon · 2017-09-11T12:14:43Z

packages/react-error-overlay/src/containers/StackFrame.js

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

-  canOpenInEditor() {
+  getEndpointUrl() {


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

gaearon · 2017-09-11T12:15:02Z

packages/react-error-overlay/src/containers/StackFrame.js

    }
    // Code is in a real file
-    return true;
+    return this.props.launchEditorEndpoint;


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

Why making the distinction between null and undefined?

gaearon · 2017-09-11T12:15:25Z

packages/react-error-overlay/src/containers/StackFrame.js

  }

  openInEditor = () => {
-    if (!this.canOpenInEditor()) {
+    const endpointUrl = this.getEndpointUrl();
+    if (endpointUrl == null) {


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

gaearon · 2017-09-11T12:15:30Z

packages/react-error-overlay/src/containers/StackFrame.js

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

-    const canOpenInEditor = this.canOpenInEditor();
+    const canOpenInEditor = this.getEndpointUrl() != null;


duvet86 · 2017-09-11T13:16:40Z

Hi, why making the distinction between null and undefined?

gaearon · 2017-09-11T13:43:13Z

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

gaearon · 2017-09-11T13:43:38Z

Have you verified it still works as expected?

duvet86 · 2017-09-11T14:18:22Z

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 · 2017-09-11T14:20:56Z

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 · 2017-09-11T14:28:33Z

gaearon · 2017-09-11T16:20:54Z

This is great. Thanks!

…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)

* 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.

…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) ...

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

6deaffb

facebook-github-bot added the CLA Signed label Sep 4, 2017

duvet86 added 2 commits September 6, 2017 21:59

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

ef9e90f

This reverts commit 6deaffb.

Fixed unit tests.

15129c9

Timer mentioned this pull request Sep 6, 2017

Add .gitattributes file #3080

Closed

gaearon previously requested changes Sep 6, 2017

View reviewed changes

Updated code as per code review.

a784af7

gaearon reviewed Sep 7, 2017

View reviewed changes

Fixed code as per code review.

a910670

gaearon reviewed Sep 11, 2017

View reviewed changes

Updated the code as per review.

fc7c742

gaearon added this to the 1.0.13 milestone Sep 11, 2017

gaearon added the tag: internal label Sep 11, 2017

gaearon approved these changes Sep 11, 2017

View reviewed changes

gaearon merged commit eed708a into facebook:master Sep 11, 2017

gaearon mentioned this pull request Sep 11, 2017

Update react-error-overlay to latest Flow #3017

Closed

lock bot locked and limited conversation to collaborators Jan 20, 2019

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

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

Conversation

duvet86 commented Sep 4, 2017

facebook-github-bot commented Sep 4, 2017

facebook-github-bot commented Sep 4, 2017

gaearon commented Sep 4, 2017

duvet86 commented Sep 5, 2017

Timer commented Sep 5, 2017 • edited Loading

duvet86 commented Sep 5, 2017

Timer commented Sep 5, 2017

duvet86 commented Sep 5, 2017

Timer commented Sep 5, 2017 • edited Loading

duvet86 commented Sep 6, 2017

gaearon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duvet86 Sep 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Sep 11, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duvet86 commented Sep 11, 2017

gaearon commented Sep 11, 2017

gaearon commented Sep 11, 2017

duvet86 commented Sep 11, 2017

gaearon commented Sep 11, 2017

duvet86 commented Sep 11, 2017

gaearon commented Sep 11, 2017

Timer commented Sep 5, 2017 •

edited

Loading

Timer commented Sep 5, 2017 •

edited

Loading

duvet86 Sep 9, 2017 •

edited

Loading

gaearon Sep 11, 2017 •

edited

Loading