[Bug] Odd issue with widget and field names on reload or config change

[pyunramura]

Description

Issue:

I'm configuring a brand new deployment and having a problem with the fields in homepage, Screencap below.

https://user-images.githubusercontent.com/35285259/202796718-c419c332-a281-4c65-a0e1-8dcd0b0993dd.mp4

This issue seems to occur anytime I reload the page with the dedicated reload button or if I make a change to any of the configuration files. Reloading the page, deleting the cache and reloading (Ctrl+Shift-R), closing the window and opening again, using a different browser, and opening the page on a different machine do not resolve the issue. The only thing I've found that works is recreating the container.

I've found that disabling all service widgets do not resolve the issue either. This problem occurs even after first deployment with an empty configuration directory.

On a side note, changes to the settings.yanl file are not being applied on first use after the container is started. The only way I've found to apply options in the settings.yaml is to use the dedicated reload button or to make a configuration change. But that also causes the issue above and is a secondary issue for me atm.

Notes about environment:

The config directory is bind mounted into the container where both the app and the folder/files are using root permissions, but I have also tried with running with user: <user>:<group> in the compose file as well with appropriate config directory/file permissions wih no difference in behavior.

The app is being reverse proxied with Traefik using the "secureHeaders" middleware

Traefik dynamic config

  middlewares:
    secureHeaders:
      headers:
        forceSTSHeader: true
        stsIncludeSubdomains: true
        stsPreload: true
        stsSeconds: 31536000
        browserXssFilter: true
        contentTypeNosniff: true

This is also deployed on a docker swarm cluster, though not sure if It's relevant to the issue.

Container Logs:

Note: there were no other reported errors after either using the dedicated reload button or making a config change. The errors below are present on container start.

logs/homepage.log

[2022-11-18T19:15:06.080Z] error: (node:1) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[2022-11-18T19:51:18.243Z] error: (node:1) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[2022-11-18T20:02:27.899Z] error: (node:1) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[2022-11-18T20:32:12.938Z] error: (node:1) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[2022-11-18T20:50:56.212Z] error: (node:1) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Configuration files:

bookmarks.yaml

---
# For configuration options and examples, please see:
# https://github.com/benphelps/homepage/wiki/Bookmarks

- Infra:
    - NAS:
        - abbr: NA
          href: https://10.10.0.2:9090/
    - PFsense:
        - abbr: PF
          href: https://192.168.2.1:444/

- .:
    - Dell-PC5524:
        - abbr: DL
          href: http://10.10.0.8/
    - SuperMicro-IPMI:
        - abbr: SM
          href: http://10.10.0.9/

docker.yaml

---
# For configuration options and examples, please see:
# https://github.com/benphelps/homepage/wiki/Docker-Integration

# my-docker:
#   host: 127.0.0.1
#   port: 2375

# my-docker:
#   socket: /var/run/docker.sock

services.yaml

---
# For configuration options and examples, please see:
# https://github.com/benphelps/homepage/wiki/Services

- Media:
    - Jellyfin:
        icon: jellyfin
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            type: jellyfin
            url: http://jellyfin:8096
            key: <redacted>
    - Radarr:
        icon: radarr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["wanted", "missing", "queued", "movies"]
            type: radarr
            url: http://radarr:7878
            key: <redacted>
    - Sonarr:
        icon: sonarr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["wanted", "queued", "series"]
            type: sonarr
            url: http://sonarr:8989
            key: <redacted>
    - Nzbget-SR:
        icon: nzbget
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["rate", "remaining", "downloaded"]
            type: nzbget
            url: <redacted>
            username: <redacted>
            password: <redacted>
    - Transmission:
        icon: transmission
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["leech", "download", "seed", "upload"]
            type: transmission
            url: http://transmission:9091
            username: <redacted>
            password: <redacted>

- _:
    - Prowlarr:
        icon: prowlarr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["enableIndexers", "numberOfGrabs", "numberOfFailGrabs"]
            type: prowlarr
            url: http://prowlarr:9696
            key: <redacted>
    - Invidious:
        icon: invidious
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Audiobookshelf:
        icon: audiobookshelf
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Bazarr:
        icon: bazarr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["missingEpisodes", "missingMovies"]
            type: bazarr
            url: http://bazarr:6767
            key: <redacted>
    - Requestrr:
        icon: requestrr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Readarr:
        icon: readarr
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["wanted", "queued", "books"]
            type: readarr
            url: http://readarr:8787
            key: <redacted>

- Infra:
    - Portainer:
        icon: portainer
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["running", "stopped", "total"]
            type: portainer
            url: http://portainer:9000
            env: 1
            key: <redacted>
    - Code-Server:
        icon: codeserver-light
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Gitea:
        icon: gitea
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Gitea-Swarm:
        icon: gitea
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Traefik:
        icon: traefik
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["routers", "services", "middleware"]
            type: traefik
            url: <redacted>
    - Uptime-Kuma:
        icon: uptime-kuma
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Kopia:
        icon: kopia
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Proxmox-Node00:
        icon: proxmox
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
        widget:
            fields: ["vms", "lxc", "cpu", "mem"]
            type: proxmox
            url: <redacted>
            username: <redacted>
            password: <redacted>
- Misc:
    - Shaarli:
        icon: shaarli
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - SFTP-Go:
        icon: /icons/sftpgo.png
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Paperless:
        icon: paperless-ng
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Shuriken:
        icon: fluidd
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container
    - Uptime-Kuma-Dashboard:
        icon: uptime-kuma
        href: <redacted>
        # description: Homepage is awesome
        # server: my-server
        # container: my-container

settings.yaml

---
# For configuration options and examples, please see:
# https://github.com/benphelps/homepage/wiki/Settings

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

widgets.yaml

---
# For configuration options and examples, please see:
# https://github.com/benphelps/homepage/wiki/Information-Widgets

- resources:
    # cpu: true
    memory: true
    disk: /app/config

- resources:
    disk: /mnt/media

- search:
    provider: duckduckgo
    target: _blank

- openweathermap:
    # label: <redacted> #optional
    # provider: openweathermap
    latitude: <redacted>
    longitude: <redacted>
    units: metric # imperial or metric
    apiKey: <redacted>
    cache: 30 # Time in minutes to cache API responses, to stay within limits

Steps to reproduce

1. Navigate to page
2. Click the dedicated reload button or make a configuration change while the container is running.

homepage version

v0.4.18 (4ea2798)

Installation method

Docker

Configuration

No response

Other

No response

[benphelps]

The text you're seeing is the i18n key names, which are used when a language translation is missing.

Can you try manually setting your language to English and see if that resolves it?

You can place this line inside of your settings.yaml:

language: en-US

[pyunramura]

Thanks for getting back to me. I just tried that in the settings and it didn't seem to make any difference. I tried setting both language: en-US and language: en and the issue still persists. Only a recreation of the container resolved the issue, as above.

[pyunramura]

I should also note that I just tested a new instance on a standalone docker host and opened port 3000 directly in order to rule the swarm overlay network and traefik out of potential causes. It was deployed with the same configuration files and unfortunately it has the same issue(s) as before.

[Droppisalt]

Having the same issue as well. Setting language: en-US in settings.yaml didn't fix it. Only recreating the container fixed this.

[mrpatricko]

I'm experiencing the same issue. Starting from scratch with a fresh container resolves it until I make an edit, then the fields display the i18n key names again.

[TopCheddar27]

Also experiencing this issue on docker installs. Anytime a setting is applied, it displays the key names. For me, It only stops when commenting out anything in the settings that is not stock, and recreating.

[shamoon]

Still cannot reproduce this, its not obvious to me what might be causing it. Does anyone have anything helpful displayed in the container or browser logs? How about with log level set to debug?

[pyunramura]

How about with log level set to debug?

Logging set to debug did not reveal any more info about the issue during my testing unfortunately, but.

I did manage to narrow down the cause of the issue during testing today, though I'm still not sure of a possible workaround yet.

In order to attempt getting some useful debug logs, I recreated the docker standalone instance with the standard compose file as follows:

---
version: '3.8'
services:
  homepage:
    image: ghcr.io/benphelps/homepage:v0.4.18
    container_name: homepage
    volumes:
      - ./homepage/config:/app/config
    ports:
      - 3000:3000
    environment:
      LOG_LEVEL: debug

With the config above, the instance proceeded to create a new set of configuration files when the page was loaded as expected. When the configuration was reloaded through the dedicated button or updated by modifying the config files, everything worked perfectly as it should, the i88n issue did not present itself.

I then copied my production config files into the same location and overwrote the ones that were previously created on the first page load. As above, everything worked as it should.

Finally I copied my production assets directory containing icons and images directories into ./homepage/public and modified the compose file as below:

---
version: '3.8'
services:
  homepage:
    image: ghcr.io/benphelps/homepage:v0.4.18
    container_name: homepage
    volumes:
      - ./homepage/config:/app/config
      - ./homepage/public:/app/public
    ports:
      - 3000:3000
    environment:
      LOG_LEVEL: debug

Note: The only change above is the addition of the - ./homepage/public:/app/public volume bind-mount.

With this config I was able to reproduce the original issue. When the container is started, all of the fields display correctly, but upon reload using the dedicated button, or on configuration change, the i88n fields were displayed instead of the appropriate values.

After this discovery I suspected there was something in my public volume bind-mount that may be causing the issue, so as before, I recreated the container from scratch, rm -rfing everything under ./homepage, proceeded to mkdir ./hompage/{config,public}, then with the "clean" config volume bind-mount, let the container create a new set of config files using the first compose file above. As expected, reloading and modifying config files worked fine. I then tore down the deployment and brought it up again with the second compose file above that contains the - ./homepage/public:/app/public volume bind-mount. This again reproduced the issue.

I also tried with a directory structure like below with the appropriate declarations in the compose file, but it seemed to make no difference. The issue persisted.

- ./homepage
---- /config

- ./homepage1
---- /public

I also tried reproducing the issue with the public directory volume bind-mounted to /mnt/public within the container to attempt to isolate docker itself as contributing to the issue. Then mounting the public directory to /app/public-test. In both cases, the app did not produce the issue. So it most likely has something to so with how the app is interacting with the /app/public directory within the container.

At this point I've managed to consistently reproduce the issue on a docker standalone instance with a locally bind-mounted config directory. I've also tried the same steps but with my nfs mounted "data" directories in use by my swarm cluster, and produced the same results as above, so that can be ruled out.

I'm still uncertain of the underlying cause of the issue, or a potential workaround that doesn't involve not having a volume definition for the /app/public directory. Perhaps the other users that are reporting this issue can give a larger sample size as to if removing the /app/public volume definition from their compose file can relieve the issue, if one is declared at all.

[mrpatricko]

Removing /app/public did the trick for me. Nice job, pyunramura!

I miss my icons folder tho.

[shamoon]

Ah, OP did not post their docker config compose / run. If that’s true for OP too then yes that’s the issue.

You shouldn’t map the entire public dir, you map a subdir eg /app/public/images see https://gethomepage.dev/en/configs/settings/#background-image

[Droppisalt]

Not OP, but changing my volumes: to - ./images:/app/public/images seems to have fixed this issue. Not sure if it's mentioned somewhere in the wiki that you have to map to a specific directory, but if not, I think it should. @shamoon the link you provided seems more like a suggestion to have /images in /public. I would've probably figured it out if I had added a background to my /images though lol

[shamoon]

Sure can add a note but I don’t think it suggests anywhere to do that so I’m not sure where the idea came from in the first place?

[Droppisalt]

Thanks! As an FYI, this is what caused the misunderstanding:

"you may pass the path to a local image relative to the /app/public directory, which could be configured like this"

Makes it sounds like the example below is a suggestion, but not necessary. Could possibly help to change it to:

"you may pass the path to a local image relative to the /app/public/images directory, which could be configured like this"

Not a big change, but imo, this would make it clearer that /images needs to be used and is not just there for clarity, or preference.

[shamoon]

Sure thing, I updated the docs.

Thanks all

[pyunramura]

If that’s true for OP too then yes that’s the issue.

Confirmed that mapping /public/images and public/icons as separate volume mounts solves the issue.

Thanks a lot for the clarification. In retrospect, failing to submit the docker-compose file as a part of the problematic config was a big oversight on my part. My apologies for any grief it caused dealing with this issue.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns.