Page leave confirmation modal conflicts with Matomo(beforeunload event) #20165

Expected Behavior

Browser window is not closed and user sees browser confirmation modal.

Current Behavior

In some browsers browser window is closed and user does see browser confirmation modal.
In some browsers browser window is closed and user sees browser confirmation modal.

Context

In our application when some form has changes and user tries to close browser window, we show confirmation modal using beforeunload event like this:

const handleWindowClose = useCallback((event) => {
  (event || window.event).returnValue = true;
}, []);

useEffect(() => {
  if (formHasChanges) {
    window.addEventListener('beforeunload', handleWindowClose);
  } else {
    window.removeEventListener('beforeunload', handleWindowClose);
  }
}, [formHasChanges]);

All worked as expected, user saw browser confirmation modal and browser window was open until user clicks confirmation button in this modal.

But then we added Matomo to our application and after that in some browsers user saw browser confirmation modal in some user did not see it and browser window was closed. It was closed even before user clicked confirmation button in the modal.

After investigation it looks like this bug is related to beforeUnloadHandler function in Matomo script. Looks like this do/while execution takes too much time and as far as I remember browser closes window if beforeunload event execution takes too much time.

Your Environment

• Matomo Version: 4.12.3
• PHP Version: 8.1.12
• Browser: Opera 94.0.4606.38 (x86_64), Safari 6.2 (18614.3.7.1.5)
• Operating System: MacOS, Windows 10

Thanks for reporting this @pavelspichonak, we'll need to review this delay loop and how it interacts with modals displayed via beforeUnloadHandler when plugin unload events exceed the timeout.

I'll assign this issue for prioritisation :+1: