[Logs UI] Fix errors during navigation

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_capabilities.tsx

@@ -6,7 +6,7 @@
 
 import createContainer from 'constate';
 import { useMemo, useState, useEffect } from 'react';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import {
   getMlCapabilitiesResponsePayloadRT,
   GetMlCapabilitiesResponsePayload,
@@ -31,6 +31,7 @@ export const useLogAnalysisCapabilities = () => {
       onResolve: (response) => {
         setMlCapabilities(response);
       },
+      onReject: ignoreCanceledPromise,
     },
     []
   );

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
+import { useMountedState } from 'react-use';
 import { DatasetFilter } from '../../../../common/log_analysis';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
@@ -19,6 +20,7 @@ export const useLogAnalysisModule = <JobType extends string>({
   moduleDescriptor: ModuleDescriptor<JobType>;
 }) => {
   const { services } = useKibanaContextForPlugin();
+  const isMounted = useMountedState();
   const { spaceId, sourceId, timestampField } = sourceConfiguration;
   const [moduleStatus, dispatchModuleStatus] = useModuleStatus(moduleDescriptor.jobTypes);
 
@@ -30,15 +32,19 @@ export const useLogAnalysisModule = <JobType extends string>({
         return await moduleDescriptor.getJobSummary(spaceId, sourceId, services.http.fetch);
       },
       onResolve: (jobResponse) => {
-        dispatchModuleStatus({
-          type: 'fetchedJobStatuses',
-          payload: jobResponse,
-          spaceId,
-          sourceId,
-        });
+        if (isMounted()) {
+          dispatchModuleStatus({
+            type: 'fetchedJobStatuses',
+            payload: jobResponse,
+            spaceId,
+            sourceId,
+          });
+        }
       },
       onReject: () => {
-        dispatchModuleStatus({ type: 'failedFetchingJobStatuses' });
+        if (isMounted()) {
+          dispatchModuleStatus({ type: 'failedFetchingJobStatuses' });
+        }
       },
     },
     [spaceId, sourceId]

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_module_definition.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useCallback, useMemo, useState } from 'react';
+import { useMountedState } from 'react-use';
 import { getJobId } from '../../../../common/log_analysis';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
@@ -20,6 +21,7 @@ export const useLogAnalysisModuleDefinition = <JobType extends string>({
   moduleDescriptor: ModuleDescriptor<JobType>;
 }) => {
   const { services } = useKibanaContextForPlugin();
+  const isMounted = useMountedState();
   const [moduleDefinition, setModuleDefinition] = useState<
     GetMlModuleResponsePayload | undefined
   >();
@@ -45,10 +47,14 @@ export const useLogAnalysisModuleDefinition = <JobType extends string>({
         return await moduleDescriptor.getModuleDefinition(services.http.fetch);
       },
       onResolve: (response) => {
-        setModuleDefinition(response);
+        if (isMounted()) {
+          setModuleDefinition(response);
+        }
       },
       onReject: () => {
-        setModuleDefinition(undefined);
+        if (isMounted()) {
+          setModuleDefinition(undefined);
+        }
       },
     },
     [moduleDescriptor.getModuleDefinition, spaceId, sourceId]

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_setup_state.ts

@@ -19,7 +19,7 @@ import {
   ValidationUIError,
 } from '../../../components/logging/log_analysis_setup/initial_configuration_step';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { ModuleDescriptor, ModuleSourceConfiguration } from './log_analysis_module_types';
 
 type SetupHandler = (
@@ -193,6 +193,7 @@ export const useAnalysisSetupState = <JobType extends string>({
       onResolve: ({ data: { datasets } }) => {
         updateIndicesWithAvailableDatasets(datasets);
       },
+      onReject: ignoreCanceledPromise,
     },
     [validIndexNames, sourceConfiguration.timestampField, startTime, endTime]
   );

x-pack/plugins/infra/public/containers/logs/log_entries/index.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { useEffect, useState, useReducer, useCallback } from 'react';
+import { useMountedState } from 'react-use';
 import createContainer from 'constate';
 import { pick, throttle } from 'lodash';
 import { TimeKey, timeKeyIsBetween } from '../../../../common/time';
@@ -146,15 +147,20 @@ const useFetchEntriesEffect = (
   props: LogEntriesProps
 ) => {
   const { services } = useKibanaContextForPlugin();
+  const isMounted = useMountedState();
   const [prevParams, cachePrevParams] = useState<LogEntriesProps | undefined>();
   const [startedStreaming, setStartedStreaming] = useState(false);
+  const dispatchIfMounted = useCallback((action) => (isMounted() ? dispatch(action) : undefined), [
+    dispatch,
+    isMounted,
+  ]);
 
   const runFetchNewEntriesRequest = async (overrides: Partial<LogEntriesProps> = {}) => {
     if (!props.startTimestamp || !props.endTimestamp) {
       return;
     }
 
-    dispatch({ type: Action.FetchingNewEntries });
+    dispatchIfMounted({ type: Action.FetchingNewEntries });
 
     try {
       const commonFetchArgs: LogEntriesBaseRequest = {
@@ -175,13 +181,15 @@ const useFetchEntriesEffect = (
           };
 
       const { data: payload } = await fetchLogEntries(fetchArgs, services.http.fetch);
-      dispatch({ type: Action.ReceiveNewEntries, payload });
+      dispatchIfMounted({ type: Action.ReceiveNewEntries, payload });
 
       // Move position to the bottom if it's the first load.
       // Do it in the next tick to allow the `dispatch` to fire
       if (!props.timeKey && payload.bottomCursor) {
         setTimeout(() => {
-          props.jumpToTargetPosition(payload.bottomCursor!);
+          if (isMounted()) {
+            props.jumpToTargetPosition(payload.bottomCursor!);
+          }
         });
       } else if (
         props.timeKey &&
@@ -192,7 +200,7 @@ const useFetchEntriesEffect = (
         props.jumpToTargetPosition(payload.topCursor);
       }
     } catch (e) {
-      dispatch({ type: Action.ErrorOnNewEntries });
+      dispatchIfMounted({ type: Action.ErrorOnNewEntries });
     }
   };
 
@@ -210,7 +218,7 @@ const useFetchEntriesEffect = (
       return;
     }
 
-    dispatch({ type: Action.FetchingMoreEntries });
+    dispatchIfMounted({ type: Action.FetchingMoreEntries });
 
     try {
       const commonFetchArgs: LogEntriesBaseRequest = {
@@ -232,14 +240,14 @@ const useFetchEntriesEffect = (
 
       const { data: payload } = await fetchLogEntries(fetchArgs, services.http.fetch);
 
-      dispatch({
+      dispatchIfMounted({
         type: getEntriesBefore ? Action.ReceiveEntriesBefore : Action.ReceiveEntriesAfter,
         payload,
       });
 
       return payload.bottomCursor;
     } catch (e) {
-      dispatch({ type: Action.ErrorOnMoreEntries });
+      dispatchIfMounted({ type: Action.ErrorOnMoreEntries });
     }
   };
 
@@ -322,7 +330,7 @@ const useFetchEntriesEffect = (
       after: props.endTimestamp > prevParams.endTimestamp,
     };
 
-    dispatch({ type: Action.ExpandRange, payload: shouldExpand });
+    dispatchIfMounted({ type: Action.ExpandRange, payload: shouldExpand });
   };
 
   const expandRangeEffectDependencies = [

x-pack/plugins/infra/public/containers/logs/log_flyout.tsx

@@ -11,7 +11,7 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { LogEntriesItem } from '../../../common/http_api';
 import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
 import { UrlStateContainer } from '../../utils/url_state';
-import { useTrackedPromise } from '../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../utils/use_tracked_promise';
 import { fetchLogEntriesItem } from './log_entries/api/fetch_log_entries_item';
 import { useLogSourceContext } from './log_source';
 
@@ -49,6 +49,7 @@ export const useLogFlyout = () => {
           setFlyoutItem(data || null);
         }
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, flyoutId]
   );

x-pack/plugins/infra/public/containers/logs/log_highlights/log_entry_highlights.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { TimeKey } from '../../../../common/time';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { fetchLogEntriesHighlights } from './api/fetch_log_entries_highlights';
 import { LogEntry, LogEntriesHighlightsResponse } from '../../../../common/http_api';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
@@ -50,6 +50,7 @@ export const useLogEntryHighlights = (
       onResolve: (response) => {
         setLogEntryHighlights(response.data);
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, startTimestamp, endTimestamp, centerPoint, size, filterQuery, highlightTerms]
   );

x-pack/plugins/infra/public/containers/logs/log_highlights/log_summary_highlights.ts

@@ -7,7 +7,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { debounce } from 'lodash';
 
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { fetchLogSummaryHighlights } from './api/fetch_log_summary_highlights';
 import { LogEntriesSummaryHighlightsResponse } from '../../../../common/http_api';
 import { useBucketSize } from '../log_summary/bucket_size';
@@ -51,6 +51,7 @@ export const useLogSummaryHighlights = (
       onResolve: (response) => {
         setLogSummaryHighlights(response.data);
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, startTimestamp, endTimestamp, bucketSize, filterQuery, highlightTerms]
   );

x-pack/plugins/infra/public/containers/logs/log_source/log_source.ts

@@ -14,7 +14,7 @@ import {
   LogSourceConfigurationPropertiesPatch,
   LogSourceStatus,
 } from '../../../../common/http_api/log_sources';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { callFetchLogSourceConfigurationAPI } from './api/fetch_log_source_configuration';
 import { callFetchLogSourceStatusAPI } from './api/fetch_log_source_status';
 import { callPatchLogSourceConfigurationAPI } from './api/patch_log_source_configuration';
@@ -47,6 +47,7 @@ export const useLogSource = ({ sourceId, fetch }: { sourceId: string; fetch: Htt
 
         setSourceConfiguration(data);
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, fetch]
   );
@@ -65,6 +66,7 @@ export const useLogSource = ({ sourceId, fetch }: { sourceId: string; fetch: Htt
         setSourceConfiguration(data);
         loadSourceStatus();
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, fetch]
   );
@@ -82,6 +84,7 @@ export const useLogSource = ({ sourceId, fetch }: { sourceId: string; fetch: Htt
 
         setSourceStatus(data);
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, fetch]
   );
@@ -139,7 +142,9 @@ export const useLogSource = ({ sourceId, fetch }: { sourceId: string; fetch: Htt
   );
 
   const loadSource = useCallback(() => {
-    return Promise.all([loadSourceConfiguration(), loadSourceStatus()]);
+    return Promise.all([loadSourceConfiguration(), loadSourceStatus()]).catch(
+      ignoreCanceledPromise
+    );
   }, [loadSourceConfiguration, loadSourceStatus]);
 
   const initialize = useCallback(async () => {

x-pack/plugins/infra/public/containers/logs/log_stream/index.ts

@@ -7,7 +7,7 @@
 import { useState, useMemo } from 'react';
 import { esKuery } from '../../../../../../../src/plugins/data/public';
 import { fetchLogEntries } from '../log_entries/api/fetch_log_entries';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { LogEntry, LogEntriesCursor } from '../../../../common/http_api';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
@@ -63,6 +63,7 @@ export function useLogStream({
       onResolve: ({ data }) => {
         setEntries(data.entries);
       },
+      onReject: ignoreCanceledPromise,
     },
     [sourceId, startTimestamp, endTimestamp, query]
   );

x-pack/plugins/infra/public/containers/source/source.tsx

@@ -14,7 +14,7 @@ import {
   UpdateSourceMutation,
 } from '../../graphql/types';
 import { DependencyError, useApolloClient } from '../../utils/apollo_context';
-import { useTrackedPromise } from '../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../utils/use_tracked_promise';
 import { createSourceMutation } from './create_source.gql_query';
 import { sourceQuery } from './query_source.gql_query';
 import { updateSourceMutation } from './update_source.gql_query';
@@ -57,6 +57,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
       onResolve: (response) => {
         setSource(response.data.source);
       },
+      onReject: ignoreCanceledPromise,
     },
     [apolloClient, sourceId]
   );
@@ -87,6 +88,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
           setSource(response.data.createSource.source);
         }
       },
+      onReject: ignoreCanceledPromise,
     },
     [apolloClient, sourceId]
   );
@@ -117,6 +119,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
           setSource(response.data.updateSource.source);
         }
       },
+      onReject: ignoreCanceledPromise,
     },
     [apolloClient, sourceId]
   );

x-pack/plugins/infra/public/pages/logs/log_entry_categories/use_log_entry_category_examples.tsx

@@ -8,7 +8,7 @@ import { useMemo, useState } from 'react';
 
 import { LogEntryCategoryExample } from '../../../../common/http_api';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { ignoreCanceledPromise, useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { callGetLogEntryCategoryExamplesAPI } from './service_calls/get_log_entry_category_examples';
 
 export const useLogEntryCategoryExamples = ({
@@ -48,6 +48,7 @@ export const useLogEntryCategoryExamples = ({
       onResolve: ({ data: { examples } }) => {
         setLogEntryCategoryExamples(examples);
       },
+      onReject: ignoreCanceledPromise,
     },
     [categoryId, endTime, exampleCount, sourceId, startTime]
   );

x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx

@@ -27,6 +27,7 @@ import { useLogSourceContext } from '../../../containers/logs/log_source';
 import { LogEntryRateResultsContent } from './page_results_content';
 import { LogEntryRateSetupContent } from './page_setup_content';
 import { useInterval } from '../../../hooks/use_interval';
+import { ignoreCanceledPromise } from '../../../utils/use_tracked_promise';
 
 const JOB_STATUS_POLLING_INTERVAL = 30000;
 
@@ -61,7 +62,10 @@ export const LogEntryRatePageContent = memo(() => {
   const { showModuleList } = useLogAnalysisSetupFlyoutStateContext();
 
   const fetchAllJobStatuses = useCallback(
-    () => Promise.all([fetchLogEntryCategoriesJobStatus(), fetchLogEntryRateJobStatus()]),
+    () =>
+      Promise.all([fetchLogEntryCategoriesJobStatus(), fetchLogEntryRateJobStatus()]).catch(
+        ignoreCanceledPromise
+      ),
     [fetchLogEntryCategoriesJobStatus, fetchLogEntryRateJobStatus]
   );