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