Prefect UI is returning a blank page

Help
, ,
1

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

image
image1302×910 156 KB

I’ve updated from 2.7.6 to 2.7.8

2

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?

3

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

image
image1486×882 121 KB

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? :point_right: :point_left:

5

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

6

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

7

Update: it might be a VPN connection issue.

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

8

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

image(1)
image(1)1430×518 66.2 KB

9

@bgalvao hey did you figure this out? because i’m experiencing the same issue…