feat: cancel queries on navigation-ish

frontend/src/scenes/dashboard/Dashboard.tsx

@@ -51,10 +51,15 @@ function DashboardScene(): JSX.Element {
         dashboardMode,
         receivedErrorsFromAPI,
     } = useValues(dashboardLogic)
-    const { setDashboardMode, setDates, reportDashboardViewed, setProperties } = useActions(dashboardLogic)
+    const { setDashboardMode, setDates, reportDashboardViewed, setProperties, abortAnyRunningQuery } =
+        useActions(dashboardLogic)
 
     useEffect(() => {
         reportDashboardViewed()
+        return () => {
+            // request cancellation of any running queries when this component is no longer in the dom
+            abortAnyRunningQuery()
+        }
     }, [])
 
     useKeyboardHotkeys(

frontend/src/scenes/dashboard/dashboardLogic.tsx

@@ -187,9 +187,10 @@ export const dashboardLogic = kea<dashboardLogicType>([
         loadingDashboardItemsStarted: (action: string, dashboardQueryId: string) => ({ action, dashboardQueryId }),
         setInitialLoadResponseBytes: (responseBytes: number) => ({ responseBytes }),
         abortQuery: (payload: { dashboardQueryId: string; queryId: string; queryStartTime: number }) => payload,
+        abortAnyRunningQuery: true,
     }),
 
-    loaders(({ actions, props, values, cache }) => ({
+    loaders(({ actions, props, values }) => ({
         // TODO this is a terrible name... it is "dashboard" but there's a "dashboard" reducer ¯\_(ツ)_/¯
         allItems: [
             null as DashboardType | null,
@@ -225,10 +226,7 @@ export const dashboardLogic = kea<dashboardLogicType>([
                         return values.allItems
                     }
 
-                    if (cache.abortController) {
-                        cache.abortController.abort()
-                    }
-                    cache.abortController = null
+                    actions.abortAnyRunningQuery()
 
                     try {
                         return await api.update(`api/projects/${values.currentTeamId}/dashboards/${props.id}`, {
@@ -778,7 +776,6 @@ export const dashboardLogic = kea<dashboardLogicType>([
             }
         },
         beforeUnmount: () => {
-            cache.abortController?.abort()
             if (cache.autoRefreshInterval) {
                 window.clearInterval(cache.autoRefreshInterval)
                 cache.autoRefreshInterval = null
@@ -926,11 +923,8 @@ export const dashboardLogic = kea<dashboardLogicType>([
                 true
             )
 
-            // If a query is in progress, kill that query
             // we will use one abort controller for all insight queries for this dashboard
-            if (cache.abortController) {
-                cache.abortController.abort()
-            }
+            actions.abortAnyRunningQuery()
             cache.abortController = new AbortController()
             const methodOptions: ApiMethodOptions = {
                 signal: cache.abortController.signal,
@@ -997,7 +991,6 @@ export const dashboardLogic = kea<dashboardLogicType>([
                 refreshesFinished += 1
                 if (refreshesFinished === insights.length) {
                     breakpoint()
-                    cache.abortController = null
 
                     const payload: TimeToSeeDataPayload = {
                         type: 'dashboard_load',
@@ -1162,6 +1155,12 @@ export const dashboardLogic = kea<dashboardLogicType>([
                 actions.setShouldReportOnAPILoad(true)
             }
         },
+        abortAnyRunningQuery: () => {
+            if (cache.abortController) {
+                cache.abortController.abort()
+                cache.abortController = null
+            }
+        },
         abortQuery: async ({ dashboardQueryId, queryId, queryStartTime }) => {
             const { currentTeamId } = values
             if (values.featureFlags[FEATURE_FLAGS.CANCEL_RUNNING_QUERIES]) {

frontend/src/scenes/insights/Insight.tsx

@@ -58,9 +58,17 @@ export function Insight({ insightId }: { insightId: InsightShortId | 'new' }): J
         tagLoading,
         insightSaving,
         exporterResourceParams,
+        showErrorMessage,
     } = useValues(logic)
     useMountedLogic(insightCommandLogic(insightProps))
-    const { saveInsight, setInsightMetadata, saveAs, reportInsightViewedForRecentInsights } = useActions(logic)
+    const {
+        saveInsight,
+        setInsightMetadata,
+        saveAs,
+        reportInsightViewedForRecentInsights,
+        abortAnyRunningQuery,
+        loadResults,
+    } = useActions(logic)
     const { duplicateInsight, loadInsights } = useActions(savedInsightsLogic)
 
     const { hasAvailableFeature } = useValues(userLogic)
@@ -74,6 +82,19 @@ export function Insight({ insightId }: { insightId: InsightShortId | 'new' }): J
         reportInsightViewedForRecentInsights()
     }, [insightId])
 
+    useEffect(() => {
+        if (showErrorMessage) {
+            // if mounting and logic is already in error state, then
+            // this insight was probably cancelled on navigation and
+            // it is safe to reload
+            loadResults()
+        }
+        return () => {
+            // request cancellation of any running queries when this component is no longer in the dom
+            abortAnyRunningQuery()
+        }
+    }, [])
+
     const usingEditorPanels = featureFlags[FEATURE_FLAGS.INSIGHT_EDITOR_PANELS]
 
     // Show the skeleton if loading an insight for which we only know the id

frontend/src/scenes/insights/insightLogic.ts

@@ -171,6 +171,7 @@ export const insightLogic = kea<insightLogicType>([
         toggleVisibility: (index: number) => ({ index }),
         setHiddenById: (entry: Record<string, boolean | undefined>) => ({ entry }),
         highlightSeries: (seriesIndex: number | null) => ({ seriesIndex }),
+        abortAnyRunningQuery: true,
     }),
     loaders(({ actions, cache, values, props }) => ({
         insight: [
@@ -295,11 +296,11 @@ export const insightLogic = kea<insightLogicType>([
                     // fetch this now, as it might be different when we report below
                     const scene = sceneLogic.isMounted() ? sceneLogic.values.scene : null
 
-                    // If a query is in progress, kill that query
-                    if (cache.abortController) {
-                        cache.abortController.abort()
-                    }
+                    actions.abortAnyRunningQuery()
                     cache.abortController = new AbortController()
+                    const methodOptions: ApiMethodOptions = {
+                        signal: cache.abortController.signal,
+                    }
 
                     const { filters } = values
 
@@ -316,9 +317,6 @@ export const insightLogic = kea<insightLogicType>([
                     let apiUrl: string = ''
                     const { currentTeamId } = values
 
-                    const methodOptions: ApiMethodOptions = {
-                        signal: cache.abortController.signal,
-                    }
                     if (!currentTeamId) {
                         throw new Error("Can't load insight before current project is determined.")
                     }
@@ -355,7 +353,6 @@ export const insightLogic = kea<insightLogicType>([
                             })
                         }
                         breakpoint()
-                        cache.abortController = null
                         actions.endQuery({
                             queryId,
                             view: insight,
@@ -380,7 +377,6 @@ export const insightLogic = kea<insightLogicType>([
                     }
 
                     breakpoint()
-                    cache.abortController = null
                     actions.endQuery({
                         queryId,
                         view: (values.filters.insight as InsightType) || InsightType.TRENDS,
@@ -749,7 +745,7 @@ export const insightLogic = kea<insightLogicType>([
             },
         ],
     }),
-    listeners(({ actions, selectors, values }) => ({
+    listeners(({ actions, selectors, values, cache }) => ({
         setFiltersMerge: ({ filters }) => {
             actions.setFilters({ ...values.filters, ...filters })
         },
@@ -862,6 +858,12 @@ export const insightLogic = kea<insightLogicType>([
             )
             actions.setIsLoading(true)
         },
+        abortAnyRunningQuery: () => {
+            if (cache.abortController) {
+                cache.abortController.abort()
+                cache.abortController = null
+            }
+        },
         abortQuery: async ({ queryId }) => {
             const { currentTeamId } = values
 
@@ -1055,7 +1057,7 @@ export const insightLogic = kea<insightLogicType>([
             }
         },
     })),
-    events(({ props, cache, values, actions }) => ({
+    events(({ props, values, actions }) => ({
         afterMount: () => {
             if (!props.cachedInsight || !props.cachedInsight?.result || !!props.cachedInsight?.filters) {
                 if (
@@ -1088,7 +1090,6 @@ export const insightLogic = kea<insightLogicType>([
             }
         },
         beforeUnmount: () => {
-            cache.abortController?.abort()
             if (values.timeout) {
                 clearTimeout(values.timeout)
             }