feat: add eventHandler.connection.onFailed to handle connection error (#851)

Aims to resolve https://sendbird.atlassian.net/browse/CLNP-1562

Added support for `eventHandlers.connection.onFailed callback` in
`setupConnection`.
The new callback is invoked in case of a connection failure, providing a
way to handle errors and take appropriate actions. The addition of the
`onFailed` callback aims to enhance the flexibility of the
`setupConnection` function, allowing users to implement custom error
handling logic when a connection fails.

**Example usage**
```
    <Sendbird
      appId={appId}
      userId={undefined} // this will cause an error 
      eventHandlers={{
        connection: {
          onFailed: (error) => {
            alert(error?.message); // display a browser alert and print the error message inside
          }
        }
      }}
    >
 ```   
 
![Screenshot 2023-11-20 at 2 40 04 PM](https://github.com/sendbird/sendbird-uikit-react/assets/10060731/dce8d888-30ff-4160-82d7-e55c1cc358e2)

Author: AhyoungRyu

src/lib/Sendbird.tsx

@@ -216,6 +216,7 @@ const SendbirdSDK = ({
     sdkDispatcher,
     userDispatcher,
     initDashboardConfigs,
+    eventHandlers,
   });
 
   useUnmount(() => {

src/lib/hooks/useConnect/__test__/setupConnection.spec.ts

@@ -6,6 +6,8 @@ import { getMissingParamError, setUpConnection, setUpParams } from '../setupConn
 import { SetupConnectionTypes } from '../types';
 import { generateSetUpConnectionParams, mockSdk, mockUser, mockUser2 } from './data.mocks';
 
+import { SendbirdError } from '@sendbird/chat';
+
 // todo: combine after mock-sdk is implemented
 jest.mock('@sendbird/chat', () => ({
   init: jest.fn().mockImplementation(() => mockSdk),
@@ -162,6 +164,22 @@ describe('useConnect/setupConnection', () => {
       type: SDK_ACTIONS.SDK_ERROR,
     });
   });
+
+  it('should call onConnectionFailed callback when connection fails', async () => {
+    const onConnectionFailed = jest.fn();
+    const setUpConnectionProps = generateSetUpConnectionParams();
+    setUpConnectionProps.eventHandlers = { connection: { onFailed: onConnectionFailed } };
+
+    // Force a connection failure by providing an invalid userId
+    const params = { ...setUpConnectionProps, userId: undefined };
+    const expectedErrorMessage = getMissingParamError({ userId: undefined, appId: params.appId });
+
+    // // Ensure that the onConnectionFailed callback is called with the correct error message
+    await expect(setUpConnection((params as unknown as SetupConnectionTypes)))
+      .rejects.toBe(expectedErrorMessage);
+    // Ensure that onConnectionFailed callback is called with the expected error object
+    expect(onConnectionFailed).toHaveBeenCalledWith({ message: expectedErrorMessage } as SendbirdError);
+  });
 });
 
 describe('useConnect/setupConnection/setUpParams', () => {

src/lib/hooks/useConnect/connect.ts

@@ -19,6 +19,7 @@ export async function connect({
   sdkInitParams,
   customExtensionParams,
   isMobile,
+  eventHandlers,
 }: ConnectTypes): Promise<void> {
   await disconnectSdk({
     logger,
@@ -42,5 +43,6 @@ export async function connect({
     sdkInitParams,
     customExtensionParams,
     isMobile,
+    eventHandlers,
   });
 }

src/lib/hooks/useConnect/index.ts

@@ -18,6 +18,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
     initDashboardConfigs,
     sdkInitParams,
     customExtensionParams,
+    eventHandlers,
   } = staticTypes;
   logger?.info?.('SendbirdProvider | useConnect', { ...triggerTypes, ...staticTypes });
 
@@ -41,6 +42,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
       sdkInitParams,
       customExtensionParams,
       isMobile,
+      eventHandlers,
     }).catch(error => {
       logger?.error?.('SendbirdProvider | useConnect/useEffect', error);
     });
@@ -67,6 +69,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         sdkInitParams,
         customExtensionParams,
         isMobile,
+        eventHandlers,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/reconnect/useCallback', error);

src/lib/hooks/useConnect/setupConnection.ts

@@ -73,9 +73,11 @@ export async function setUpConnection({
   sdkInitParams,
   customExtensionParams,
   isMobile = false,
+  eventHandlers,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
     logger?.info?.('SendbirdProvider | useConnect/setupConnection/init', { userId, appId });
+    const onConnectionFailed = eventHandlers?.connection?.onFailed;
     sdkDispatcher({ type: SET_SDK_LOADING, payload: true });
 
     if (userId && appId) {
@@ -168,6 +170,7 @@ export async function setUpConnection({
         userDispatcher({ type: RESET_USER });
 
         sdkDispatcher({ type: SDK_ERROR });
+        onConnectionFailed?.(e);
         // exit promise with error
         reject(errorMessage);
       };
@@ -179,6 +182,7 @@ export async function setUpConnection({
     } else {
       const errorMessage = getMissingParamError({ userId, appId });
       sdkDispatcher({ type: SDK_ERROR });
+      onConnectionFailed?.({ message: errorMessage } as SendbirdError);
       logger?.error?.(errorMessage);
       // exit promise with error
       reject(errorMessage);

src/lib/hooks/useConnect/types.ts

@@ -7,7 +7,7 @@ import { UserActionTypes } from '../../dux/user/actionTypes';
 
 import { Logger } from '../../SendbirdState';
 
-import { SendbirdChatInitParams, CustomExtensionParams } from '../../types';
+import { SendbirdChatInitParams, CustomExtensionParams, SBUEventHandlers } from '../../types';
 
 type SdkDispatcher = React.Dispatch<SdkActionTypes>;
 type UserDispatcher = React.Dispatch<UserActionTypes>;
@@ -36,6 +36,7 @@ export type StaticTypes = {
   initDashboardConfigs: (sdk: SendbirdChat) => Promise<void>;
   sdkInitParams?: SendbirdChatInitParams;
   customExtensionParams?: CustomExtensionParams;
+  eventHandlers?: SBUEventHandlers;
 };
 
 export type ConnectTypes = TriggerTypes & StaticTypes;

src/lib/types.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type SendbirdChat from '@sendbird/chat';
-import type { User, SendbirdChatParams } from '@sendbird/chat';
+import type { User, SendbirdChatParams, SendbirdError } from '@sendbird/chat';
+
 import type {
   GroupChannel,
   GroupChannelCreateParams, GroupChannelModule,
@@ -46,6 +47,9 @@ export interface SBUEventHandlers {
   reaction?: {
     onPressUserProfile?(member: User): void;
   },
+  connection?: {
+    onFailed?(error: SendbirdError): void;
+  }
 }
 
 export interface SendBirdStateConfig {