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
correct-apricot•10mo ago
hello @jash.s
npm run dev will automatically starts devtools.
can you share error output with us please ?optimistic-gold•10mo ago
I m using yarn
optimistic-gold•10mo ago
@alicanerdurmaz
"dev": "PORT=3001 env-cmd -f .env.dev refine start",
using yarn dev
correct-apricot•10mo ago
do you get any other error on Chrome console or terminal output ?
optimistic-gold•10mo ago
context.tsx:43 WebSocket connection to 'ws://localhost:5002/' failed:
this might be related to it
optimistic-gold•10mo ago
@alicanerdurmaz
correct-apricot•10mo ago
it's a long shot but can you try with npm please ?
optimistic-gold•10mo ago
@alicanerdurmaz Started the project with npm run dev , but still facing the same issue
correct-apricot•10mo ago
I will debug and return you as soon as possible. but also can you share "yarn run refine whoami" please
optimistic-gold•10mo ago
sorry not able to get this yarn run refine whoami
correct-apricot•10mo ago
npm run refine whoami ?
optimistic-gold•10mo ago
optimistic-gold•10mo ago
@alicanerdurmaz will this do ?
correct-apricot•10mo ago
yes thank you
optimistic-gold•10mo ago
your wlc
kindly get back to me once u can find anything regarding same
Thankyou in advance😀
correct-apricot•10mo 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
optimistic-gold•10mo ago
yes sure
No issues regarding the questions
correct-apricot•10mo ago
can you start with
npm run refine devtools and share with us console outputs please ?optimistic-gold•10mo ago
yes sure
optimistic-gold•10mo ago
After running npm run refine devtools and then yarn dev getting this but on data or spec is showing
optimistic-gold•10mo ago
@alicanerdurmaz
correct-apricot•10mo 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 youoptimistic-gold•10mo ago
ok sure thankyou
also not getting the specs and this to see and filter when npm run refine devtools connected to local host
correct-apricot•10mo ago
can you update
@refinedev/core please ?
yarn @refinedev/core@latestoptimistic-gold•10mo 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
like-gold•10mo 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 devtoolsoptimistic-gold•10mo ago
optimistic-gold•10mo ago
@aliemirs
like-gold•10mo ago
"dev": "PORT=3001 env-cmd -f .env.dev refine start" this is your dev script right?optimistic-gold•10mo ago
yes
like-gold•10mo 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?optimistic-gold•10mo ago
ok
optimistic-gold•10mo ago
should it open something like this ?
optimistic-gold•10mo ago
"dev": "PORT=3001 env-cmd -f .env.dev refine dev --devtools",
@aliemirs
like-gold•10mo 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 facingoptimistic-gold•10mo ago
this is coming now but on here it is still the same
optimistic-gold•10mo ago
@aliemirs is there a doc for understanding the working or devtools ?
like-gold•10mo 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.optimistic-gold•10mo 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 ?
like-gold•10mo ago
Yeah the PR is merged and released, can you try again after upgrading your packages (devtools and cli)
optimistic-gold•10mo ago
ok
@aliemirs thankyou , now it is working fine
Do we have a documentation for the same ?
like-gold•10mo ago
Happy to hear that its working 🎉
Do you want a documentation on how to use the devtools or for the installation?
optimistic-gold•10mo ago
for using it
@aliemirs