Invisible icons

[Toucani]

Hi!

While using Jump for the last several months I've noticed a random bug when the icons of the websites become invisible. They are present, because when I hoover the mouse over - I can see the tooltip, and clicking them also works. When this happened last time I've noticed some errors in the logs so I thought it would be at least a starting point:)

Screenshots

First, screenshots made with Safari and Firefox(notice the tooltip and the address in the lower left corner):

1. 
2. 
3. 
4. 

Details

I was able to reproduce it on 1.3.0 and 1.2.4. Can test on any older version if needed.

Unfortunately, I haven't found the exact steps to make it happen. However, when it happened I tried doing this:

• restart the container
• stop container, remove image, download image, start container
• flip CACHE_BYPASS variable
• drop favicon and search features

none of these actions helped.

Docker command

Here is the command that I used

docker run -d --restart unless-stopped \
-v "<path>/Containers/jump/sites:/sites" \
-v "<path>/Containers/jump/favicon:/favicon" \
-v "<path>/Containers/jump/search:/search" \
-v "<path>/Containers/jump/backgrounds:/backgrounds" \
-e SITENAME="Name" \
-e SHOWCLOCK="true" \
-e AMPMCLOCK="false" \
-e SHOWGREETING="true" \
-e SHOWSEARCH="true" \
-e ALTLAYOUT="false" \
-e CHECKSTATUS="false" \
-e BGBLUR="60" \
-e BGBRIGHT="50" \
-e NOINDEX="true" \
-e OWMAPIKEY="<some gibberish>" \
-e METRICTEMP="true" \
-e LATLONG="LAT, LON" \
-l traefik.enable=true \
... some traefik labels ...
--name jump daledavies/jump:v1.3.0

Steps to reproduce

1. Run the command
2. ???
3. Profit!!!

Errors that I saw

Aug 12 13:17:05 Homeserver 008dbb353f56[48783]: 2022/08/12 12:17:05 [error] 25#25: *23 open() "/var/www/html/images/tags.svg" failed (2: No such file or directory), client: 172.17.0.5, server: _, request: "GET /images/tags.svg HTTP/1.1", host: "aviary.lan", referrer: "http://aviary.lan/"
Aug 12 13:17:05 Homeserver 008dbb353f56[48783]: 2022/08/12 12:17:05 [error] 26#26: *26 open() "/var/www/html/images/search.svg" failed (2: No such file or directory), client: 172.17.0.5, server: _, request: "GET /images/search.svg HTTP/1.1", host: "aviary.lan", referrer: "http://aviary.lan/"
Aug 12 13:17:05 Homeserver 008dbb353f56[48783]: 2022/08/12 12:17:05 [error] 25#25: *25 open() "/var/www/html/images/loading.svg" failed (2: No such file or directory), client: 172.17.0.5, server: _, request: "GET /images/loading.svg HTTP/1.1", host: "aviary.lan", referrer: "http://aviary.lan/"

So naturally, I logged into the container and did this

bash-5.1# ls /var/www/html/images
ls: /var/www/html/images: No such file or directory

bash-5.1# find / -name "tags.svg"
/var/www/html/assets/images/tags.svg
/usr/src/jumpapp/assets/images/tags.svg

Looks like a path has been changed but not updated somewhere in the code?

I can also provide a full log where I saw the errors if this is of any interest:) Let me know if I can help with it any further:)

[Toucani]

Looking at the errors, I think this might come from some inconsistency with the relative paths used in

• jump/jumpapp/assets/css/src/_header-bar.scss

  Line 16 in c9bbc90

  background-image: url(../images/tags.svg);

• jump/jumpapp/assets/css/src/_sites.scss

  Line 47 in 0cf55c9

  background-image: url(../images/loading.svg);

• jump/jumpapp/assets/css/src/_search.scss

  Line 9 in c9bbc90

  background-image: url(../images/search.svg);

So it either should be .../assets/images/image.svg or /images/image.svg if we're in the assets folder alread...

[daledavies]

Howdy, thanks for reaching out!

It is odd why you're seeing errors for just those three assets. Especially as your screenshots show those icons have loaded.

You should look in this file for the image URLs that are used as this is the CSS bundle created by webpack...

https://github.com/daledavies/jump/blob/main/jumpapp/assets/css/styles.00c4db10d75e0c01f6eb.min.css

The issue shown in your screenshots however seems like jump isn't getting the response it expects from the Open Weather Map API. Could you post any errors you see in your browser's javascript console?

[daledavies]

I've actually identified a fix for the issue I think might be happening, so even if jump gets an error from open weather it will still finish loading, this will be included in the next release.

But I'm curious as to whether this is the problem you're facing and seeing if there are any errors in the javascript console will help identify that 😀

[Toucani]

... Interesting. The console indeed shows an error related to OpenWeather:

[Error] JUMP ERROR: There was an issue with the OWM API... Could not resolve host: api.openweathermap.org
	(anonymous function) (index.67685b39ff36ec927e35.min.js:1:22969)
	promiseReactionJob

I've just ping api.openweathermap.org it and it resolves ok from the machine. After this the error is gone from the console, but the icons are still invisible.

I've also checked the css file, and it seems that the links are background-image: url(../images/tags.svg);:

[rdos14]

i had the same issue with the icons not showing, but they are there because when i hover over the area that they are supposed to be. I can help with any information that you need to track the issue

[daledavies]

This is usually because of an issue with either your OWM API key or a problem with the container being able to connect to it.

Can you provide a screenshot of the javascript console from devtools?

[daledavies]

Note I do not think there is a CSS issue

[rdos14]

@daledavies in my case was the LATLONG variable, i put just like google maps give it to me 20.456600, -97.987094.

Notice the space after the comma, i delete that space and now everything works!

[daledavies]

Awesome, glad you got it working. Thanks for reaching out 😀

[cinderblockgames]

Following; I've just started using this dashboard and I also get invisible icons sometimes.

[mynameistito]

bump, same issue here

[Toucani]

For all the interested people here is what was my original problem: the container was not able to resolve hostnames at all due to DNS misconfiguration. This is why I had a resolution error that went away after ping.

It looks like any network issue(eg. resolution problem, API problem, etc) would lead to invisible icons...

[cinderblockgames]

@Toucani This makes a lot of sense; I just fixed DNS issues, so that could have been it.

[mynameistito]

Ending up resolving it after removing the following lines from the environment section of the docker-compose.yml

            OWMAPIKEY: '0a1b2c3d4e5f6a7b8c9d0a1b'
            LATLONG: '51.509865,-0.118092'

[cinderblockgames]

@mynameistito That's fine if you don't want weather on the page; otherwise, you should replace those with your own key and position.

[mynameistito]

@mynameistito That's fine if you don't want weather on the page; otherwise, you should replace those with your own key and position.

Yes, that is true @cinderblockgames but what's the fix 🤔

I've even added my own key and LATLONG still have an error of "not being able to see anything"

[daledavies]

Hi everyone, thank you for keeping up the discussion on this issue. Just wanted to let you know I have not disappeared but I did need to take a little break.

Although there are some improvements I do want to make that will stop the icons from being invisible if there is an error from the open weather API, debugging what is actually going on with the API call is difficult for me to do if I can't recreate it.

There should be some error logged in either the devtools console or docker logs that will indicate an API error, can you check to see?

[JarlMorgennebel]

Same issue.

Solved by removing the DEFAULT added OWMAPIKEY and LATLONG entries from sites/sites_json, removing the old container and restarting again. Works fine now.

Changed nothing for DNS.

[cinderblockgames]

If you're in swarm mode, make sure you either have sticky sessions or only one replica.

[daledavies]

I've fixed a few small issues that might help with this. One last thing I'll do is detach the site icon visibility from loading the greeting/weather. That way if the localisation information can't be fetched from the weather API you'll still be able to access sites.

[daledavies]

A note for future people who see this thread. You must remove the OWMAPIKEY and LATLONG that are mentioned in the Readme examples, they are there for example purposes only and will not actually work.

[daledavies]

@daledavies in my case was the LATLONG variable, i put just like google maps give it to me 20.456600, -97.987094.

Notice the space after the comma, i delete that space and now everything works!

@rdos14 This will now be fixed by commit 8810450 and commit 604171c will also ensure the OWMAPIKEY is trimmed.

[daledavies]

A number of small fixes have been applied in the latest release (v1.3.2) so let's see how this goes, closing the issue for now.

Thanks everyone :)

[Toucani]

Can confirm - the fixes work!

I've updated to 1.3.2 and broke DNS resolution(again!) mistakenly - icons appeared on every tab on Jump after a slight delay:)

Thank you very much!

[daledavies]

Amazing! Thank you so much for taking the time to let me know :)