Prefect UI is returning a blank page

bgalvao · January 19, 2023, 9:03pm

I don’t know what is going on, but I am getting a blank page:

I’ve updated from 2.7.6 to 2.7.8

anna_geller · January 20, 2023, 12:56am

sorry, I don’t understand, can you take it slower? what is this image? are you on OSS or cloud? what did you do to get that image?

bgalvao · January 20, 2023, 9:38am

My bad.

I’m self-hosting the OSS version with Docker Swarm, which is configured with the docker compose file indicated below.
The initial screenshot is the output of curlie http://172.16.8.65:4200. It shows status code 200, but if you look at the body of the html, you can see that it is empty.
The prefect image I am using is built in GitLab CI with the Dockerfile indicated below and is tagged as $PREFECT_REGISTRY_IMAGE. The $prefect_image argument in the Dockerfile is set to prefect:2.7.8-python3.11.

Web browser screenshot

curlie output

curlie http://172.16.8.65:4200

HTTP/1.1 200 OK
date: Fri, 20 Jan 2023 09:33:41 GMT
server: uvicorn
content-type: text/html; charset=utf-8
content-length: 1384
last-modified: Thu, 12 Jan 2023 19:45:50 GMT
etag: d6553fe57992b3f9c9f7e8d0396dd461

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
    <link rel="icon" id="favicon-32" type="image/png" sizes="32x32" href="/ico/favicon-32x32.png">
    <link rel="icon" id="favicon-16" type="image/png" sizes="16x16" href="/ico/favicon-16x16.png">
    <link rel="manifest" href="/ico/site.webmanifest">
    <link rel="mask-icon" href="/ico/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prefect Orion</title>
    <script type="module" crossorigin src="/assets/index-35e8b90f.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/index-f1382dab-33a61378.js">
    <link rel="modulepreload" crossorigin href="/assets/routes-f652c86d.js">
    <link rel="modulepreload" crossorigin href="/assets/meta-26546594.js">
    <link rel="modulepreload" crossorigin href="/assets/index-7d7f7986.js">
    <link rel="modulepreload" crossorigin href="/assets/colorMode-48834b77.js">
    <link rel="modulepreload" crossorigin href="/assets/ApiRoute-341bcd39.js">
    <link rel="stylesheet" href="/assets/index-e162ca62.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Dockerfile

ARG prefect_image

FROM prefecthq/$prefect_image
RUN pip install prefect-gitlab
RUN prefect block register -m prefect_gitlab

docker compose file

version: "3.8"

networks:
  proxy:
    external: true
  prefect:

volumes:
  prefect_orion:
  prefect_db:

services:

  ### Prefect Database
  database:
    image: $POSTGRES_REGISTRY_IMAGE
    environment:
      - POSTGRES_USER=$POSTGRES_USER
      - POSTGRES_PASSWORD=$POSTGRES_PASSWORD
      - POSTGRES_DB=$POSTGRES_DB
    expose:
      - 5432
    volumes: 
      - prefect_db:/var/lib/postgresql/data
    networks:
      - prefect

  ### Prefect Orion API
  orion:
    image: $PREFECT_REGISTRY_IMAGE
    volumes:
      - prefect_orion:/root/.prefect
    entrypoint: ["prefect", "orion", "start", "--analytics-off"]
    environment:
      - PREFECT_ORION_API_HOST=0.0.0.0
      - PREFECT_API_URL=http://172.16.8.65:4200/api
      - PREFECT_ORION_DATABASE_CONNECTION_URL=postgresql+asyncpg://$POSTGRES_USER:$POSTGRES_PASSWORD@database:5432/$POSTGRES_DB
    ports:
      - 4200:4200
    networks:
      - prefect
      - proxy

  ## Prefect Agent
  agent:
    image: $PREFECT_REGISTRY_IMAGE
    entrypoint: ["prefect", "agent", "start", "-q", "master-q"]
    environment:
      - PREFECT_API_URL=http://172.16.8.65:4200/api
#       Use PREFECT_API_KEY if connecting the agent to Prefect Cloud
#     - PREFECT_API_KEY=YOUR_API_KEY
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - prefect

Update: after updating to 2.7.9, these are the container logs that show no errors whatsoever

$ docker logs prefect_orion.1.qvdmv8b2824gn8zkmm3ewhtjh 

 ___ ___ ___ ___ ___ ___ _____    ___  ___ ___ ___  _  _
| _ \ _ \ __| __| __/ __|_   _|  / _ \| _ \_ _/ _ \| \| |
|  _/   / _|| _|| _| (__  | |   | (_) |   /| | (_) | .` |
|_| |_|_\___|_| |___\___| |_|    \___/|_|_\___\___/|_|\_|

Configure Prefect to communicate with the server with:

    prefect config set PREFECT_API_URL=http://0.0.0.0:4200/api

View the API reference documentation at http://0.0.0.0:4200/docs

Check out the dashboard at http://0.0.0.0:4200

$ docker logs prefect_agent.1.ofwlyc98md1gx0l81prierw7n 
Starting v2.7.9 agent connected to http://172.16.8.65:4200/api...

  ___ ___ ___ ___ ___ ___ _____     _   ___ ___ _  _ _____
 | _ \ _ \ __| __| __/ __|_   _|   /_\ / __| __| \| |_   _|
 |  _/   / _|| _|| _| (__  | |    / _ \ (_ | _|| .` | | |
 |_| |_|_\___|_| |___\___| |_|   /_/ \_\___|___|_|\_| |_|


Agent started! Looking for work from queue(s): master-q...

@ryan_peden may I ask you if you have any idea why this happens?

anna_geller · January 20, 2023, 1:40pm

yeah maybe Ryan will get back, I’d recommend signing up for a free account on https://app.prefect.cloud/ to avoid such issues and headache

bgalvao · January 30, 2023, 1:33pm

I would love to, but it is not an option.

The client wants everything on premises inside a VPN.

Either the Prefect Agents would not be able to communicate with Prefect Cloud.
Or the Prefect Cloud would not be able to reach anything inside the premises.

Running the latest 2.7.10. The stack file runs fine on my local machine, but goes blank once deployed on the server.

Does Prefect UI need to fetch assets from the wide internet in order to display a page?

Sorry to bother, @ryan_peden

bgalvao · January 30, 2023, 3:40pm

Update: it might be a VPN connection issue.

If/when I find out, I will report back for future reference.

bgalvao · February 1, 2023, 11:35am

For now there is another piece data: there is a JS module that fails to load