Failing websocket connections SendBird JS SDK

Sendbird Chat API/SDK JavaScript
1

It seems that one of our customers is having issues upon connecting to SendBird via SendBird JS SDK.
From NewRelic reports I can see that there are multiple SendBirdExceptions with code 800210 and Websocket connection failed message. It seems that no other customers are impacted, to main guess for now is their antivirus/proxy/etc setup.
SDK version: v3.0.77

Logging a ticket for tracking, please feel free to refer to any other place if you think if suits better

2

Hey, thank you for your question. I suspect you are right that this is network related and I think a good first step is to make sure that connections on port 443 are allowed.

3

I am facing the same issue

this is my App.tsx:

import React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { ThemeProvider, USER_TYPE } from '@app/theme';
import AppNavigation from '@customer/navigation';
import { ApolloProvider } from '@apollo/client';
import { createClient } from '@zedapp/data-access';
import { useAuth } from '@customer/modules/auth/login/hooks/useAuth';
import SendBird from 'sendbird';
import Config from 'react-native-config';
import { chatVar } from '@customer/reactivities';
import ChatProvider from './context';

const sendbird = new SendBird({ appId: Config.SENDBIRD_APP_ID });
// chatVar({ sendbird });
sendbird.setErrorFirstCallback(true);

const initialState = {
  sendbird,
};

const App = () => {
  const { authVar } = useAuth();
  const params = {
    authToken: authVar.token,
  };

  const client = createClient(params);
  return (
    <ChatProvider value={initialState}>
      <ApolloProvider client={client}>
        <NavigationContainer theme={DarkTheme} >
          <ThemeProvider value={{ userType: USER_TYPE.CUSTOMER }}>
            <AppNavigation />
          </ThemeProvider>
        </NavigationContainer>
      </ApolloProvider>
    </ChatProvider>
  );
};

export default App;

and my chat screen (where i’m getting the error):

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Header, hp } from '@app/components';
import { useTheme } from '@app/theme';
import { useChatContext } from '@customer/app/context';
import { useCustomer } from '@customer/modules/profile/hooks/useCustomer';

const ChatWithAgentScreen = () => {
  const theme = useTheme();
  const { sendbird } = useChatContext();
  const { customerVar } = useCustomer();

  useEffect(() => {
    //   console.log(sendbird);
    // if (sendbird.connect) connect();
    connect();
  }, []);

  const connect = async () => {
    try {
      const user = await sendbird?.connect(customerVar?.idCustomerUser);
      console.log('connect_user', user);
    } catch (err) {
      console.log('connect_error', err);
    }
  };

  return (
    <>
      <Container.Flex style={styles.container}>
        <Header.AppHeader
          headerText={'Chat with Cx Service agent.'}
          headerTextColor={theme.main.white}
          containerStyle={{ backgroundColor: theme.main.secondary }}
          hideLeft={true}
        />
      </Container.Flex>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: hp(12),
    backgroundColor: '#fff',
  },
  body: { paddingHorizontal: 24, justifyContent: 'center' },
  moodSelector: {
    marginVertical: 12,
  },
});

export default ChatWithAgentScreen;