fix: Adds logging for SPA route navigation with React router (#21960)

superset-frontend/src/logger/LogUtils.ts

@@ -44,6 +44,7 @@ export const LOG_ACTIONS_DATASET_CREATION_SCHEMA_CANCELLATION =
 export const LOG_ACTIONS_DATASET_CREATION_TABLE_CANCELLATION =
   'dataset_creation_table_cancellation';
 export const LOG_ACTIONS_DATASET_CREATION_SUCCESS = 'dataset_creation_success';
+export const LOG_ACTIONS_SPA_NAVIGATION = 'spa_navigation';
 
 // Log event types --------------------------------------------------------------
 export const LOG_EVENT_TYPE_TIMING = new Set([

superset-frontend/src/middleware/loggerMiddleware.js

@@ -78,13 +78,13 @@ const loggerMiddleware = store => next => action => {
     impression_id: impressionId,
     version: 'v2',
   };
-  if (dashboardInfo) {
+  if (dashboardInfo?.id) {
     logMetadata = {
       source: 'dashboard',
       source_id: dashboardInfo.id,
       ...logMetadata,
     };
-  } else if (explore) {
+  } else if (explore?.slice) {
     logMetadata = {
       source: 'explore',
       source_id: explore.slice ? explore.slice.slice_id : 0,

superset-frontend/src/utils/DebouncedMessageQueue.js

@@ -26,9 +26,9 @@ class DebouncedMessageQueue {
   }) {
     this.queue = [];
     this.sizeThreshold = sizeThreshold;
-    this.delayThrehold = delayThreshold;
+    this.delayThreshold = delayThreshold;
 
-    this.trigger = debounce(this.trigger.bind(this), this.delayThrehold);
+    this.trigger = debounce(this.trigger.bind(this), this.delayThreshold);
     this.callback = callback;
   }
 

superset-frontend/src/views/App.tsx

@@ -24,6 +24,7 @@ import {
   Route,
   useLocation,
 } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
 import { GlobalStyles } from 'src/GlobalStyles';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import Loading from 'src/components/Loading';
@@ -33,8 +34,10 @@ import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import setupApp from 'src/setup/setupApp';
 import setupPlugins from 'src/setup/setupPlugins';
 import { routes, isFrontendRoute } from 'src/views/routes';
-import { Logger } from 'src/logger/LogUtils';
+import { Logger, LOG_ACTIONS_SPA_NAVIGATION } from 'src/logger/LogUtils';
 import setupExtensions from 'src/setup/setupExtensions';
+import { logEvent } from 'src/logger/actions';
+import { store } from 'src/views/store';
 import { RootContextProviders } from './RootContextProviders';
 import { ScrollToTop } from './ScrollToTop';
 import QueryProvider from './QueryProvider';
@@ -49,9 +52,15 @@ const menu = {
 };
 let lastLocationPathname: string;
 
+const boundActions = bindActionCreators({ logEvent }, store.dispatch);
+
 const LocationPathnameLogger = () => {
   const location = useLocation();
   useEffect(() => {
+    // This will log client side route changes for single page app user navigation
+    boundActions.logEvent(LOG_ACTIONS_SPA_NAVIGATION, {
+      path: location.pathname,
+    });
     // reset performance logger timer start point to avoid soft navigation
     // cause dashboard perf measurement problem
     if (lastLocationPathname && lastLocationPathname !== location.pathname) {