search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
229.3k stars 46.96k forks source link

[DevTools Bug]: Blank tools localhost only #22577

Closed MadPeachTM closed 3 years ago

MadPeachTM commented 3 years ago

Website or app

google.com

Repro steps

This started after last update 4.20.0 image image

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

github-actions[bot] commented 3 years ago

@FanatiG: We're sorry you've seen this error. ❤️

Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

github-actions[bot] commented 3 years ago

Thank you for providing repro steps! Re-opening issue now for triage.

MadPeachTM commented 3 years ago

Sorry for the "Website or app google.com" But it just didnt work with "Website or app localhost"

Sayvai commented 3 years ago

I've just stumbled across the same issue, but i think i may have managed to find a workaround to the bug for now, which is to navigate to another external third-party React website (eg, ReactJS, Netflix, CNN), and then navigate back to your localhost site, while keeping Chrome DevTools React Developer Tools open throughout the process.

Give that a go?

Note: Not all external public third party React sites work with the workaround approach. So for example, navigating to other public React sites such as Facebook, Instagram, and Paypal does not appear to work as a temporary workaround.

Chrome @ 94.0.4606.81 React Developer Tools @ 4.20.0 (10/15/2021)

MadPeachTM commented 3 years ago

I've tried with netflix but it doesn't seem to work, sadly =( thanks for your advise anyways! may be it will help someone else

Sayvai commented 3 years ago

I've tried with netflix but it doesn't seem to work, sadly =( thanks for your advise anyways! may be it will help someone else

I've updated my original comment, with the addition of CNN React site, which is proven to also reliably work as a workaround for me, so try that too.

But also found it does not work with the PayPal React site as a workaround.

Besides that, i agree, this is a regression bug 🤔

MadPeachTM commented 3 years ago

Sadly didn't work as well

Sayvai commented 3 years ago

Does React Dev Tools load up elements when you navigate to ReactJS, Netflix or CNN? If not then, here is a refined step-by-step set of instructions for a workaround:

bvaughn commented 3 years ago

The reason the GitHub bot asked for a URL that we could access (not "localhost") is because there might be something specifically going on with your local website version. Localhost apps in general work fine with DevTools. In fact, we use a test application running on localhost to build DevTools features.

So the first question I would ask is: Does React DevTools work on other sites? For example, if you visit reactjs.org, does DevTools work? If so, this may suggest there's something specific with your website.

If not, it may suggest that you have another extension installed that's interfering. If this is the case, it would be helpful for you to tell us which extensions you have installed (you can view this in about:extensions).

Sayvai commented 3 years ago

This bug also affected my colleague as of today, where the workaround i posted resolved the issue for now, for both me and my colleague, and his version of React Dev Tools is also at 4.20.0.

Besides, as requested, here's my list of enabled Chrome extensions:

Chrome @ 94.0.4606.81 React Developer Tools @ 4.20.0 (10/15/2021)

MadPeachTM commented 3 years ago

The reason the GitHub bot asked for a URL that we could access (not "localhost") is because there might be something specifically going on with your local website version. Localhost apps in general work fine with DevTools. In fact, we use a test application running on localhost to build DevTools features.

So the first question I would ask is: Does React DevTools work on other sites? For example, if you visit reactjs.org, does DevTools work? If so, this may suggest there's something specific with your website.

If not, it may suggest that you have another extension installed that's interfering. If this is the case, it would be helpful for you to tell us which extensions you have installed (you can view this in about:extensions).

Yes React DevTools work on other sites. I've tried to disable all extensions, nothing changed. DevTools worked perfectly fine until last friday (15.10) and since then nothing changed in my project.

bvaughn commented 3 years ago

cc @jstejada in case this could be related to #22517?

jstejada commented 3 years ago

@bvaughn yeah sounds like this might be related, I'll investigate

jstejada commented 3 years ago

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

MadPeachTM commented 3 years ago

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

Yes and yes

Sayvai commented 3 years ago

@FanatiG @Sayvai, to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally?

@FanatiG is this happening to you on Chrome?

@jstejada - The scenario you've described is correct. Essentially the Component Tree never loads, until i apply my workaround.

jstejada commented 3 years ago

@FanatiG @Sayvai

do you by any chance have another repro of this in any other website that isn't your localhost development app? or a way to reproduce with your local app?

MadPeachTM commented 3 years ago

@FanatiG @Sayvai

do you by any chance have another repro of this in any website that isn't your localhost development app? or a way to reproduce with your local app?

Sadly, i can't provide you a webside for NDA reasons

bvaughn commented 3 years ago

@FanatiG We generally ask people to try to reduce bugs to a minimal repro case. Often this is enough for them to remove any sensitive stuff from the app. (Often folks will even realize the specific cause of a bug while doing this.)

Can you try stripping things out of your app until it works to see if you can create a repro like this for us?

jstejada commented 3 years ago

@FanatiG like Brian mentioned, a barebones version of the an app that we could run where it still reproduces would be really helpful. Or even if you can get a repro in a CodeSandbox app?

jstejada commented 3 years ago

I know you've already listed the extensions you've installed, but just to confirm, @FanatiG, @Sayvai, you only have 1 copy of React Developer Tools installed, is that correct?

MadPeachTM commented 3 years ago

I know you've already listed the extensions you've installed, but just to confirm, @FanatiG, @Sayvai, you only have 1 copy of React Developer Tools installed, is that correct?

Yes

MadPeachTM commented 3 years ago

@FanatiG We generally ask people to try to reduce bugs to a minimal repro case. Often this is enough for them to remove any sensitive stuff from the app. (Often folks will even realize the specific cause of a bug while doing this.)

Can you try stripping things out of your app until it works to see if you can create a repro like this for us?

I'm not sure it is possible to strip project since it is just too big and have too many modules. But you gave me an idea and i tried to run clean npx-create-react-app and it worked. I will try to get more info from my coworkers tomorrow, since i have no info about changes atm and it's too late to ask (it's past work time).

Sayvai commented 3 years ago

I know you've already listed the extensions you've installed, but just to confirm, @FanatiG, @Sayvai, you only have 1 copy of React Developer Tools installed, is that correct?

@jstejada - correct.

On your other question around reproducing minimal app, another NDA, that's also actually quite complex, as it's a large mono-repo with aplenty of inter-dependencies, and reproducing such an app to a minimal level is tricky to say the least.

I just had a theory that React Dev Tools may now be in conflict with certain node module(s) perhaps, or in conflict with the webpack / typescript transpiled code. It's just a theory.

But then with the workaround which works for me and my colleague, the component tree loads again on the target app. I'm not sure what to make of that.

Sayvai commented 3 years ago

The same issue also occurs on a remote hosted version of the app, which is internal / behind a firewall, not public.

So for me, it isn't necessarily narrowed down to a localhost server setup to say.

MadPeachTM commented 3 years ago

The same issue also occurs on a remote hosted version of the app, which is internal / behind a firewall, not public.

So for me, it isn't necessarily narrowed down to a localhost server setup to say.

I forgot about it, same here

bvaughn commented 3 years ago

Understood that creating a smaller repro is a lot of work, but it needs to be done by someone (either you or us) as part of identifying and fixing a bug. We generally ask that people reporting bugs create the repro because sometimes this reveals an underlying problem in the app/user code itself, but also because you better understand the app (and how to quickly strip unnecessary parts out of it).

Sayvai commented 3 years ago

Understood that creating a smaller repro is a lot of work, but it needs to be done by someone (either or us) as part of identifying and fixing a bug. We generally ask that people reporting bugs create the repro because sometimes this reveals an underlying problem in the app/user code itself, but also because you better understand the app (and how to quickly strip unnecessary parts out of it).

@bvaughn - I totally understand your point. Time-permitting, I'll see what i can do. I am thinking of creating a new React app off create-react-app to scaffold the initial foundations, and then try to mimick as best i can with the organisational setup / configurations, especially the dependencies / compiler / transpiler configurations.

jstejada commented 3 years ago

thanks for looking into it @FanatiG and @Sayvai!

jstejada commented 3 years ago

@FanatiG @Sayvai actually, if you can, one thing we could do to rule out my changes is to do the following:

Let me know if you're able to do this and verify that the issue is still occurring?

Sayvai commented 3 years ago

@FanatiG @Sayvai actually, if you can, one thing we could do to rule out my changes is to do the following:

  • I created a branch where I reverted my changes related to detecting duplicate extensions here: https://github.com/jstejada/react/tree/repro-22572, and I built a version of DevTools with those changes reverted.
  • Could you download this build of DevTools: ReactDevTools.zip (or build it yourself off of this branch) install it, and check if the problem still reproduces for you?
  • Make sure you've disabled your current version of DevTools before installing this one. In order to install it, you should be able to drag and drop the zip file into chrome://extensions.

Let me know if you're able to do this and verify that the issue is still occurring?

@jstejada - look like you've managed to narrow down the root cause to the selective changes around detecting duplicate extensions with which you've reverted to in the test version of the extension. As the described issue no longer persists, and the component tree loads instantly, on both localhost and the internal non-public remotely hosted app 👏

Prior to installing your reverted version, i was able to reproduce the issue on the stable release @ 4.20.0, on both environments; local and non-public hosted version of my organisational app.

Same issue also resurfaced when i disabled your test version, and re-enabled the stable release version.

Hopefully the results of this test will further help isolate the issue.

MadPeachTM commented 3 years ago

@FanatiG @Sayvai actually, if you can, one thing we could do to rule out my changes is to do the following:

  • I created a branch where I reverted my changes related to detecting duplicate extensions here: https://github.com/jstejada/react/tree/repro-22572, and I built a version of DevTools with those changes reverted.
  • Could you download this build of DevTools: ReactDevTools.zip (or build it yourself off of this branch) install it, and check if the problem still reproduces for you?
  • Make sure you've disabled your current version of DevTools before installing this one. In order to install it, you should be able to drag and drop the zip file into chrome://extensions.

Let me know if you're able to do this and verify that the issue is still occurring?

Same here. I've donwloaded your archive and it worked perfectly. Thanks!

Sayvai commented 3 years ago

@jstejada @bvaughn - i was on a lookout for other React websites (after some extensive searching) which emits the same behaviour, and i finally found a React website that you should be able to continuously reproduce the issue against, while using React Dev Tools on the stable version of 4.20.0.

The site is a well known public site targeted at Dev / Agile people like us (😅 ); Atlassian.

Also worthwhile noting that, i managed to apply my hacky workaround to resolve the issue on the above site. So it ticks off the similar behaviours i experienced.

Hopefully, this finding will help you in your endeavours and that you'll now be able to debug the issue off the Atlassian React website alone 🤞

Sayvai commented 3 years ago

Also, i realised i can only reproduce when opening a new tab, and then open React Dev Tools. But then i close Chrome Dev Tools while staying on Atlassian, and then re-open React Dev Tools, and then the Component Tree loads up this time.

Not sure how reliable this method is, but worth pointing out the observation, where opening a new Chrome tab each tab may be a more reliable approach to debug.

Sayvai commented 3 years ago

Also, i realised i can only reproduce when opening a new tab, and then open React Dev Tools. But then i close Chrome Dev Tools while staying on Atlassian, and then re-open React Dev Tools, and then the Component Tree loads up this time.

Not sure how reliable this method is, but worth pointing out the observation, where opening a new Chrome tab each tab may be a more reliable approach to debug.

@jstejada - Ok, i've managed to replicate the best workaround solution on my organisations' app too, both on localhost, and non-public hosted versions of the app.

To note again, the above instructions is carried out within the one and only same tab.

jstejada commented 3 years ago

@Sayvai thanks for confirming that the issue went away when you installed this version: ReactDevTools.zip

I'll go ahead and try to get a repro on the Atlassian site

jstejada commented 3 years ago

btw @Sayvai , @FanatiG , what version of React are you using?

jstejada commented 3 years ago

@Sayvai, unfortunately I can't seem to reproduce the issue on atlassian.com.

What I did:

After doing that the Components tree is always showing up, although sometimes it takes about a second for it to show. Are you always able to consistently reproduce on that site?

image image

MadPeachTM commented 3 years ago

btw @Sayvai , @FanatiG , what version of React are you using?

16.14.0

Sayvai commented 3 years ago

btw @Sayvai , @FanatiG , what version of React are you using?

16.11.0

Sayvai commented 3 years ago

@Sayvai, unfortunately I can't seem to reproduce the issue on atlassian.com. I am:

  • Opening a new tab
  • Visit atlassian.com
  • Open Chrome Dev Tools
  • Open Components Tab

After doing that the Components tree is always showing up, although sometimes it takes about a second for it to show. Are you always able to consistently reproduce on that site?

image image

@jstejada - Not 100% reproducible all the time, more like 95%.

So i've followed what you've done, and it loads the component tree first time. 🟢

But then i close that tab, and open a new tab, and follow what you've done again, and this time the Component Tree does not load up. 🔴

Not sure how many time you've tried. But i assume we're both using latest Chrome, and using React Dev Tools 4.20.0 (not your reverted changes version!)

jstejada commented 3 years ago

Not sure how many time you've tried. But i assume we're both using latest Chrome, and using React Dev Tools 4.20.0 (not your reverted changes version!)

I'll keep trying! and yes I'm using the latest chrome and React Dev Tools 4.20.0 (as I am showing in the screenshot in my comment)

Sayvai commented 3 years ago

And it looks like Atlassian is developed on React version 16.14.0.

So not sure if you have been trying to repro on this particular React version also, locally.

Sayvai commented 3 years ago

@jstejada - Just to prove that i'm sane (not insane 😅 ), here's a GIF screen recording demo i've just recorded, reproducing issue on the public Atlassian React website 👇

2021-10-18 20 48 59

Sayvai commented 3 years ago

And it looks like Atlassian is developed on React version 16.14.0.

So not sure if you have been trying to repro on this particular React version also, locally.

Scrap the other earlier comment around React versions, as i've just noticed the following public sites that have had no issues on loading the Component Trees first time, are using varying React versions:

jstejada commented 3 years ago

thanks @Sayvai for confirming!

quick question, on atlassian.com, did you confirm if the issue also reliably gets fixed with my custom build: ReactDevTools.zip?

Sayvai commented 3 years ago

thanks @Sayvai for confirming!

quick question, on atlassian.com, did you confirm if the issue also reliably gets fixed with my custom build: ReactDevTools.zip?

When enabled your modded version, disabled stable version, it appears to be reliably fixed 100% of the time.

Then when i reverted back the configurations, and what i found with Atlassian site is that it failed to load the component like 25% of the time, while it did load the tree on first load at like 75% of the time from around 20 attempts..

jstejada commented 3 years ago

thanks @Sayvai! and on your local application it fails 100% of the time when using v4.20.0, correct?

I am still unable to reproduce on atlassian.com (and i'm wondering if that might be a separate issue), so i think it would still be helpful if you could provide a small app or code sandbox where the issue reproduces 100% of the time like it does for your app

Sayvai commented 3 years ago

Yeah, Atlassian could be a separate issue. Haven't retried local application since a few hours or so ago.

I'll think about the app mimick-like re-creation, time-permitting of course, also provided that i am even able to provide a reproducible issue from that.

jstejada commented 3 years ago

@Sayvai, @FanatiG, another thing to check is:

when the components tree fails to load, do you see any error messages in the console?