Bug: react-devtools prints too many logs of WS failed

[Jack-Works]

React version: Not related

The current behavior

We're following this to set up react-devtools.

If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.

The standalone version works well, but if the standalone version is not started, react-devtools will try to connect ws://localhost:8097/ and prints too many logs.

The expected behavior

I hope react-devtools can only print 1 error message if it is not connected to the standalone version.

[bvaughn]

The standalone version works well, but if the standalone version is not started, react-devtools will try to connect ws://localhost:8097/ and prints too many logs.

Can you share a repro of this?

To my knowledge, running the standalone DevTools with Safari would just show a single error message if the standalone DevTools application wasn't running:

Failed to load resource: Could not connect to the server.

That's because loading the "backend" JS (the thing that sets up the WebSocket connection) is done by a <script> tag:

<script src="http://localhost:8097"></script>

The standalone DevTools serves the "backend" JS over HTTP (port 8097 by default) so if it's not running, Safari wouldn't be able to load the JS in the first place.

[Jack-Works]

We're using "import" with webpack. In our environment, a script tag is also not possible.

[Jack-Works]

Do you still need a repro? If so I'll try to make one later

[bvaughn]

Yes. Please provide a repro. Maybe we can convert it to a fixture.

[Jack-Works]

https://codesandbox.io/s/determined-butterfly-6xqnj?file=/src/index.js

@bvaughn hi, as you can see, in this sandbox, every 5 sec an error will be printed

[bvaughn]

Excellent! Thank you :smile:

This Sandbox confirms what I suspected: The error isn't actually being logged by DevTools. It's coming from the browser (Chrome in my case) any time a connection fails. I am not aware of any way to block or silence it programmatically.

You can filter the messages out from your console by right clicking on "backend.js" and clicking "Hide messages from..." if that's something you'd like to do.

We could also make the delay which DevTools uses between retrying to establish the connection configurable. Right, DevTools attempts to re-connect every two seconds: https://github.com/facebook/react/blob/4e5d7faf54b38ebfc7a2dcadbd09a25d6f330ac0/packages/react-devtools-core/src/backend.js#L71-L72

[Jack-Works]

Only WebSocket connection failure cannot be programmatic silenced or any connection? If HTTP failure can be silenced, maybe devtools can send HEAD request before the connection to check if standalone devtool is opened.

[bvaughn]

To my knowledge, it applies to any type of request. Here are some related browser issues:

• https://bugs.chromium.org/p/chromium/issues/detail?id=124534#c12
• https://bugs.webkit.org/show_bug.cgi?id=37215

I think a HEAD request would also log an error. (You can try it yourself and confirm.)

const http = new XMLHttpRequest();
http.open('HEAD', 'http://localhost:8097/');
http.onreadystatechange = function() {
  // ...
};
http.send();

[bvaughn]

The file you're importing is primarily intended for React Native, where the DevTools backend needs to be embedded in the runtime. Generally Safari use is done by adding a <script> tag that loads the backend via an HTTP server the standalone DevTools provides.

Currently you are embedding the index file which automatically tries to connect (and retries after an interval on failure). One final option you may consider would be to import the connect method itself and manually start the connection when you think the frontend is running:

import {connectToDevTools} from "react-devtools-core/backend";

// If you think it's running...
connectToDevTools();

But I don't know how you'd determine it was running.

[bvaughn]

I think #20107 is about the best we can do from our end.

[Jack-Works]

I think a HEAD request would also log an error. (You can try it yourself and confirm.)

I found HEAD request won't log error in my console. (Chrome)

I think #20107 is about the best we can do from our end.

Cool, thanks!

[bvaughn]

I think a HEAD request would also log an error. (You can try it yourself and confirm.)

I found HEAD request won't log error in my console. (Chrome)

Show me the code you're running, because I tried it myself and it does log an error in the console if the connection is unsuccessful.

[Jack-Works]

[Jack-Works]

Or what if set xhr.timeout to a very small value (e.g. 100 ms)? Does it log if the request was canceled?

[bvaughn]

That doesn't match expected behavior or the behavior I'm seeing when I try it myself:

Are you sure you don't have something filtered out? (Do you see "1 hidden" to the right of the "Default levels" drop down?

[Jack-Works]

Oh I select "Hide network" in my daily life developing so it gets filtered.

But I found the timeout the trick does work. If the request is canceled, even "Hide network" is not selected, there is no log for it.

[bvaughn]

Can you show me what you mean by "the timeout trick"? For me, adding a timeout (even a large one) does not prevent an error from being logged immediately.

[Jack-Works]

Oh strange... I guess maybe I installed too many browser extensions so that accessing localhost:port will have a big delay so I can use timeout before the network error...

[bvaughn]

#20107 has been merged and will be released with the next DevTools release. That's all I'm going to do with this issue. If you'd like to look into additional potential updates, feel free to tag me on PRs.

[croraf]

This is really unfortunate :| . Any progress on this?

I'm using react-devtools to be able to access the app which is in the iframe. Is there any other way for using react devtools with the iframe?

Not everybody in the team uses react-devtools so this issue will be really annoying for them.

EDIT: I did the following workaround. I have a different npm script that adds react-devtools in the webpack config entry list. This way the devs that want to use react-devtools use this script instead of npm start

[solarstar101]

This is really unfortunate :| . Any progress on this?

I'm using react-devtools to be able to access the app which is in the iframe. Is there any other way for using react devtools with the iframe?

Not everybody in the team uses react-devtools so this issue will be really annoying for them.

EDIT: I did the following workaround. I have a different npm script that adds react-devtools in the webpack config entry list. This way the devs that want to use react-devtools use this script instead of npm start

can you please post more details as to what you did currently having the same issue and its quite annoying thank you so much!

any progress on this issue or workaround that the react team can post?