-
Notifications
You must be signed in to change notification settings - Fork 49k
Not planned
Labels
Component: Developer ToolsResolution: StaleAutomatically closed due to inactivityAutomatically closed due to inactivity
Description
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.
croraf, fellowseb and Toumash
Metadata
Metadata
Assignees
Labels
Component: Developer ToolsResolution: StaleAutomatically closed due to inactivityAutomatically closed due to inactivity
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
bvaughn commentedon Oct 26, 2020
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:
That's because loading the "backend" JS (the thing that sets up the
WebSocket
connection) is done by a<script>
tag: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 commentedon Oct 26, 2020
We're using "import" with webpack. In our environment, a script tag is also not possible.
Jack-Works commentedon Oct 26, 2020
Do you still need a repro? If so I'll try to make one later
bvaughn commentedon Oct 26, 2020
Yes. Please provide a repro. Maybe we can convert it to a fixture.
Jack-Works commentedon Oct 27, 2020
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 commentedon Oct 27, 2020
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:
react/packages/react-devtools-core/src/backend.js
Lines 71 to 72 in 4e5d7fa
Jack-Works commentedon Oct 27, 2020
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 commentedon Oct 27, 2020
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.)
bvaughn commentedon Oct 27, 2020
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:
But I don't know how you'd determine it was running.
19 remaining items