handle multiple events fired by multiple triggers, prioritize navigationApi

Author: Abinet18

examples/web/examples/navigation/index.js

@@ -156,12 +156,28 @@ function testNavigationApiHash() {
 
 function testNavigationApiRoute(route, navigationType) {
   if ('navigation' in window) {
-    try {      
-
+    try {
+      // Log current navigation.activation.navigationType before navigation
+      console.log('🧭 Before Navigation API navigate():', {
+        currentNavigationType: window.navigation.activation?.navigationType,
+        targetRoute: route,
+        method: navigationType
+      });
 
       // Use Navigation API navigate method
       window.navigation.navigate(route);
 
+      // Log navigation.activation.navigationType after navigation
+      setTimeout(() => {
+        console.log('🧭 After Navigation API navigate():', {
+          newNavigationType: window.navigation.activation?.navigationType,
+          currentUrl: location.href,
+          expectedInstrumentation: {
+            'browser.navigation.type': window.navigation.activation?.navigationType || 'push'
+          }
+        });
+      }, 50);
+      
       // Update content after navigation
       setTimeout(() => {
         document.getElementById('nav-api-content').innerHTML = 
@@ -170,6 +186,7 @@ function testNavigationApiRoute(route, navigationType) {
             <p><strong>Target:</strong> <code>${route}</code></p>
             <p><strong>Current URL:</strong> <code>${window.location.href}</code></p>
             <p><strong>Navigation API:</strong> Supported ✓</p>
+            <button id="navApiHashBtn" style="display: none;">Nav API: Hash</button>
             <p class="console-note">📊 Check console for detailed navigation events and instrumentation data!</p>
           </div>`;
       }, 100);
@@ -201,13 +218,27 @@ function testNavigationApiRoute(route, navigationType) {
 }
 
 window.addEventListener('popstate', handleRouteChange);
-const loadTimeSetup = () => {
-  handleRouteChange();
+
+// Add event listeners when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
   attachEventListenersToLinks();
 
-  // Add event listeners
+  // Hash change button
   document.getElementById('hashChangeBtn').addEventListener('click', testHashChange);
+  
+  // Back button
   document.getElementById('backBtn').addEventListener('click', goBack);
-  document.getElementById('navApiHashBtn').addEventListener('click', testNavigationApiHash);
+  
+  // Navigation API hash button - only show if Navigation API is available
+  const navApiHashBtn = document.getElementById('navApiHashBtn');
+  if ('navigation' in window) {
+    navApiHashBtn.addEventListener('click', testNavigationApiHash);
+  } else {
+    navApiHashBtn.style.display = 'none';
+  }
+});
+
+const loadTimeSetup = () => {
+  handleRouteChange();
 };
 window.addEventListener('load', loadTimeSetup);

packages/instrumentation-browser-navigation/src/instrumentation.ts

@@ -75,29 +75,30 @@ export class BrowserNavigationInstrumentation extends InstrumentationBase<Browse
    */
   private _onSoftNavigation(changeState: string | null | undefined, navigationEvent?: any) {
     const referrer = this.oldUrl;
-    // For Navigation API events, always process as they may contain important state changes
-    // For other events, skip only if URL hasn't changed AND it's not a hash-only change
-    if (changeState !== 'navigate' && referrer === location.href) {
-      // Still allow hash changes even if URLs appear the same (normalization issues)
-      const isHashChange = this._isHashChange(referrer, location.href) || changeState === 'hashchange';
-      if (!isHashChange) {
-        return;
-      }
+    const currentUrl = (changeState === 'navigate' && navigationEvent?.destination?.url) 
+      ? navigationEvent.destination.url 
+      : location.href;
+    
+    if (referrer === currentUrl) {
+      return;
     }
-    const navType = this._mapChangeStateToType(changeState);
-    const sameDocument = this._determineSameDocument(changeState, navigationEvent, referrer, window.location.href);
-    const hashChange = this._determineHashChange(changeState, navigationEvent, referrer, window.location.href);
+    
+    const navType = this._mapChangeStateToType(changeState, navigationEvent);
+    const sameDocument = this._determineSameDocument(changeState, navigationEvent, referrer, currentUrl);
+    const hashChange = this._determineHashChange(changeState, navigationEvent, referrer, currentUrl);
     const navLogRecord: LogRecord = {
       eventName: EVENT_NAME,
       attributes: {
-        [URL_FULL_ATTRIBUTE]: this._sanitizeUrl(window.location.href),
+        [URL_FULL_ATTRIBUTE]: this._sanitizeUrl(currentUrl),
         [NAV_SAME_DOCUMENT]: sameDocument,
         [NAV_HASH_CHANGE]: hashChange,
         ...(navType ? { [NAV_TYPE]: navType } : {}),
       },
     };
     this._applyCustomLogRecordData(navLogRecord, this.applyCustomLogRecordData);
     this.eventLogger?.emit(navLogRecord);
+    
+    this.oldUrl = currentUrl;
   }
 
   public _setLogger(eventLogger: Logger) {
@@ -122,52 +123,41 @@ export class BrowserNavigationInstrumentation extends InstrumentationBase<Browse
   override enable() {
     const cfg = this.getConfig() as BrowserNavigationInstrumentationConfig;
     const useNavigationApiIfAvailable = !!cfg.useNavigationApiIfAvailable;
+    const hasNavigationApi = useNavigationApiIfAvailable && (window as any).navigation;
 
-    // Always patch history API
-    this._patchHistoryApi();
+    // Only patch history API if Navigation API is not available
+    if (!hasNavigationApi) {
+      this._patchHistoryApi();
+    }
 
     // Always listen for page load
     this._waitForPageLoad();
 
-    // Always listen for popstate (back/forward)
-    if (this._onPopStateHandler) {
-      window.removeEventListener('popstate', this._onPopStateHandler);
-      this._onPopStateHandler = undefined;
-    }
-    this._onPopStateHandler = () => {
-      this._onSoftNavigation('popstate');
-      this.oldUrl = location.href;
-    };
-    window.addEventListener('popstate', this._onPopStateHandler);
-
-    // Always listen for hashchange
-    if (this._onHashChangeHandler) {
-      window.removeEventListener('hashchange', this._onHashChangeHandler);
-      this._onHashChangeHandler = undefined;
-    }
-    this._onHashChangeHandler = () => {
-      this._onSoftNavigation('hashchange');
-      this.oldUrl = location.href;
-    };
-    window.addEventListener('hashchange', this._onHashChangeHandler);
-
-    // Navigation API listener (experimental)
-    if (this._onNavigateHandler) {
-      const nav = (window as any).navigation;
-      if (nav) {
-        nav.removeEventListener('navigate', this._onNavigateHandler);
+    if (hasNavigationApi) {
+      if (this._onNavigateHandler) {
+        const nav = (window as any).navigation;
+        if (nav) {
+          nav.removeEventListener('navigate', this._onNavigateHandler);
+        }
+        this._onNavigateHandler = undefined;
       }
-      this._onNavigateHandler = undefined;
-    }
-    if (useNavigationApiIfAvailable && (window as any).navigation) {
+      
       this._onNavigateHandler = (event: any) => {
         this._onSoftNavigation('navigate', event);
-        this.oldUrl = location.href;
       };
       (window as any).navigation.addEventListener(
         'navigate',
         this._onNavigateHandler
       );
+    } else {
+      if (this._onPopStateHandler) {
+        window.removeEventListener('popstate', this._onPopStateHandler);
+        this._onPopStateHandler = undefined;
+      }
+      this._onPopStateHandler = () => {
+        this._onSoftNavigation('popstate');
+      };
+      window.addEventListener('popstate', this._onPopStateHandler);
     }
   }
 
@@ -211,7 +201,6 @@ export class BrowserNavigationInstrumentation extends InstrumentationBase<Browse
         const oldUrl = plugin.oldUrl;
         if (url !== oldUrl) {
           plugin._onSoftNavigation(changeState);
-          plugin.oldUrl = location.href;
         }
         return result;
       };
@@ -255,6 +244,8 @@ export class BrowserNavigationInstrumentation extends InstrumentationBase<Browse
     try {
       const a = new URL(fromUrl, window.location.origin);
       const b = new URL(toUrl, window.location.origin);
+      // Only consider it a hash change if the base URL (origin + pathname + search) is identical
+      // and only the hash portion differs
       return (
         a.origin === b.origin &&
         a.pathname === b.pathname &&
@@ -367,7 +358,34 @@ export class BrowserNavigationInstrumentation extends InstrumentationBase<Browse
     }
   }
 
-  private _mapChangeStateToType(changeState?: string | null): NavigationType | undefined {
+  private _mapChangeStateToType(changeState?: string | null, navigationEvent?: any): NavigationType | undefined {
+    // For Navigation API events, check if it's a hash change first
+    if (changeState === 'navigate' && navigationEvent?.hashChange) {
+      // Hash changes are always considered 'push' operations semantically
+      return 'push';
+    }
+    
+    // For Navigation API events, determine type based on event properties
+    if (changeState === 'navigate') {
+      // Check if this is a back/forward navigation (traverse)
+      if (navigationEvent?.navigationType === 'traverse') {
+        return 'traverse';
+      }
+      
+      // Check if this is a replace operation
+      if (navigationEvent?.navigationType === 'replace') {
+        return 'replace';
+      }
+      
+      // Check if this is a reload
+      if (navigationEvent?.navigationType === 'reload') {
+        return 'reload';
+      }
+      
+      // Default to 'push' for new navigations (link clicks, programmatic navigation)
+      return 'push';
+    }
+    
     switch (changeState) {
       case 'pushState':
         return 'push';