Enhance WebSocket Connection Reliability and Error Handling (#3336)

* enhancement (subscriptions): add error handling for subscriptions and enhance WebSocket configuration

* fix: enhance WebSocket error handling and logging

* refactor: remove WebSocket retry logic and attempts configuration

---------

Co-authored-by: Kurund Jalmi <kurund.jalmi@gmail.com>

Author: akanshaaa19

src/common/utils.ts

@@ -294,3 +294,12 @@ export const formatString = (str: string) =>
     .replace(/_/g, ' ')
     .replace(/([a-z])([0-9])/gi, '$1 $2')
     .replace(/\b\w/g, (char) => char.toUpperCase());
+
+export const handleSubscriptionError = (error: any, subscriptionType: string, refetch: any) => {
+  setLogs(`Subscription error for ${subscriptionType}: ${error}`, 'error');
+
+  if (error?.message?.includes('Socket closed')) {
+    // Trigger a refetch if we lose connection
+    refetch(true);
+  }
+};

src/config/apolloclient.ts

@@ -143,6 +143,15 @@ const gqlClient = (navigate: any) => {
         authToken: getAuthSession('access_token'),
         userId: getUserSession('id'),
       },
+      keepAlive: 30000,
+      on: {
+        closed: (event: any) => {
+          setLogs(`WebSocket closed with code ${event.code} and reason: ${event.reason}`, 'error');
+        },
+        error: (error) => {
+          setLogs(`WebSocket error: ${error}`, 'error');
+        },
+      },
     })
   );
 

src/containers/Chat/ChatSubscription/ChatSubscription.tsx

@@ -10,7 +10,7 @@ import {
   SEARCH_QUERY_VARIABLES,
 } from 'common/constants';
 import { setErrorMessage } from 'common/notification';
-import { randomIntFromInterval, addLogs } from 'common/utils';
+import { randomIntFromInterval, addLogs, handleSubscriptionError } from 'common/utils';
 import { saveConversation } from 'services/ChatService';
 import { getUserSession } from 'services/AuthService';
 import { SEARCH_QUERY } from 'graphql/queries/Search';
@@ -206,6 +206,7 @@ export const ChatSubscription = ({ setDataLoaded }: ChatSubscriptionProps) => {
         document: COLLECTION_SENT_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'COLLECTION'),
+        onError: (error) => handleSubscriptionError(error, 'COLLECTION', setTriggerRefetch),
       });
     }
   }, [collectionSubscribe]);
@@ -218,21 +219,23 @@ export const ChatSubscription = ({ setDataLoaded }: ChatSubscriptionProps) => {
         document: MESSAGE_RECEIVED_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'RECEIVED'),
+        onError: (error) => handleSubscriptionError(error, 'MESSAGE_RECEIVED', setTriggerRefetch),
       });
 
       // message sent subscription
       subscribeToMore({
         document: MESSAGE_SENT_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'SENT'),
+        onError: (error) => handleSubscriptionError(error, 'SENT', setTriggerRefetch),
       });
 
       // message status subscription
       subscribeToMore({
         document: MESSAGE_STATUS_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'STATUS'),
-        onError: () => {},
+        onError: (error) => handleSubscriptionError(error, 'STATUS', setTriggerRefetch),
       });
     }
   }, [subscribeToMore]);

src/containers/WaGroups/GroupMessageSubscription.tsx

@@ -8,7 +8,7 @@ import {
   REFETCH_RANDOM_TIME_MIN,
 } from 'common/constants';
 import { setErrorMessage } from 'common/notification';
-import { randomIntFromInterval, addLogs } from 'common/utils';
+import { randomIntFromInterval, addLogs, handleSubscriptionError } from 'common/utils';
 import { GROUP_SEARCH_QUERY } from 'graphql/queries/WaGroups';
 import {
   SENT_MESSAGE_WA_GROUP_COLLECTION,
@@ -193,20 +193,22 @@ export const GroupMessageSubscription = ({ setDataLoaded }: GroupMessageProps) =
         document: WA_MESSAGE_RECEIVED_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'RECEIVED'),
+        onError: (error) => handleSubscriptionError(error, 'WA_RECEIVED', setTriggerRefetch),
       });
 
       // message sent subscription
       subscribeToMore({
         document: WA_MESSAGE_SENT_SUBSCRIPTION,
         variables: subscriptionVariables,
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'SENT'),
+        onError: (error) => handleSubscriptionError(error, 'WA_SENT', setTriggerRefetch),
       });
 
       subscribeToMore({
         document: UPDATE_WA_MESSAGE_STATUS,
         variables: subscriptionVariables,
-        onError: (error) => console.log(error),
         updateQuery: (prev, { subscriptionData }) => updateConversations(prev, subscriptionData, 'STATUS'),
+        onError: (error) => handleSubscriptionError(error, 'WA_STATUS', setTriggerRefetch),
       });
     }
   }, [subscribeToMore]);

src/containers/WalletBalance/WalletBalance.tsx

@@ -11,6 +11,7 @@ import { getUserSession } from 'services/AuthService';
 import { GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants';
 import { ProviderContext } from 'context/session';
 import styles from './WalletBalance.module.css';
+import { handleSubscriptionError } from 'common/utils';
 
 export interface WalletBalanceProps {
   fullOpen: boolean;
@@ -104,6 +105,7 @@ export const WalletBalance = ({ fullOpen }: WalletBalanceProps) => {
             updateBalanceValue(balance.balance);
           }
         },
+        onError: (error) => handleSubscriptionError(error, 'WALLET_BALANCE', setRetried),
       });
     }
   }, [subscribeToMore]);