From d1807db0410642d6bfb5faf37c2a9bf4ef5c9f3e Mon Sep 17 00:00:00 2001
From: Eric Briscoe <eric.j.briscoe@gmail.com>
Date: Fri, 28 Oct 2022 13:00:45 -0700
Subject: [PATCH] fix: Adds logging for SPA route navigation with React router
 (#21960)

---
 superset-frontend/src/logger/LogUtils.ts             |  1 +
 superset-frontend/src/middleware/loggerMiddleware.js |  4 ++--
 superset-frontend/src/utils/DebouncedMessageQueue.js |  4 ++--
 superset-frontend/src/views/App.tsx                  | 11 ++++++++++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/logger/LogUtils.ts b/superset-frontend/src/logger/LogUtils.ts
index 9da6f36f4..986bde816 100644
--- a/superset-frontend/src/logger/LogUtils.ts
+++ b/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([
diff --git a/superset-frontend/src/middleware/loggerMiddleware.js b/superset-frontend/src/middleware/loggerMiddleware.js
index 14df9af77..3797609d0 100644
--- a/superset-frontend/src/middleware/loggerMiddleware.js
+++ b/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,
diff --git a/superset-frontend/src/utils/DebouncedMessageQueue.js b/superset-frontend/src/utils/DebouncedMessageQueue.js
index 031963dda..6fd6c5b77 100644
--- a/superset-frontend/src/utils/DebouncedMessageQueue.js
+++ b/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;
   }
 
diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx
index 21a386849..e780242da 100644
--- a/superset-frontend/src/views/App.tsx
+++ b/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) {