When using Realtime, race conditions between browser and function loading can occur

[hiddenicon]

When doing real-time in a new window, the graph does not render. Looks to be jquery based as there is a error in the console regarding "ImageOptionsChanged is not defined".

Chrome version 81
Edge version 81
Firefox - works in any version

I've tried clearing the cacti realtime cache directory.
I've tried clearing browser cache (all options, cleared for all time)
Realtime inline in the browser works fine, only affected from New Window realtime window.

[TheWitness]

You must have a problem with file permissions. Check the realtime.js is readable by the browser. You did not indicate your Cacti version as well. Suggest you update to 1.2.12 if that is not the version you are running.

[hiddenicon]

Sorry, I did leave out the versioning. This started to happen after upgrading to 1.2.12. We were on 1.2.10 prior and it was working fine.

It is only Chrome based browsers and it is happening across various OS platforms, users, and PCs. We use Cacti heavily for work and my entire team is having this issue. It is only on pop-out, not inline. It's happening on Win10, MacOS, and Ubuntu linux when using Chrome based browsers. Firefox works on all of the above. If it's a permissions thing, then it is happening at a common level like Chrome based browsers.

Not sure what to check and how to check.

[netniV]

OK, so you are using realtime in popup mode and that experiences the above error in the console? I'll give it a try on my basic setup and see if I get the same.

[hiddenicon]

Correct. Only appearing in Chrome based and only with popup mode. We get the spinner because nothing loads.

Here's a screenshot showing both errors; same issue though.

[netniV]

So here is the breakdown which concurs with what @TheWitness said earlier, something is blocking access to the realtime.js script. Whether that is file permissions or browser security, you'd have to investigate but basically realtime.js is included by html_common_header() which is in lib/html.php. That is called pretty much all the time... Can you check your page source to see if you can see a script tag for it?

[netniV]

Btw, just for reference, html_common_header() is included at line 337 in graph_realtime.php, so you should have it there as a source.

[hiddenicon]

I think it has to be something else. Here are 3 things I've just tried.

1. From a few PCs having the issue, they are working fine to our "lab" VM running cacti 1.2.8 using the same browsers.
2. realtime.js is in the source as a script tag, and I see it loading in the network waterfall.

3. I've put in a JS alert into realtime.js at the top, and I'm getting alerted on every page I go to (as you said it's included in everything) including the popup realtime window.

I've scoured through our anti-virus and other security tools and disabled them and don't see anything in their logs. I see the same results on an Ubuntu 19.04 box, fresh OS install, running Chrome doesn't work; Firefox does.

Some other weirdness I see is once the realtime popup window comes up, it doesn't load as we know. If I change any of the drop-downs or check the thumbnails checkbox it refreshes the window, I see the graph now with data but it's not not auto refreshing. If I check the thumbnails checkbox or change a drop down again, the graphs refreshes once again with new/good data, but doesn't auto refresh. It just sits there.

So, I threw in an alert in the imageOptionsChanged() function to see when it was being fired.

The only time I get an alert is when I'm manually checking the dropdowns/thumbnails checkbox at the top. I don't see it firing when I first load the popup window.

I'm not going against what you guys are saying, I'm just stumped and want to see what is needed to fix it even if it's something on my side.

[netniV]

Automatic refresh works off setTimeout so that should work unless chrome seems that the source is a long running script. Do you see any other errors or warning s?

[hiddenicon]

The only errors I see are the jQuery errors in the console. Looks to be line 205 in the source, which is this section:

So if that is failing there and not completing, then the setTimeout function isn't running. Which explains why it's not auto refreshing.

[hiddenicon]

Another quick update. I've commented out the imageOptionsChanged function in the jQuery onload function and now realtime is working in the popup for Chrome.

I don't get the graph initially, it does load after the first timer (5 seconds in this case). I'm assuming that's because the imageOptionsChanged('init') function didn't run.

[netniV]

Thanks I’ll take a look and see whether I can See why

[netniV]

One of our other users has actually found a fix for this when they raised their own issue in #3580. Can you see if that fix works for you? If so, I will apply it to the code unless @ahouston wants to submit a PR with a CHANGELOG entry for it against this issue tracker.

[ahouston]

One of our other users has actually found a fix for this when they raised their own issue in #3580. Can you see if that fix works for you? If so, I will apply it to the code unless @ahouston wants to submit a PR with a CHANGELOG entry for it against this issue tracker.

Submitted Pull Request: #3587

[hiddenicon]

Testing the code change for the window onload from #3587 is working for me now. Tested on a few of our 'troubled' PCs and all are good now.

I had the thought that the jQuery onload was loading before realtime.js was fully loaded. Wasn't sure exactly how to test that.