system: update to Chart JS 4 to try and fix issues with the traffic widget

[bagobones]

Important notices

Before you add a new report, we ask you kindly to acknowledge the following:

• [ X] I have read the contributing guide lines at https://github.com/opnsense/core/blob/master/CONTRIBUTING.md
• [ X] I am convinced that my issue is new after having checked both open and closed issues at https://github.com/opnsense/core/issues?q=is%3Aissue

Describe the bug As pictured below many times when I load the dashboard it will display as below and just flash back and forth with no graph

Tip: to validate your setup was working with the previous version, use opnsense-revert (https://docs.opnsense.org/manual/opnsense_tools.html#opnsense-revert)

To Reproduce

Open dashboard.. It seems to stay this way for hours or days, then sometimes corrects. Will correct after a reboot, for a while then come back sometimes.

Expected behavior

Show graph data.

Describe alternatives you considered

Remove graph as the flashing is annoying and it isn't working much of the time.

Screenshots

Relevant log files

Not sure what logs would be applicable.

Additional context

Using Chrome on Windows as my browser, I issue also happens on Edge if I open it while the issue is happening. So I think this is a widget / data issue not a client / browser issue.

Environment

Software version used and hardware type if relevant, e.g.:

OPNsense 24.7.3-amd64

[ad-on-is]

Having exactly the same issue, since 24.7.2.. Updated to 24.7.3 and it still remains.

[swhite2]

I cannot reproduce this, any errors in Chrome developer console (F12 -> Console)?

[fichtner]

Windows could be a factor here especially size this seems consistent across browsers on the same system. Maybe something about ChartJS that's already solved in a later version?

[fichtner]

Case in point: https://forum.opnsense.org/index.php?topic=42640.0

[ad-on-is]

@fichtner I'm on Linux, so Windows can be ruled out.

Also, I tried with FF and Brave.

[fichtner]

Ok, someone else start this research from scratch. ;)

[ad-on-is]

Here's the console log output of Firefox. However, when I navigate to https://10.40.0.1/api/diagnostics/traffic/stream/1, I can see new streams coming in and the content refreshing

Even tho the same error appears for the cpu_usage stream, the graph is shown correctly.

[swhite2]

Here's the console log output of Firefox. However, when I navigate to https://10.40.0.1/api/diagnostics/traffic/stream/1, I can see new streams coming in and the content refreshing

This is "normal" on Firefox and is unrelated to the problem, you won't see this on Chromium and it does not affect functionality on our end. If you switch from the dashboard to any other page, you'll see the same.

[Hipoglos]

In a fresh Windows 11 23H2 install machine, I have the same issue:

https://i.imgur.com/24zu2qJ.mp4

No matter which brower I use, I get same results (tested already on Chrome, Edge, Firewall, DuckDuckGo).

---

In case it helps to troubleshoot it, on the PC where the Traffic widget is not working, it doesn't work also the Wireguard widget (in case you want to compare it).

It's showing as "down" the tunnels, but they are UP and you can see the traffic.

https://i.imgur.com/Rhebmcr.png

---

On my mobile or another PC, the same widgets are working perfectly.

[swhite2]

In a fresh Windows 11 23H2 install machine, I have the same issue:

Zero or more interfaces selected? Errors in browser console as asked earlier?

The wireguard tunnel status is likely unrelated as it only considers a tunnel to be UP if the latest handshake was within 3 minutes, but then again, i'm stabbing in the dark here as I don't see any actual data.

[Hipoglos]

One or all interfaces, same result. Here is what Chrome console is showing:

Failed to load one or more widgets: Array(1) (anonymous) | @ | opnsense_widget_mana…2da39492b655ab9:149

Refused to load the image 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>' because it violates the following Content Security Policy directive: "img-src 'self'".

https://i.imgur.com/boXpJzv.png https://i.imgur.com/MQhUf3W.png

Let me know if you need me to do any kind of test that could help you, or if you need more info. Happy to help!

[ad-on-is]

I also just had a look into brave console, and this is what's showing up. Strangely this error does not occur in FF.

[Hipoglos]

From firefox:

[Hipoglos]

In Chrome:

[swhite2]

@Hipoglos Does this also happen if you restore the default dashboard?

[Hipoglos]

@swhite2 Just restored, and same issue.

The console looks like a little different though, but I think it's the same issue:

[Hipoglos]

Sorry, just make things more complicated... I checked the console in a W11 Laptop (where all widgets are working fine)...and the same error it's also there.

[swhite2]

@Hipoglos What version are you on? Running any manual patches? Can you run a health audit in the firmware page?

[Hipoglos]

Just a patched Kernel for an issue with a NIC driver. Both PC are running W11 23H2, but in the 1st one everything is working fine, and not in the other. The only big difference, is that the one is not working, is a fresh install.

Do these graph require Java or any kind of runtime installed on the client pc maybe I could try to install?

`GOT REQUEST TO AUDIT HEALTH Currently running OPNsense 24.7.3_1 at Wed Sep 4 14:18:48 CEST 2024

Root file system: zroot/ROOT/default Check installed kernel version Version 24.7.3-ixl is incorrect, expected: 24.7.3 Check for missing or altered kernel files No problems detected. Check installed base version Version 24.7.3 is correct. Check for missing or altered base files Error 2 occurred. etc/sysctl.conf: size (299, 333) sha256digest (0x45f469e7a9b4eef887bab7b55397305043fe101e1d6ce6f7e23d758e72f56dc6, 0x8cc5c942d7c5827a96087f872ae6ef860d1dd42172f226acf925b98181eda850) Check installed repositories OPNsense SunnyValley Check installed plugins os-acme-client 4.5 os-cpu-microcode-intel 1.0 os-igmp-proxy 1.5_3 os-mdns-repeater 1.1_1 os-sensei 1.17.6 os-sensei-agent 1.17.5 os-sensei-updater 1.17 os-sunnyvalley 1.4_3 os-theme-advanced 1.0 os-theme-vicuna 1.48 Check locked packages No locks found. Check for missing package dependencies Checking all packages: .......... done Check for missing or altered package files Checking all packages: .......... done Check for core packages consistency Core package "opnsense" has 68 dependencies to check. Checking packages: ..................................................................... done DONE`

[fichtner]

@Hipoglos can you patch the zenarmor widget as described here? https://forum.opnsense.org/index.php?topic=42560.msg210817#msg210817

[Hipoglos]

Ran the command. The error in the console now is gone and I can see Zenarmor on the dropdown list of the widget (before was not there)...but the graph is still not working.

I cleaned up cache just in case, and tried all browsers. Restored also to default layout. Same issue.

ps: browsers are not reporting any issue now on their console. clean.

[fichtner]

what would help at this point is a video of the behaviour. This may have something to do with screen size or widget arrangement... since it's somehow persistent for a single installation.

[Hipoglos]

I will record my screen in a moment and if it's ok for you, I will send the video privately via the forum, to avoid expose personal information here.

[fichtner]

Yes, thanks in advance 👍

[AdSchellevis]

One or all interfaces, same result. Here is what Chrome console is showing:

Failed to load one or more widgets: Array(1) (anonymous) | @ | opnsense_widget_mana…2da39492b655ab9:149

Refused to load the image 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>' because it violates the following Content Security Policy directive: "img-src 'self'".

https://i.imgur.com/boXpJzv.png https://i.imgur.com/MQhUf3W.png

Let me know if you need me to do any kind of test that could help you, or if you need more info. Happy to help!

Out of curiosity, does this https://github.com/opnsense/core/commit/fc5714b1dedf22694213142d1cf6b22c7ec2192a make a difference?

opnsense-patch fc5714b1dedf22694213142d1cf6b22c7ec2192a

[bagobones]

what would help at this point is a video of the behaviour. This may have something to do with screen size or widget arrangement... since it's somehow persistent for a single installation.

I had the issue STOP for a little while today and I had to wait for it to occur again but this might also point to screen resolution.

I have the issue right now on my windows desktop with chrome. My monitor is an ultrawide 2560x1080, however I normally keep the browser windows non full screen so if the widget looks at screen resolution instead of viewport / browser window size that might be a factor.

I have tried resizing the widget and removing and adding it with the edit action but the issue persists.

I at this moment I also have the interface open on my iPhone and it is displaying correctly in safari. So screen size MIGHT be a factor.

[Hipoglos]

Guys, I just tried again, and now in the computer that was not working, is working. I didn't touch anything or apply any patch. I didn't install anything on the PC or change anything. Both (traffic graph and wireguard) are working as expected. Going to reboot and try again. Not understand what solved the issue.

[Hipoglos]

Sorry, I can't reproduce the error anymore.

[swhite2]

@Hipoglos Perhaps an outdated browser version?

Let's keep this open for now if anyone is able to reproduce it consistently, unfortunately I don't have an ultrawide to test the theory.

[bagobones]

As per my original report the issue is also intermittent for me.

My browsers should be up to date.

Issue was present in booth chrome and Edge on windows across two separate PCs. Not present when viewing on iPhone however.

[bagobones]

Next time it occurs I will try changing my desktop resolution to a 16:9 aspect ratio resolution and re test, also would be helpful if anyone else having the issue confirmed they ALSO see it on a normal 16:9 monitor to confirm or rule this out.

[ad-on-is]

@bagobones I have a UW monitor, but it doesn't work on mobile FF either.

[DJSpyman]

Same here. Found out that it works on two of my machines and not on 2 others

The Working machines (MacBook and Clean Windows 10 PC) have in common that they show me the Firewall Card as Pie Chart

The non working machines show me the firewall live log (old fashionned with IP addresses and destination etc) which is also flickering as hell

Maybe thats something to check on your side as well.

[luca-ing]

Just for added confusion: I also observe this issue.

OS: Linux Browsers: Chrome (latest), Firefox (latest)

Ona whim, I tried removing all widgets but the traffic graph, but there was no improvement. The units, flickering as they are, are also quite incorrect (toggling between fractions of a byte, and several Kb, when in reality quite a bit of traffic should be flowing.

[fichtner]

I could reproduce this once for a couple of minutes but there was no indication of a JS error anywhere. The issue disappeared after trying to reproduce it more.

What we want to do here is to attempt updating Chart JS to version 4, but apparently it requires updating a no longer supported streaming plugin. It doesn't seem impossible, but we need to see how practical it is to go forward.

There have been a lot of fixes in Chart JS in the past 2 years. Chances are good that it has addressed this oddity already.

Cheers, Franco