Could not connect to the devtools server
Facing this issue - Could not connect to the devtools server
can anyone guide me what needs to be done after the below 2 steps
npm run refine devtools init.
npm i @refinedev/cli@latest.
45 Replies
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, it seems you're trying to use the refine CLI and possibly facing issues with the devtools. However, there's no specific information about the devtools server issue you're facing in the provided extracts.
The refine CLI provides various commands for managing your refine project. You can check for updates to your refine packages using
npm run refine check-updates and update them with npm run refine update source (https://refine.dev/docs/packages/documentation/cli/).
If you're trying to use React Query Devtools with refine, it's important to note that React Query Devtools have been removed from the @refinedev/core and the configuration for the devtools is no longer supported. You can use the @tanstack/react-query-devtools in your app directly to use the devtools source (https://refine.dev/docs/api-reference/core/components/refine-config/).
If you're still facing issues, I would recommend checking the official refine documentation or reaching out to the refine community for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire•2y ago
hello @jash.s
npm run dev will automatically starts devtools.
can you share error output with us please ?wise-whiteOP•2y ago
I m using yarn
wise-whiteOP•2y ago
@alicanerdurmaz
"dev": "PORT=3001 env-cmd -f .env.dev refine start",
using yarn dev
absent-sapphire•2y ago
do you get any other error on Chrome console or terminal output ?
wise-whiteOP•2y ago
context.tsx:43 WebSocket connection to 'ws://localhost:5002/' failed:
this might be related to it
wise-whiteOP•2y ago
@alicanerdurmaz
absent-sapphire•2y ago
it's a long shot but can you try with npm please ?
wise-whiteOP•2y ago
@alicanerdurmaz Started the project with npm run dev , but still facing the same issue
absent-sapphire•2y ago
I will debug and return you as soon as possible. but also can you share "yarn run refine whoami" please
wise-whiteOP•2y ago
sorry not able to get this yarn run refine whoami
absent-sapphire•2y ago
npm run refine whoami ?
wise-whiteOP•2y ago
wise-whiteOP•2y ago
@alicanerdurmaz will this do ?
absent-sapphire•2y ago
yes thank you
wise-whiteOP•2y ago
your wlc
kindly get back to me once u can find anything regarding same
Thankyou in advance😀
absent-sapphire•2y ago
thanks. sorry for bothering you a lots of question but i couldn't reproduce this problem on our machines. because of that I need to ask 😦 I may ask more while I debug
wise-whiteOP•2y ago
yes sure
No issues regarding the questions
absent-sapphire•2y ago
can you start with
npm run refine devtools and share with us console outputs please ?wise-whiteOP•2y ago
yes sure
wise-whiteOP•2y ago
After running npm run refine devtools and then yarn dev getting this but on data or spec is showing
wise-whiteOP•2y ago
@alicanerdurmaz
absent-sapphire•2y ago
npm run refine devtools it's worked but npm run refine dev is not working. it should automaticly start devtools. I will debug and return youwise-whiteOP•2y ago
ok sure thankyou
also not getting the specs and this to see and filter when npm run refine devtools connected to local host
absent-sapphire•2y ago
can you update
@refinedev/core please ?
yarn @refinedev/core@latestwise-whiteOP•2y ago
yes sure
"@refinedev/core": "4.44.0", , did run the comand yarn run refine update to have everything up to date but still the same issue
fascinating-indigo•2y ago
Hey @jash.s, let's check out if we're having issues with running the websocket server or just with connecting to it. I'm assuming its neither one of them 🤔 I'm guessing its about the development environment in your browser which might be shutting down the connection to the websocket or not being able to pass it through the context.
If the websocket connection was not working, it wouldn't show the
http://localhost:3001 header in the devtools panel. This mostly ensures the both of them are working or had worked for a while.
Can you try running the command below, after you start your development server using npm run dev or similar?
wscat will try to connect to the websocket server we're usin for the devtoolswise-whiteOP•2y ago
wise-whiteOP•2y ago
@aliemirs
fascinating-indigo•2y ago
"dev": "PORT=3001 env-cmd -f .env.dev refine start" this is your dev script right?wise-whiteOP•2y ago
yes
fascinating-indigo•2y ago
Can you append
--devtools to it and run like:
"dev": "PORT=3001 env-cmd -f .env.dev refine start --devtools"
to make sure we're running the devtools server
Oh, can you try using refine dev instead of refine start?wise-whiteOP•2y ago
ok
wise-whiteOP•2y ago
should it open something like this ?
wise-whiteOP•2y ago
"dev": "PORT=3001 env-cmd -f .env.dev refine dev --devtools",
@aliemirs
fascinating-indigo•2y ago
No, not really 😅 But we're getting closer. You can check out
http://localhost:5001 in a new tab to see if its working.
My last attempt to run the devtools properly;
- Remove the --devtools option from the dev command.
- Before running the dev script, run npm run refine devtools (if you don't have the refine command defined in your package.json#scripts you can add it like "refine": "refine"
- then run the dev script in a separate tab or terminal.
- let's see if this makes it run properly.
Showing the wrong page (in your case localhost:3001) is caused by conflicting env variables. Sorry for that 🤦♂️ We'll do a quick release to fix that apart from the issues you're facingwise-whiteOP•2y ago
this is coming now but on here it is still the same
wise-whiteOP•2y ago
@aliemirs is there a doc for understanding the working or devtools ?
fascinating-indigo•2y ago
Nice to see it working 😅 Like i said the current issue with the panel not showing the devtools properly is caused by the conflicting environment variables (
PORT). For now, if you start the devtools individually without leaving it to the dev command, it should show the correct content (since PORT variable is not going to be defined and cause a conflict).
Just opened up a PR to fix this issue https://github.com/refinedev/refine/pull/5056 We'll release it soon 🙏
Unfortunately, there's no docs for the devtools yet. Do not hesitate to ask us questions here if you have any problems other than the one we've addressed above 🙏
Out of curiosity, do you use create react app? @jash.s
Let me do a quick summary of the issues we needed to solve here:
- the refine start command is designed to run the production server for the production builds not the development server. In one case, the refine cli fallbacks to running the development server even though you've run the refine start and its the CRA case.
- refine start doesn't run the devtools server alongside since its designed for production builds and devtools is not going to work with production builds for performance and bundle size concerns.
- At the first messages, this is why you couldn't connect to the devtools properly (because the server was really not working 😅 )
- After you've switched to dev command it started running it alongside the dev script.
- Then, the conflicting env issue came up. The PR fixes this issue. the devtools server was also looking for the env.PORT variable to run the devtools server (in your case it was fallbacking to 5001 since there was already a server running on 3001). The custom port feature is not fully developed and was not ready but we've forgot to remove the environment variable part when releasing the initial version of devtools.
- After the PR is released, you should be able to run the devtools properly without jumping off the hoops with just running your dev command.
Again, sorry for the issue and thank you for your patience.
The monitor feature is fully developed and you should be able to see your queries and mutations in the monitor with information about their location, call trace and response/error etc. You can do apply some filters to make it easier for you to do debugging or viewing the status of your queries but you can also use the crosshair icon in the devtools toggle to apply filters right from the UI by hovering over the components. It will automatically show you the component with some nice highlight around it (if it has any queries or mutations made inside) and when you click it, it will automatically open up the monitor with it being filtered.wise-whiteOP•2y ago
@aliemirs Due the devtools showin tht localhost:3001 , the component is going into an infitnity renrender till the websocket connection fails
Do i need to make any secondary chnages /
?
is the PR released ?
fascinating-indigo•2y ago
Yeah the PR is merged and released, can you try again after upgrading your packages (devtools and cli)
wise-whiteOP•2y ago
ok
@aliemirs thankyou , now it is working fine
Do we have a documentation for the same ?
fascinating-indigo•2y ago
Happy to hear that its working 🎉
Do you want a documentation on how to use the devtools or for the installation?
wise-whiteOP•2y ago
for using it
@aliemirs