data-umami-event Attributes Cause Navigation to Hang for Relative Links

[dkoprowski]

Describe the Bug

Description

When adding data-umami-event and data-umami-event-href attributes to <a> elements with relative href values in my top navigation, the links fail to navigate. Clicking on such links results in the browser appearing unresponsive, as the navigation is blocked indefinitely. Tracking events (send) are visible in the browser's network tab but remain in a pending state indefinitely.

I am using Umami Cloud and self-host the client-side script (https://analytics.umami.is/script.js) to avoid ad blockers. The client-side script is updated automatically on every deploy.

Steps to Reproduce

1. Add an <a> element with relative href and Umami attributes:

   <a 
     href="/relative/" 
     data-umami-event="header-link click" 
     data-umami-event-href="/relative/"
   >
     Link
   </a>

2. Deploy the site and load it in any browser.
3. Click on the link with the above attributes.

Expected Behavior

The link should navigate to the specified href (/relative/) while sending the Umami tracking event.

Observed Behavior

• The navigation does not occur.
• In the browser’s network tab, the Umami tracking request (send) remains pending indefinitely.
• No errors are logged in the console.

Environment

• Umami Version: Cloud-hosted (latest)
• Client-side Script: Self-hosted https://analytics.umami.is/script.js
• Framework: Astro version 4.16.16
• Browser: Windows 11; Tested in Edge 131, Firefox 133.0.3
• Hosting: Cloudflare Pages

Workaround

Removing the data-umami-event and data-umami-event-href attributes resolves the issue, but tracking click events on links becomes impossible.

Possible Cause

It seems the Umami tracking script may be blocking navigation until the tracking request completes. However, in this case, the request remains in a pending state indefinitely, which prevents navigation.

Suggestions

• Provide a configuration option (e.g., data-umami-skip-navigation) to disable navigation blocking behavior for specific links.
• Implement a timeout for pending tracking requests to prevent indefinite blocking.

Additional Notes

• I understand that blocking navigation may be intended to ensure events are tracked, but a timeout or asynchronous approach would improve user experience in scenarios like this.

Debugging Details

• The issue occurs specifically with relative href values (e.g., /relative/) when combined with data-umami-event attributes.
• The problem persists despite the self-hosted setup and updating the client-side script on every deploy.
• Tracking events (send) are visible in the browser's network tab but remain in a pending state indefinitely.

Let me know if you need further clarification or testing help!

Database

Umami Cloud

Relevant log output

No response

Which Umami version are you using? (if relevant)

No response

Which browser are you using? (if relevant)

Firefox, Edge

How are you deploying your application? (if relevant)

Cloudflare Pages

[mikecao]

You're right that the behavior is to block navigation until the event is registered. Usually this works without problems, but we had an issue with Umami Cloud this morning that caused timeouts. It should be working normally again.

The configuration option doesn't make sense, because if you're not blocking, then you would lose the event. In the past we experimented with navigator beacon and other solutions but those proved unreliable. However, we are going to implement some fixes so that timeouts don't block for as long.