Sendbird chat SDK not working on android

Sendbird Chat API/SDK JavaScript
,
1

I’m facing an issue in my android RN app where the sendbird.connect function always throws an exception:

Websocket connection failed

and when i check the native logs i found that the SDK throws the following error:

2022-05-08 19:15:05.438 7464-7495/com.zed.customerUat E/ReactNativeJS: '[ERROR   ]', 'API dummy call failed:', { [SendBirdException: Request failed.]
      name: 'SendBirdException',
      code: 800220,
      line: 2280,
      column: 8430,
      sourceURL: 'index.android.bundle' }
2022-05-08 19:15:05.447 7464-7496/com.zed.customerUat E/unknown:ReactNative: console.error: [ERROR   ] API dummy call failed: SendBirdException: Request failed., stack:
    construct@-1
    o@64:330
    construct@-1
    <unknown>@63:437
    c@63:637
    f@63:1880
    value@2280:14041
    forEach@-1
    value@2280:15212
    value@2280:15934
    <unknown>@2280:92630
    <unknown>@2280:27983
    u@76:156
    <unknown>@76:865
    <unknown>@84:1671
    k@84:499
    w@84:897
    callReactNativeMicrotasks@84:3053
    value@37:2867
    <unknown>@37:959
    value@37:2503
    value@37:918
    value@-1
    value@-1

Here is a snippet showing how I’m trying to run the sdk:
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;

react native: 0.66.4
sendbird: 3.1.7

3

Hello @moe and welcome to the Sendbird community!

The exception you are receiving, API dummy call failed, indicates a network issue on the client side that is preventing the SDK from contacting the Sendbird server. Are you able to validate if your network is blocking traffic to Sendbird?

4

I’m not sure how to validate connectivity for sendbird, but other network requests are working fine. @Ian

5

Hi @moe,

Responding for Ian as I’m here during KST hours. Essentially, SDK makes a call to https://api-{app_id}.sendbird.com and looks to receive a 200 back (Ignore the actual data returned).

This is in order to test if it can connect to Sendbird to open a websocket connection. Ultimately, troubleshooting client side network issues from our side is rather difficult but one thing you could try is opening a web browser and make that same request to the endpoint to see if you can hit it. If you can, it may be something specific to the React Native implementation.

6

I’ve tested the api ( https://api-{app_id}.sendbird.com) from the browser and it’s working fine

7

This would mean that it’s likely an issue where the implementation is preventing the SDK from reaching out. We can try and reproduce it locally if you provide the version of Android, React Native and the SDK you’re using however we’ve not had any similar reports of this occurring and thus it is likely localized.

8

I’ve tested in different android versions from (8 to 11) and the same issue persists, as for RN version it’s 0.66.4 and chat SDK is: 3.1.7

9

Is this always on the emulator or physical devices?

10

My tests are mainly on emulator, but I’ve validated that the issue is there when using a physical device

11

@moe This small and simple demo works for me. Can you please try if it works for you there?

12

I’ve done a deep dive investigation on this, after long hours of debugging i found out that the issue is in the initialization step of the sendbird object it self

const sendbird = new SendBird({ appId: Config.SENDBIRD_APP_ID });

were if I directly set the appId as a string and not used “react-native-config” environment variables ex:

const sendbird = new SendBird({ appId: 'FEESADF-34ER-G5GH-GV77-4C87451DE5E9' });

it works, I have no idea how this is happening, but I need to use env variables for app id, since we should have one for testing and another for production.
Can anyone maybe try to reproduce the issue? please refer to my sample code mentioned in the issue details

13

I can confirm that it was an issue with our android “react-native-config” setup, where it was initializing as undefined:

const sendbird = new SendBird({ appId: undefined });

which did not throw any error? maybe this requires more investigation into why no exception is thrown at this stage.

14

Hi @moe,

I think ultimately the dummy call failing is the exception we throw here though I can understand expecting it to throw an error being undefined. I’ll relay that feedback to our Engineering team.

15

The dummy call failing exception happens when we call sendbird.connect(), but the initialization of the sendbird object happens at an earlier stage prior to calling connect (ideally on app start) so those are two different flows which should have different error handling, this I beleive will ease debugging where would different issues be located.

Thanks for the support

16

Ah okay. I see what you are saying. I will definitely bring that back to our Engineering team for review.

1 Like