Prefect UI only shows blank white screen

hotplot commented 1 year ago

First check

[X] I added a descriptive title to this issue.
[X] I used the GitHub search to find a similar issue and didn't find it.
[X] I refreshed the page and this issue still occurred.
[X] I checked if this issue was specific to the browser I was using by testing with a different browser.

Bug summary

When trying to load the Prefect UI, I simply get a blank screen. This happens in Chrome, Edge, and Firefox.

The issue is almost certainly related to accessing the Prefect instance over a VPN, however I believe the root cause and fix is simply to return a Content-Length header when serving the dashboard assets.

Reproduction

The Prefect instance is self hosted, using a completely standard container running prefecthq/prefect:2-python3.11. The container is started using the following compose file:

version: "3.9"
services:
  prefect:
    image: prefecthq/prefect:2-python3.11
    restart: always
    volumes:
      - prefect:/root/.prefect
    entrypoint: [ "prefect", "server", "start" ]
    environment:
      PREFECT_SERVER_API_HOST: 0.0.0.0
    ports:
      - 9200:4200

volumes:
  prefect:

To reproduce the issue, I only have to try loading hostname:9200 in a browser over our corporate Citrix VPN. It's likely that behaviour varies between different VPNs.

Error

Prefect returns a valid HTML response for the index page, but when Chrome tries to load assets/index-9892f350.js it generates a net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) error:

Browers

[X] Chrome
[X] Firefox
[ ] Safari
[X] Edge

Prefect version

Version:             2.11.4
API version:         0.8.4
Python version:      3.11.4
Git commit:          e15183f3
Built:               Thu, Aug 17, 2023 3:09 PM
OS/Arch:             linux/x86_64
Profile:             default
Server type:         server

Additional context

This only happens when accessing Prefect over Citrix, but I suspect it could be resolved by returning a Content-Length header with the responses.

hotplot commented 1 year ago

It's worth noting that the index page and favicon are both served (successfully) with a Content-Length header, whereas the js and css file are both served chunked and without a content length.

znicholasbrown commented 1 year ago

Hi @hotplot - thanks for the detailed report! I'm not able to reproduce this using a VPN alone so as you mentioned it's likely something unique to your setup. From my understanding that chunk error is nonspecific but given the commonality between browsers is likely due to the webserver dropping parts of the response or not being able to field the request; I'd be surprised if it had to do with a missing header but don't have enough info to confirm that suspicion.

That said, feel free to PR the missing headers or to provide a reproduction (if you have one) as that'll give us both more to work off.

avnav0 commented 1 year ago

i'm having the same issue. i even tried this:


location /prefect/ {
    rewrite ^/prefect/(.*) /$1 break;
    include mime.types;
    default_type application/octet-stream;

    proxy_pass http://10.235.77.21:4200/prefect/;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Custom-Header "prefect";

    real_ip_header X-Real-IP;

    proxy_connect_timeout 300;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    chunked_transfer_encoding off;
}

location ~ ^/(.*) {
    if ($is_prefect_referer) {
        set $asset_url "/prefect/$1";
    }
    proxy_pass http://10.235.77.21:4200$asset_url;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Custom-Header "prefect";

    real_ip_header X-Real-IP;

    proxy_connect_timeout 300;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    chunked_transfer_encoding off;
}

which gets passed the .css errors and such but i still get a blank page

philippjh commented 1 year ago

This might be related to #10807.

MrChadMWood commented 10 months ago

For what it's worth, I got it working with Caddy.

~~Edit: Not sure what changed, but this randomly stopped working for me.~~ Edit 2: Nevermind. I was visiting "127.0.0.1" and getting a blank screen with this method. That was wrong. Upon visiting "localhost" it worked as expected.

./docker-compose.yml

version: '3.8'

services:
  prefect:
    image: prefecthq/prefect:2.14.12-python3.11
    container_name: prefect
    entrypoint: ['prefect', 'server', 'start', '--host', '0.0.0.0']
    expose:
      - "4200"

  caddy:
    image: caddy:2.7.6
    container_name: caddy
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    ports:
      - "80:80"
    depends_on:
      - prefect

volumes:
  caddy_data:
  caddy_config:

./Caddyfile

{
    auto_https off
}

http://localhost {
    reverse_proxy http://prefect:4200
}

From project directory (./) run: docker-compose up.
Then check http://localhost/dashboard in your host's browser.

It acts a little weird with the SQLite3 database for a second, throws an error on the command line, but give it about 30 seconds and you can get to the UI.

PrefectHQ / prefect