Main page has visual artifacts after fully loading

[dzonder]

🔍 Check for existing issues

• [X] Completed

How is Dozzle deployed?

Standalone Deployment

📦 Dozzle version

8.4.4

✅ Command used to run Dozzle

  dozzle:
    restart: unless-stopped
    image: amir20/dozzle:latest
    deploy:
      resources:
        limits:
          cpus: '0.1'
          memory: 64M
    environment:
      DOZZLE_HOSTNAME: mezz
      DOZZLE_REMOTE_HOST: host1,host2,host3,host4,host5,host6,host7,host8,host9
      DOZZLE_NO_ANALYTICS: true
    ports:
      - 8081:8080
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro

🐛 Describe the bug / provide steps to reproduce it

See the attached video: https://github.com/user-attachments/assets/85295771-770a-4de9-aa94-09f419a04cf1

After fully loading the main page is obstructed by black rectangles (some kind of rendering problem).

This started happening in version 6.6.0 and happens ever since. Chrome/Edge browser is affected. The page renders just fine on Safari.

💻 Environment

Browser: Chrome 128.0.6613.138

docker system info output with some personal info snipped:

Client: Docker Engine - Community
 Version:    27.2.1
 Context:    default
 Debug Mode: false
 Plugins:
  buildx: Docker Buildx (Docker Inc.)
    Version:  v0.16.2
    Path:     /usr/libexec/docker/cli-plugins/docker-buildx
  compose: Docker Compose (Docker Inc.)
    Version:  v2.29.2
    Path:     /usr/libexec/docker/cli-plugins/docker-compose

Server:
 Containers: 37
  Running: 37
  Paused: 0
  Stopped: 0
 Images: 38
 Server Version: 27.2.1
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Using metacopy: false
  Native Overlay Diff: true
  userxattr: false
 Logging Driver: json-file
 Cgroup Driver: systemd
 Cgroup Version: 2
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local splunk syslog
 Swarm: inactive
 Runtimes: runc io.containerd.runc.v2
 Default Runtime: runc
 Init Binary: docker-init
 containerd version: 7f7fdf5fed64eb6a7caf99b3e12efcf9d60e311c
 runc version: v1.1.14-0-g2c9f560
 init version: de40ad0
 Security Options:
  seccomp
   Profile: builtin
  cgroupns
 Kernel Version: 6.6.31+rpt-rpi-v8
 Operating System: Debian GNU/Linux 12 (bookworm)
 OSType: linux
 Architecture: aarch64
 CPUs: 4
 Total Memory: 7.759GiB
 Name: #######
 ID: ########
 Docker Root Dir: /var/lib/docker
 Debug Mode: false
 Username: #########
 Experimental: false
 Insecure Registries:
  127.0.0.0/8
 Live Restore Enabled: false

📸 If applicable, add screenshots to help explain your bug

No response

📜 If applicable, attach your Dozzle logs. You many need to enable debug mode. See https://dozzle.dev/guide/debugging.

No response

[amir20]

It looks like you are on Windows. I don't have Windows machine to test.

It's weird that no one else sees this issue. Couple of questions until we have more info:

1. How were you able to test on Safari? Can you access Chrome on a Mac and do you see the same issue?
2. V6 was released a very long time ago. I would expect other people to have had similar issues. Have you tried disabling plugins?
3. What happens when you resize your window?
4. I also noticed the circular CPU charts are not rendering on your screenshot. There seems to be more issues that you suggested. I also see 0 CPU and memory.
5. What about Firefox?

I'll try getting access to a Windows virtual machine but it might take a while.

[dzonder]

1. The issue is also reproducible on Chrome on a Mac.
2. Tried running these browsers also in a sandbox, so surely it's not something with my Chrome config/profile.
3. Layout keeps changing, but still broken.
4. I think it's only for remote hosts via the dsp, the local socket works just fine.
5. Renders just fine, seems like the issue is with Chromium-based browsers only (regardless the OS).

[dzonder]

Chrome's console shows the following error:

main-y3e7EXSf.js:35 Failed to read DOZZLE_VISIBLEKEYS from storage TypeError: e.map is not a function
    at Object.from (main-y3e7EXSf.js:48:37348)
    at Object.read (main-y3e7EXSf.js:35:34448)
    at A (main-y3e7EXSf.js:35:25314)
    at D (main-y3e7EXSf.js:35:25593)
    at Ns (main-y3e7EXSf.js:35:24865)
    at Gs (main-y3e7EXSf.js:35:34375)
    at main-y3e7EXSf.js:48:37297
onError @ main-y3e7EXSf.js:35

Error doesn't occur in Firefox/Safari so might be relevant.

[amir20]

Chrome's console shows the following error:

Interesting. That error wouldn't happen on the homepage.

The only difference you may have is number of remote hosts. You have 9 and I usually test with 3. I am going to create a couple fake hosts and see if I see a difference visually.

If I don't see a difference then I really don't know.

[amir20]

I was not able to reproduce this. See video.

https://github.com/user-attachments/assets/132d1e1c-8496-41a9-9910-8c1fc83a04dd

I created fake 9 hosts. I did resizing. I am running Chrome 129.0.6668.59.

Something is different for you.

I think you said in Incognito mode it does the same thing which means it has nothing to do with your cookies or localstorage.

If someone else figure this out then maybe then can figure out what is causing it. I get about 10k weekly active users. So I would assume other people are seeing this too.

[dzonder]

I've now tried to remove some hosts. The issue disappears when there is only the local host. As soon as I add even one remote host it triggers again. Maybe it's related to the problem with "0 CPUs 0 bytes total"?

[amir20]

1. Why do you have 0? Are you using a proxy? You should provide INFO=1 if you are using socket proxy.
2. The fact that the circular progress bar is not showing up for you is concerning. It should look like something like this:

You should also have two. One for cpu and another for mem. Even if you are not providing INFO permission, I would expect to see the progress bars correctly.

You have something going on I haven't seen before. Try figuring out why CPU and MEM is empty. If that doesn't fix it then something else is happening.

[amir20]

Also, this is why I recommend to use agents over remote connections. The are so many different configurations that could cause these errors. I don't have the time to support or investigate.

[dzonder]

Hmm. Adding INFO=1 resolved the issue. Maybe a division by zero somewhere in the UI causes this glitch... Anyway, sorry for so much hassle.

[dzonder]

Though the documentation claims:

INFO=1 is optional but it will provide more information on host meta data.

So yeah, ideally this shouldn't happen, or INFO should be mandatory.

[amir20]

That's a good point. When I was testing it seemed like it didn't happen. But maybe something changed. Let's keep this open. I'll either update the documentation or try to figure out why this is happening. If it is a easy fix then I'll just do it.

[dzonder]

Also, this is why I recommend to use agents over remote connections. The are so many different configurations that could cause these errors. I don't have the time to support or investigate.

Thing with the agent is - if I understand correctly, the agent will do some extra work (that now the main node is doing). I have some RPI Zeros in the machine pool, which are already very very busy. Likely exposing the socket is better for them performance-wise.

[amir20]

That's not actually true. Remote connections transfer all the data in JSON which will use more CPU. The agents have their own format that requires almost no parsing. So I think performance wise agents win.

When the UI is running, it is asking for stats from all nodes anyway. So using a socket proxy would cause more serialization than actually needed.

If you find that using agents is adding more CPU than a socket proxy then let me know. That shouldn't be the case. When I was designing I was very careful to being optimal.

[dzonder]

Ok, thanks, I'll consider migrating.

[amir20]

I don't think I'll have a chance to this so that remote hosts work without INFO. I have updated the doc 45ec0541 to explain why this is needed.