Connection Error Displayed Upon Server Restart

[seekerquest]

Describe the bug Upon file modification and server restart, this message keep getting displayed and slows down dev process. how can this be stopped ?

Connection Error Cannot connect to server: timeout. Check if server is reachable at http://localhost:8000

To Reproduce Steps to reproduce the behavior:

reflex run

Expected behavior Page reload should not display this message. Screenshots If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

• Python Version: 3.10.4
• Reflex Version: 0.2.7
• OS: Win11
• Browser (Optional):

Additional context Add any other context about the problem here.

[masenf]

if you don't want the overlay when the websocket is down, you can pass

app = rx.App(overlay_component=None)

I'm curious about this part though

this message keep getting displayed and slows down dev process

The message should only be displayed when the backend is disconnected, which means that the app would be non-interactive for the same amount of time. Are you finding that the app takes longer to restart with the modal pop up?

[seekerquest]

Thank you! this seems to have resolved the issue. i no longer see a popup every single time the page refreshes.

This also seems to solve the issue around broken on_click event handler. Related to #1514

I wonder what the overlay_component=None does ?

[masenf]

The default overlay_component displays any websocket connection errors very visibly, so that when the page is "non-interactive" it's clear why.

Without the connection modal, the websocket can just be down and the user wont really notice, other than the buttons and other interactivity just don't work.

I'm not sure how removing the overlay component could have much effect on #1514. Is that very reproducible? Because sometimes it can take a bit for the backend to get ready, and the frontend would be unresponsive until then. So if that were the case, then you'd see the connection error popup, instead of the buttons just not working.

[ekreutz]

Just chiming in to say that I also have this problem.

I just tried Reflex for the very first time, and installed it in a fresh Python (3.11) environment. Reflex 0.2.7.

All I get is this:

Connection Error
Cannot connect to server: websocket error. Check if server is reachable at http://localhost:8000

And that's on a brand new project with zero customization. Hiding the modal seems like a bad solution, tucking the problem away...

[masenf]

@ekreutz were you able to bring up http://localhost:8000/ping and get the "pong" response? Did the modal go away after some time (<2 minutes usually)?

[99hats]

Hi there, I'm getting the

Connection Error Cannot connect to server: websocket error. Check if server is reachable at http://localhost:8000

On a very simple hello world app with backend_port = 3040

I'm not sure if it is related, as a workaround, I'm sticking with port 8000 but it means I can only have one reflex instance on this server.

[masenf]

@99hats if you change the backend_port, then you must also change the api_url to point to that port.

The api_url should be a publicly accessible URL where the backend is running that the frontend will connect to.

If you're hosting the backend on example.com:3040, then set api_url="http://example.com:3040"

[99hats]

@masenf Thank you so much for your help. I must have glanced through the documentation too quick.

[fatherofinvention]

I too faced this issue on a brand new install, and resolved it by forwarding the default 8000 port in VSCode:

[gbrandt1]

hello,

i'm having this issue as well, using ubu2004 in WSL2. i can reach the API just fine in the browser and use it eg. via the swagger UI. i can also use it with curl from the shell. but the frontend itself cannot reach the URL it displays. i tried using localhost, IP, DNS name, forwarding the API port in VSCode (it's auto-forwarded but i also tried user forward). i disabled IPv6 everywhere ... nothing helps, running out of ideas. what else can i try?

[masenf]

@gbrandt1 when you open the dev tools, network tab in your browser do you see anything regarding the /event?EIO=4&transport=websocket connection?

[gbrandt1]

yes, i see that it fails:

Console tab:

Network tab:

[masenf]

That double backslash is a bit suspicious. What are you using as api_url? It shouldn't have a trailing slash.

[gbrandt1]

I did have a backslash which i removed now. Now i'm using

api_url="http://localhost:8000"

but it doesn't help:

[gbrandt1]

Hi @masenf, just to let you know after rebooting Windows and restarting reflex it works now. not sure if it was an issue with WSL networking or I didn't properly refresh things after removing the trailing backslash. Thanks for the help!

[Roman-Hahnair]

I also got those wired timeout and websocket errors, but only on the remote VM where I'm hosting the app. If I run the app locally, there are no problems.

In my case, it turned out that I was developing on reflex 0.3.1, but it was 0.2.9 (or something like this) on the VM.

I've updated the lib to 0.3.2 on the VM, manually deleted the .web dir, reinitialized the app, and now it works.

[ZaneH]

I have this issue with a brand new project as well. I'm noticing that this issue only happens in my Brave browser. If I open localhost:3000 in Chrome, I never get this error message. I should also mention: I've disabled ad-block and Brave Shields on localhost. Same result.

I haven't really experienced anything like this before (with Brave), hopefully it's fixable.

Brave

Chrome

[fumi-arai]

I encountered the same issue while working on the tutorial. I ran reflex run on Ubuntu in WSL2 and opened the app in the Brave browser on Windows. This issue did not occur when I opened it in Edge. Additionally, running reflex run --backend-port 3050 resolved the issue in Brave as well. The status of Brave Shields (enabled/disabled) did not affect the result.

[Lendemor]

If the issue is specific to Brave browser I'm not sure this is something we have to fix on our side, if everything work for all other browsers.