Skip to content

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

@Jack-Works

Description

@Jack-Works
Contributor

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.

image

The expected behavior

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

Activity

bvaughn

bvaughn commented on Oct 26, 2020

@bvaughn
Contributor

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

Jack-Works commented on Oct 26, 2020

@Jack-Works
ContributorAuthor

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

Jack-Works

Jack-Works commented on Oct 26, 2020

@Jack-Works
ContributorAuthor

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

bvaughn

bvaughn commented on Oct 26, 2020

@bvaughn
Contributor

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

Jack-Works

Jack-Works commented on Oct 27, 2020

@Jack-Works
ContributorAuthor

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

self-assigned this
on Oct 27, 2020
bvaughn

bvaughn commented on Oct 27, 2020

@bvaughn
Contributor

Excellent! Thank you 😄

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:

// Two seconds because RN had issues with quick retries.
retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);

Jack-Works

Jack-Works commented on Oct 27, 2020

@Jack-Works
ContributorAuthor

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

bvaughn commented on Oct 27, 2020

@bvaughn
Contributor

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

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

bvaughn commented on Oct 27, 2020

@bvaughn
Contributor

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.

19 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @bvaughn@Jack-Works@croraf@solarstar101

        Issue actions

          Bug: react-devtools prints too many logs of WS failed · Issue #20095 · facebook/react