Dashboard: Real time visitors trigger javascript error when refreshing #18916

Expected Behavior

On XHR request to https://my-domain/index.php?date=today&module=Live&action=getLastVisitsStart&segment=&idSite=1&period=day, real time visitors list is refreshed and hovering visitor log icons display a tooltip.

Current Behavior

If mouse is hovering a visitor log icon when XHR request to https://my-domain/index.php?date=today&module=Live&action=getLastVisitsStart&segment=&idSite=1&period=day happens, real time visitors list get messed up, stop refreshing and hovering visitor log icons does not display a tooltip.

Steps to Reproduce (for Bugs)

1. Mouse hover any visitor log icon except the View Visitor Profile
2. Wait for XHR request to https://my-domain/index.php?date=today&module=Live&action=getLastVisitsStart&segment=&idSite=1&period=day to happens.
3. Any visitors details above the one who triggered the bug will get removed from the list and real time visitors won't refresh anymore until page is refreshed

Your Environment

• Matomo Version: 4.8.0 (Updated from 4.7.1 via dashboard)
• PHP Version: 8.1
• Server Operating System: Ubuntu
• Additionally installed plugins: Bot Tracker
• Browser: Chrome / Firefox
• Operating System: Windows 10

Error log

Uncaught TypeError: can't access property "tooltip", this._find(...) is null
    remove https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    i https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    dispatch https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:5
    handle https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:5
    trigger https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    triggerHandler https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    cleanData https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    cleanData https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:114
    va https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:5
    remove https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:5
    _parseItem https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2487
    V.widget/</a[e]< https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    _parseResponse https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2485
    V.widget/</a[e]< https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    _update https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2481
    success https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    i https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:4
    fireWith https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:4
    z https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    c https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    send https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    ajax https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    value https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    value https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    _update https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2484
    V.widget/</a[e]< https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    updateInterval https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2484
    setTimeout handler*_update/< https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2484
    success https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    i https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:4
    fireWith https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:4
    z https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    c https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    send https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    ajax https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:6
    value https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    value https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:3197
    _update https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2484
    V.widget/</a[e]< https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:19
    updateInterval https://my-domain/index.php?module=Proxy&action=getCoreJs&cb=a9692c9ae5fea1d8b6944a115f152776:2490
index.php:19:251797

This issue has been mentioned on Matomo forums. There might be relevant details there:

https://forum.matomo.org/t/real-time-ajax-request-puts-old-entry-to-the-front/45080/2

I can confirm this issue. The ordering of the entries won't be correct after this error happens:

Hi there. Thanks for creating the issue. I was able to reproduce that locally. Not yet sure what the problem is, but the error stack trace without using a minified js is this one:

Any updates on this ? i did apply the pull request manually, but the issue still exists...

@axwell did you clear the cache and/or tmp folder of Matomo after applying the changes?

@axwell do you want to try again, I think this time it fixed it. I can see the error stay in catch=>e log on my one.

@peterhashair the error does not appear anymore, but the live results are not ok, after a few minutes the latest visits disappear and i need to do a hard refresh.
I do not have reproduction steps at this moment, i do not know if it is related to this or not.

This issue was seen by others users as the above forum link states.

Later edit:
index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4 Uncaught Error: cannot call methods on liveWidget prior to initialization; attempted to call method 'started' at Function.error (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4:1813) at HTMLUListElement.<anonymous> (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:19:2205) at Function.each (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4:2861) at n.fn.init.each (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4:845) at n.fn.init.V.fn.<computed> [as liveWidget] (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:19:1944) at isStarted (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2499:72) at onTabBlur (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2500:25) at HTMLDocument.<anonymous> (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2502:65) at Object._change (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:557:512) at HTMLDocument.listener (index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:559:38) error @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4 (anonymous) @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:19 each @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4 each @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:4 V.fn.<computed> @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:19 isStarted @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2499 onTabBlur @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2500 (anonymous) @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:2502 _change @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:557 listener @ index.php?module=Proxy&action=getCoreJs&cb=3ce62b8ac424ca8fc7c6e147c04d31ef:559

@axwell do you want to try again, I think this time it fixed it. I can see the error stay in catch=>e log on my one.

Haven't checked the commits yet, just a thought here...

To me, the problem comes from the moment a request is sent to the server to refresh the real time visitors list.
Wouldn't it works better, using Promise(), to wait for the request result before relaoding DOM and re-apply events if needed ?

@Preciel Thanks for the comments, but I think this is already under the Promise callback. If I saw this correctly is caused by overlap hover 2 icon shows 2 tooltips and at the same time, and the refresh happened.

@axwell will give a another go.

The errors were caused by a jQuery UI bug, ref https://github.com/jquery/jquery-ui/pull/1994. Update Jquery UI version to 1.13.1, the error disappeared.

The errors were caused by a jQuery UI bug, ref jquery/jquery-ui#1994. Update Jquery UI version to 1.13.1, the error disappeared.

Will give it a try, thanks for the information !

@Preciel that fix will be included in the next Matomo release as well :) .