devika icon indicating copy to clipboard operation
devika copied to clipboard
verified publisher icon stitionai

Differences in local vs remote host connection behaviors - local working, remote not (resolved, fw rule for backend)

Open agrajagco opened this issue 1 year ago • 4 comments

Describe the bug Server: Debian 12, i7, 2 Nvidia GPUs. Pulled latest and re-ran installation instructions, verifying all dependencies are currently resolved (as of April 13,2024)

When connecting to the front end service locally in a gnome session (over RDP) using firefox with http://127.0.0.1:3000 or http://[host IP]:3000 produces a working user experience in the web UI. Settings works, listing models works, etc.

When connecting from windows 11 laptop remotely via firefox or chrome; The web page loads, but attempting to use any interface within, including going to settings produces blank central parts to the page, but the title and sidebar appear. This is true for settings (image attached) and logs, With logs (second image) the headers are in a compressed space

QUESTION: does the python backend need to be started in a way that allows remote connections as well? (see firefox error messages at end of this posting)

Note that all services are confirmed to be starting to listen on all ports, except the python backend

To Reproduce Steps to reproduce the behavior:

  1. Follow install/config instructions for linux
  2. Start Services Listening On all Ports
  3. Connect to web frontend for Devika from windows 11 system to debian 12 host
  4. Attempt to use settings, access logs, or use any functionality from both firefox and edge (see errors below)
  5. No visible server side logging errors, client side complains about webkit on edge and throws the errors at bottom of listing (long)

Expected behavior Consistent user interface experience from local access and remote access.

Screenshots the settings page from remote client connection to host image the logs from same image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Edge, Firefox
  • Version: Latest Updates as of 4/13/2024

Additional context

Error logging from dev tools on edge for accessing settings tab and logs tab

polling.js:298      
        
        GET http://172.16.10.14:1337/socket.io/?EIO=4&transport=polling&t=OxQ7Vbf net::ERR_CONNECTION_TIMED_OUT
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
Show 253 more frames
Show less
polling.js:298 
        
        GET http://172.16.10.14:1337/socket.io/?EIO=4&transport=polling&t=OxQ7X3F net::ERR_CONNECTION_TIMED_OUT
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
XMLHttpRequest.send (async)
create @ polling.js:298
_Request @ polling.js:237
request @ polling.js:190
doPoll @ polling.js:215
poll @ polling.js:96
doOpen @ polling.js:56
open @ transport.js:46
open @ socket.js:170
_Socket @ socket.js:111
open @ manager.js:108
(anonymous) @ manager.js:328
setTimeout (async)
reconnect @ manager.js:321
(anonymous) @ manager.js:331
onError @ manager.js:123
Emitter.emit @ index.mjs:136
onError @ socket.js:541
Emitter.emit @ index.mjs:136
onError @ transport.js:38
(anonymous) @ polling.js:218
Emitter.emit @ index.mjs:136
onError @ polling.js:320
(anonymous) @ polling.js:294
setTimeout (async)
xhr.onreadystatechange @ polling.js:293
Show 253 more frames
Show less
api.js:148 
        
        
        GET http://172.16.10.14:1337/api/logs net::ERR_CONNECTION_TIMED_OUT
window.fetch @ fetcher.js:65
fetchLogs @ api.js:148
(anonymous) @ +page.svelte:26
run @ utils.js:41
(anonymous) @ Component.js:47
flush @ scheduler.js:99
Promise.then (async)
schedule_update @ scheduler.js:20
make_dirty @ Component.js:81
(anonymous) @ Component.js:139
$$self.$$set @ root.svelte:48
(anonymous) @ proxy.js:83
$set @ Component.js:507
dest.<computed> @ proxy.js:46
navigate @ client.js:1406
await in navigate (async)
(anonymous) @ client.js:2122
Show 12 more frames
Show less
fetcher.js:65 
        
        
        Uncaught (in promise) TypeError: Failed to fetch
    at window.fetch (fetcher.js:65:10)
    at fetchLogs (api.js:148:26)
    at +page.svelte:26:27
    at run (utils.js:41:9)
    at Array.map (<anonymous>)
    at Component.js:47:48
    at flush (scheduler.js:99:5)

And messages appearing in firefox,

[vite] connecting... [client.ts:19:8](http://172.16.10.14:3000/@vite/client.ts)
[vite] connected. [client.ts:173:14](http://172.16.10.14:3000/@vite/client.ts)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://172.16.10.14:1337/socket.io/?EIO=4&transport=polling&t=OxPlVdM. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://172.16.10.14:1337/api/settings. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
    instance +page.svelte:10
    AsyncFunctionThrow self-hosted:856
    (Async: async)
    run utils.js:41
    map self-hosted:221
    mount_component Component.js:47
    flush scheduler.js:99
    init Component.js:164
    Root root.svelte:708
    createProxiedComponent svelte-hooks.js:341
    ProxyComponent proxy.js:242
    Proxy<Root> proxy.js:349
    initialize client.js:433
    navigate client.js:1409
    InterpretGeneratorResume self-hosted:1465
    AsyncFunctionNext self-hosted:852
    (Async: async)
    _goto client.js:367
    goto client.js:1731
    start client.js:295
    <anonymous> settings:26
    (Async: promise callback)
    <anonymous> settings:25

agrajagco avatar Apr 14 '24 01:04 agrajagco

you started the backend first? cause it shows socket isn't connecting.

ARajgor avatar Apr 14 '24 07:04 ARajgor

The backend is running and functioning, as the local test is working at the same time the remote test is failing.

Does the python backend service need be started so that its listening on the same network interface as the frontend web application?

agrajagco avatar Apr 14 '24 17:04 agrajagco

ohh I see. in your log it's says

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://172.16.10.14:1337/api/settings. (Reason: CORS request did not succeed). Status code: (null). you are blocked at cors

ARajgor avatar Apr 14 '24 17:04 ARajgor

Ok thanks for your help, sorry about the slow response. I just saw your response. This is working now, this issue is resolved for me.

I validated what was required configuration from devika.py and realized I had a firewall rule missing allowing for interaction with the "backend" from non local clients... I'm just an unfrozen caveman systems architect, but "backend" isn't what it used to be, given browser interaction is required with the backend... but I digress and avoid judgement of these newfangled ways.

I have to say tho; it unnerving to have to create a port firewall rule for LEET

https://github.com/stitionai/devika/blob/ecee79f212168a9f0e7da86aec16ec0d62953f69/devika.py#L197-L199

agrajagco avatar Apr 20 '24 19:04 agrajagco