Fix duplicate page navigation tracking in Application Insights (#773)

### Summary & Motivation

Fix duplicate page view tracking that occurred when navigating between
pages in the single-page application. Application Insights'
enableAutoRouteTracking feature was causing duplicate tracking with
TanStack Router because both systems independently detected navigation
events.

- Disable enableAutoRouteTracking in Application Insights configuration
- Create custom PageTracker component that integrates properly with
TanStack Router
- Track initial page load and subsequent navigations without duplicates
- Maintain existing JavaScript error tracking functionality

The enableAutoRouteTracking feature is designed for React Router and
listens to browser history changes (popstate, pushState/replaceState,
hashchange). Since TanStack Router also manipulates browser history,
both were detecting the same navigation event and sending duplicate page
views. The custom PageTracker component uses TanStack Router's onLoad
event and tracks pathname changes to ensure each navigation is tracked
exactly once.

### Downstream projects

1. Add the PageTracker component to
`your-self-contained-system/__root.tsx`:

 ```diff
 import { queryClient } from "@/shared/lib/api/client";
+import { PageTracker } from
"@repo/infrastructure/applicationInsights/PageTracker";
import { AuthenticationProvider } from
"@repo/infrastructure/auth/AuthenticationProvider";

 function Root() {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeModeProvider>
         <ReactAriaRouterProvider>
<AuthenticationProvider navigate={(options) => navigate(options)}>
 +           <PageTracker />
             <Outlet />
           </AuthenticationProvider>
         </ReactAriaRouterProvider>
       </ThemeModeProvider>
     </QueryClientProvider>
   );
 }
 ```

### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/account-management/WebApp/routes/__root.tsx

@@ -1,4 +1,5 @@
 import { queryClient } from "@/shared/lib/api/client";
+import { PageTracker } from "@repo/infrastructure/applicationInsights/PageTracker";
 import { AuthenticationProvider } from "@repo/infrastructure/auth/AuthenticationProvider";
 import { ErrorPage } from "@repo/infrastructure/errorComponents/ErrorPage";
 import { NotFound } from "@repo/infrastructure/errorComponents/NotFoundPage";
@@ -23,6 +24,7 @@ function Root() {
       <ThemeModeProvider>
         <ReactAriaRouterProvider>
           <AuthenticationProvider navigate={(options) => navigate(options)}>
+            <PageTracker />
             <Outlet />
           </AuthenticationProvider>
         </ReactAriaRouterProvider>

application/back-office/WebApp/routes/__root.tsx

@@ -1,4 +1,5 @@
 import { queryClient } from "@/shared/lib/api/client";
+import { PageTracker } from "@repo/infrastructure/applicationInsights/PageTracker";
 import { AuthenticationProvider } from "@repo/infrastructure/auth/AuthenticationProvider";
 import { ErrorPage } from "@repo/infrastructure/errorComponents/ErrorPage";
 import { NotFound } from "@repo/infrastructure/errorComponents/NotFoundPage";
@@ -23,6 +24,7 @@ function Root() {
       <ThemeModeProvider>
         <ReactAriaRouterProvider>
           <AuthenticationProvider navigate={(options) => navigate(options)}>
+            <PageTracker />
             <Outlet />
           </AuthenticationProvider>
         </ReactAriaRouterProvider>

application/shared-kernel/SharedKernel/Endpoints/TrackEndpoints.cs

@@ -41,7 +41,7 @@ ILogger<string> logger
                     var telemetry = new PageViewTelemetry
                     {
                         Name = trackRequest.Data.BaseData.Name,
-                        Url = new Uri(trackRequest.Data.BaseData.Url),
+                        Url = Uri.TryCreate(trackRequest.Data.BaseData.Url, UriKind.Absolute, out var pageViewUri) ? pageViewUri : null,
                         Duration = trackRequest.Data.BaseData.Duration,
                         Timestamp = trackRequest.Time,
                         Id = trackRequest.Data.BaseData.Id
@@ -59,7 +59,7 @@ ILogger<string> logger
                     var telemetry = new PageViewPerformanceTelemetry
                     {
                         Name = trackRequest.Data.BaseData.Name,
-                        Url = new Uri(trackRequest.Data.BaseData.Url),
+                        Url = Uri.TryCreate(trackRequest.Data.BaseData.Url, UriKind.Absolute, out var perfUri) ? perfUri : null,
                         Duration = trackRequest.Data.BaseData.Duration,
                         Timestamp = trackRequest.Time,
                         Id = trackRequest.Data.BaseData.Id,

application/shared-webapp/infrastructure/applicationInsights/ApplicationInsightsProvider.tsx

@@ -34,8 +34,8 @@ const applicationInsights = new ApplicationInsights({
     disableInstrumentationKeyValidation: true,
     // Set the endpoint URL to our custom endpoint
     endpointUrl: "/api/track",
-    // Enable auto route tracking for React Router
-    enableAutoRouteTracking: true,
+    // Disable auto route tracking (not compatible with TanStack Router)
+    enableAutoRouteTracking: false,
     // Instrument error tracking
     autoExceptionInstrumented: true,
     autoUnhandledPromiseInstrumented: true,
@@ -60,5 +60,6 @@ const applicationInsights = new ApplicationInsights({
 
 // Load the Application Insights script
 applicationInsights.loadAppInsights();
-// Track the initial page view
-applicationInsights.trackPageView();
+
+// Export for error tracking
+export { applicationInsights };

application/shared-webapp/infrastructure/applicationInsights/PageTracker.tsx

@@ -0,0 +1,35 @@
+import { useRouter } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
+import { applicationInsights } from "./ApplicationInsightsProvider";
+
+export function PageTracker() {
+  const router = useRouter();
+  const lastPathname = useRef<string>("");
+
+  useEffect(() => {
+    // Track initial page view
+    const pathname = router.state.location.pathname;
+    if (pathname !== lastPathname.current) {
+      applicationInsights.trackPageView({
+        name: pathname,
+        uri: window.location.href
+      });
+      lastPathname.current = pathname;
+    }
+
+    // Subscribe to navigation events
+    const unsubscribe = router.subscribe("onLoad", ({ toLocation }) => {
+      if (toLocation.pathname !== lastPathname.current) {
+        applicationInsights.trackPageView({
+          name: toLocation.pathname,
+          uri: toLocation.href
+        });
+        lastPathname.current = toLocation.pathname;
+      }
+    });
+
+    return unsubscribe;
+  }, [router]);
+
+  return null;
+}

application/shared-webapp/infrastructure/http/errorHandler.ts

@@ -8,6 +8,7 @@
  * 4. Used by both httpClient.ts and queryClient.ts to ensure consistent error handling
  * 5. Shows toast notifications to the user for unhandled errors
  */
+import { applicationInsights } from "@repo/infrastructure/applicationInsights/ApplicationInsightsProvider";
 import { toastQueue } from "@repo/ui/components/Toast";
 
 // RFC 7807 Problem Details format
@@ -98,6 +99,9 @@ function showTimeoutToast(): void {
 }
 
 function showUnknownErrorToast(error: Error) {
+  // Track the error in Application Insights
+  applicationInsights.trackException({ exception: error });
+
   toastQueue.add({
     title: "Unknown Error",
     description: `An unknown error occured (${error})`,
@@ -270,7 +274,15 @@ export function setupGlobalErrorHandlers() {
     }
 
     processedErrors.add(event.reason);
-    showErrorToast(event.reason);
+
+    // Check if it's an HttpError or regular Error
+    if (event.reason instanceof Error && !("kind" in event.reason)) {
+      // Regular JavaScript error - track it and show toast
+      showUnknownErrorToast(event.reason);
+    } else {
+      // HttpError - use existing error handling
+      showErrorToast(event.reason);
+    }
   });
 
   // Handle uncaught exceptions
@@ -285,7 +297,15 @@ export function setupGlobalErrorHandlers() {
     }
 
     processedErrors.add(event.error);
-    showErrorToast(event.error);
+
+    // Track JavaScript errors in Application Insights and show toast
+    if (event.error instanceof Error) {
+      showUnknownErrorToast(event.error);
+    } else {
+      // Create an Error object for non-Error exceptions
+      const error = new Error(String(event.error));
+      showUnknownErrorToast(error);
+    }
 
     return true; // Stop error propagation
   });