fix(compass-global-writes): handle loading error COMPASS-8446

Author: paula-stacho

packages/compass-global-writes/src/components/index.tsx

@@ -16,6 +16,7 @@ import ShardKeyInvalid from './states/shard-key-invalid';
 import ShardKeyMismatch from './states/shard-key-mismatch';
 import ShardingError from './states/sharding-error';
 import IncompleteShardingSetup from './states/incomplete-sharding-setup';
+import LoadingError from './states/loading-error';
 
 const containerStyles = css({
   paddingLeft: spacing[400],
@@ -101,6 +102,10 @@ function ShardingStateView({
     return <IncompleteShardingSetup />;
   }
 
+  if (shardingStatus === ShardingStatuses.LOADING_ERROR) {
+    return <LoadingError />;
+  }
+
   return null;
 }
 

packages/compass-global-writes/src/components/states/loading-error.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ErrorSummary } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import { type RootState, ShardingStatuses } from '../../store/reducer';
+import { containerStyles } from '../common-styles';
+
+interface LoadingErrorProps {
+  error: string;
+}
+
+export function LoadingError({ error }: LoadingErrorProps) {
+  return (
+    <div className={containerStyles}>
+      <ErrorSummary errors={error} />
+    </div>
+  );
+}
+
+export default connect((state: RootState) => {
+  if (state.status !== ShardingStatuses.LOADING_ERROR) {
+    throw new Error('Error not found in LoadingError');
+  }
+  return {
+    error: state.error,
+  };
+})(LoadingError);

packages/compass-global-writes/src/store/reducer.ts

@@ -45,13 +45,20 @@ enum GlobalWritesActionTypes {
   UnmanagingNamespaceStarted = 'global-writes/UnmanagingNamespaceStarted',
   UnmanagingNamespaceFinished = 'global-writes/UnmanagingNamespaceFinished',
   UnmanagingNamespaceErrored = 'global-writes/UnmanagingNamespaceErrored',
+
+  LoadingFailed = 'global-writes/LoadingFailed',
 }
 
 type ManagedNamespaceFetchedAction = {
   type: GlobalWritesActionTypes.ManagedNamespaceFetched;
   managedNamespace?: ManagedNamespace;
 };
 
+type LoadingFailedAction = {
+  type: GlobalWritesActionTypes.LoadingFailed;
+  error: string;
+};
+
 type NamespaceShardingErrorFetchedAction = {
   type: GlobalWritesActionTypes.NamespaceShardingErrorFetched;
   error: string;
@@ -120,6 +127,11 @@ export enum ShardingStatuses {
    */
   NOT_READY = 'NOT_READY',
 
+  /**
+   * The status could not be determined because loading failed
+   */
+  LOADING_ERROR = 'LOADING_ERROR',
+
   /**
    * Namespace is not geo-sharded.
    */
@@ -204,11 +216,19 @@ export type RootState = {
   managedNamespace?: ManagedNamespace;
   shardZones: ShardZoneData[];
 } & (
+  | {
+      status: ShardingStatuses.LOADING_ERROR;
+      shardKey?: ShardKey;
+      shardingError?: never;
+      pollingTimeout?: never;
+      error: string;
+    }
   | {
       status: ShardingStatuses.NOT_READY;
       shardKey?: never;
       shardingError?: never;
       pollingTimeout?: never;
+      error?: never;
     }
   | {
       status:
@@ -222,6 +242,7 @@ export type RootState = {
       shardKey?: ShardKey;
       shardingError?: never;
       pollingTimeout?: never;
+      error?: never;
     }
   | {
       status: ShardingStatuses.SHARDING;
@@ -232,6 +253,7 @@ export type RootState = {
       shardKey?: ShardKey;
       shardingError?: never;
       pollingTimeout?: NodeJS.Timeout;
+      error?: never;
     }
   | {
       status:
@@ -241,6 +263,7 @@ export type RootState = {
       shardKey?: never;
       shardingError: string;
       pollingTimeout?: never;
+      error?: never;
     }
   | {
       status:
@@ -254,6 +277,7 @@ export type RootState = {
       shardKey: ShardKey;
       shardingError?: never;
       pollingTimeout?: never;
+      error?: never;
     }
 );
 
@@ -556,6 +580,25 @@ const reducer: Reducer<RootState, Action> = (state = initialState, action) => {
     };
   }
 
+  if (
+    isAction<LoadingFailedAction>(
+      action,
+      GlobalWritesActionTypes.LoadingFailed
+    ) &&
+    (state.status === ShardingStatuses.NOT_READY ||
+      state.status === ShardingStatuses.SHARDING)
+  ) {
+    if (state.pollingTimeout) {
+      throw new Error('Polling was not stopped');
+    }
+    return {
+      ...state,
+      status: ShardingStatuses.LOADING_ERROR,
+      error: action.error,
+      pollingTimeout: state.pollingTimeout,
+    };
+  }
+
   return state;
 };
 
@@ -584,17 +627,11 @@ export const fetchClusterShardingData =
         'Error fetching cluster sharding data',
         (error as Error).message
       );
-      openToast(
-        `global-writes-fetch-shard-info-error-${connectionInfoRef.current.id}-${namespace}`,
-        {
-          title: `Failed to fetch sharding information: ${
-            (error as Error).message
-          }`,
-          dismissible: true,
-          timeout: 5000,
-          variant: 'important',
-        }
-      );
+      handleLoadingError({
+        error: error as Error,
+        id: `global-writes-fetch-shard-info-error-${connectionInfoRef.current.id}-${namespace}`,
+        description: 'Failed to fetch sharding information',
+      });
     }
   };
 
@@ -769,6 +806,39 @@ const stopPollingForShardKey = (): GlobalWritesThunkAction<
   };
 };
 
+const handleLoadingError = ({
+  error,
+  id,
+  description,
+}: {
+  error: Error;
+  id: string;
+  description: string;
+}): GlobalWritesThunkAction<void, LoadingFailedAction> => {
+  return (dispatch, getState) => {
+    const { status } = getState();
+    const isPolling = status === ShardingStatuses.SHARDING;
+    const isInitialLoad = status === ShardingStatuses.NOT_READY;
+    const errorMessage = `${description} ${error.message}`;
+    if (isInitialLoad || isPolling) {
+      if (isPolling) {
+        dispatch(stopPollingForShardKey());
+      }
+      dispatch({
+        type: GlobalWritesActionTypes.LoadingFailed,
+        error: errorMessage,
+      });
+      return;
+    }
+    openToast(id, {
+      title: errorMessage,
+      dismissible: true,
+      timeout: 5000,
+      variant: 'important',
+    });
+  };
+};
+
 export const fetchNamespaceShardKey = (): GlobalWritesThunkAction<
   Promise<void>,
   NamespaceShardingErrorFetchedAction | NamespaceShardKeyFetchedAction
@@ -822,15 +892,11 @@ export const fetchNamespaceShardKey = (): GlobalWritesThunkAction<
         'Error fetching shard key',
         (error as Error).message
       );
-      openToast(
-        `global-writes-fetch-shard-key-error-${connectionInfoRef.current.id}-${namespace}`,
-        {
-          title: `Failed to fetch shard key: ${(error as Error).message}`,
-          dismissible: true,
-          timeout: 5000,
-          variant: 'important',
-        }
-      );
+      handleLoadingError({
+        error: error as Error,
+        id: `global-writes-fetch-shard-key-error-${connectionInfoRef.current.id}-${namespace}`,
+        description: 'Failed to fetch shard key',
+      });
     }
   };
 };