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

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

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

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.

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.