xenial-black•13mo ago

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

kapa.ai•13mo ago

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: ----------------------

kapa.ai•13mo ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-salmon•13mo ago

hello @jash.s npm run dev will automatically starts devtools. can you share error output with us please ?

xenial-black•13mo ago

I m using yarn

xenial-black•13mo ago

@alicanerdurmaz "dev": "PORT=3001 env-cmd -f .env.dev refine start", using yarn dev

extended-salmon•13mo ago

do you get any other error on Chrome console or terminal output ?

xenial-black•13mo ago

context.tsx:43 WebSocket connection to 'ws://localhost:5002/' failed: this might be related to it

xenial-black•13mo ago

@alicanerdurmaz

extended-salmon•13mo ago

it's a long shot but can you try with npm please ?

xenial-black•13mo ago

@alicanerdurmaz Started the project with npm run dev , but still facing the same issue

extended-salmon•13mo ago

I will debug and return you as soon as possible. but also can you share "yarn run refine whoami" please

xenial-black•13mo ago

sorry not able to get this yarn run refine whoami

extended-salmon•13mo ago

npm run refine whoami ?

xenial-black•13mo ago

@alicanerdurmaz will this do ?

extended-salmon•13mo ago

yes thank you

xenial-black•13mo ago

your wlc kindly get back to me once u can find anything regarding same Thankyou in advance😀

extended-salmon•13mo 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

xenial-black•13mo ago

yes sure No issues regarding the questions

extended-salmon•13mo ago

can you start with npm run refine devtools and share with us console outputs please ?

xenial-black•13mo ago

yes sure

xenial-black•13mo ago

After running npm run refine devtools and then yarn dev getting this but on data or spec is showing

xenial-black•13mo ago

@alicanerdurmaz

extended-salmon•13mo 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 you

xenial-black•13mo ago

ok sure thankyou also not getting the specs and this to see and filter when npm run refine devtools connected to local host

extended-salmon•13mo ago

can you update @refinedev/core please ? yarn @refinedev/core@latest

xenial-black•13mo 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

extended-salmon•13mo 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?

npx wscat --connect ws://localhost:5002

npx wscat --connect ws://localhost:5002

wscat will try to connect to the websocket server we're usin for the devtools

xenial-black•13mo ago

@aliemirs

extended-salmon•13mo ago

"dev": "PORT=3001 env-cmd -f .env.dev refine start" this is your dev script right?

xenial-black•13mo ago

yes

extended-salmon•13mo 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?

xenial-black•13mo ago

should it open something like this ?

xenial-black•13mo ago

"dev": "PORT=3001 env-cmd -f .env.dev refine dev --devtools", @aliemirs

extended-salmon•13mo 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 facing

xenial-black•13mo ago

this is coming now but on here it is still the same

xenial-black•13mo ago

@aliemirs is there a doc for understanding the working or devtools ?

extended-salmon•13mo 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.

xenial-black•13mo 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 ?

extended-salmon•13mo ago

Yeah the PR is merged and released, can you try again after upgrading your packages (devtools and cli)

xenial-black•13mo ago

ok @aliemirs thankyou , now it is working fine Do we have a documentation for the same ?

extended-salmon•13mo ago

Happy to hear that its working 🎉 Do you want a documentation on how to use the devtools or for the installation?

xenial-black•13mo ago

for using it @aliemirs