cometchat / chat-sdk-react-native

Voice & Video Calling and Text Chat SDK for React Native
Other
18 stars 17 forks source link

Error: An error was thrown when attempting to render log messages via LogBox #37

Closed mayiPalacios closed 1 month ago

mayiPalacios commented 1 month ago

Hello, I have a problem. I am trying to implement calls in my project with CometChat and with the help of the CallKeepHelper library, I am trying to handle calls with push notifications along with Firebase. Currently, I already receive the notification when I get a call. I am doing this in my App.tsx where I have this method:

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
   RNCallKeep.setup(options);
   RNCallKeep.setAvailable(true);
    try {
     //Converting the message payload into CometChat Message.
     let msg = CometChat.CometChatHelper.processMessage(
       JSON.parse(remoteMessage.data.message)
     );

     if (msg.category == "call") {
       //need to check if the notification we received for Call initiated or ended
       if (msg.action == "initiated") {

         CallKeepHelper.msg = msg; //setting the msg object in call keep helper class

         CallKeepHelper.displayCallAndroid(msg, navigationRef);//this method is used to display incoming calls in android t
       } else {
         //if sender cancels the call before receiver accept or reject call then we also need to stop our notification
         RNCallKeep.endCall(msg.conversationId);
       }
     } 
     } catch (e) {
      console.log(e)
       } 
       });

When the user wants to call another user with the outgoingCall, the receiving user gets the call, and the method displayCallAndroid is executed. I pass the msg values as parameters and a reference to the navigate method for navigation. Inside CallKeepHelper, there are some listeners, which are these:

const setupEventListeners = () => {
   RNCallKeep.addEventListener('endCall', endCall);
   RNCallKeep.addEventListener('answerCall', answerCall);
 };

These listeners help me detect if the user accepted or declined the call in the notification. If the user accepts, the answerCall method is triggered. In this method, I use CometChat.acceptCall to indicate that the user has accepted the call, and the user who initiated the call (the outgoingCall) joins the call. The user who received the call is then redirected to the "OngoingCall" component.

image

This is my "OngoingCall" component, where in the useEffect I ensure the user starts a session. If you notice in the CallSettingsBuilder(), I set those fields because in the nodeModules within the CometChatOngoingCall component, when calling build() on CallSettingsBuilder(), it returns undefined.

const OngoingCallScreen: React.FC<OngoingCallScreenProps> = ({route}) => {
  const sessionID = route.params.sessionID;
  const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
  const [callSettingsBuilder, setCallSettingsBuilder] = useState<any>(null);
  const {androidId} = useSelector((state: RootState) => state.phone);
  const [sessionID2, setSessionID] = useState<string>(sessionID);

  useEffect(() => {
    //code
    async function InitGoing() {
      LogBox.ignoreAllLogs(true);
      await initializeCometChat('APPID', 'US')
        .then(async (response: any) => {
          CometChatUIKit.login({uid: androidId})
            .then(async (user: CometChat.User) => {
              console.log('USUARIO', user);
              const callSettingsBuilderResponse =
                new CometChat.CallSettingsBuilder()
                  .setSessionID(sessionID)
                  .setUser(user)
                  .setAppId('APPID')
                  .enableDefaultLayout(true);
              setCallSettingsBuilder(callSettingsBuilderResponse);
              setLoggedInUser(user);
            })
            .catch((error: any) => {
              console.log('Error', error);
            });
        })
        .catch((error: any) => {
          //console.log("Error", error);
        });
    }
    InitGoing();
  }, [androidId]);

  const onErrorHandler = (error: CometChat.CometChatException) => {
    console.log('ERROR', error);
  };

  return (
    <>
      {loggedInUser && callSettingsBuilder && sessionID ? (
        <CometChatOngoingCall
          sessionID={sessionID2}
          callSettingsBuilder={callSettingsBuilder}
          onError={onErrorHandler}
        />
      ) : (
        <View>
          <Text>Loading</Text>
        </View>
      )}
    </>
  );
};

export default OngoingCallScreen;

I must emphasize that all the values I pass to the component are already ensured to not be undefined. The point is that when the CometChatOngoingCall component is executed, I get the following error:

image

Inside the CometChatOngoingCall component within node_modules, I have already ensured that the authToken is generated, and it does get generated.

const CometChatCalls = CallingPackage.CometChatCalls;

export interface CometChatOngoingCallInterface {
    sessionID: string,
    ongoingCallStyle?: OngoingCallStyleInterface,
    callSettingsBuilder: typeof CometChatCalls.CallSettingsBuilder
    onError?: (e: CometChat.CometChatException) => void,
}

export const CometChatOngoingCall = (props: CometChatOngoingCallInterface) => {

    const {
        callSettingsBuilder,
        onError,
        ongoingCallStyle,
        sessionID,
    } = props;
    const [callToken, setToken] = useState(undefined);
    const callSettings = useRef(callSettingsBuilder?.build());
console.log("SETTINGS", callSettings)
    const { theme } = useContext(CometChatContext);

    useEffect(() => {
        CometChat.getLoggedinUser()
            .then((user: any) => {
                let authToken = user.getAuthToken();
                console.log("SESSION NODE",sessionID)
                console.log("AUTHTOKEN", authToken);
                CometChatCalls.generateToken(sessionID, authToken)
                    .then((token: any) => {
                        console.log("AQI TOKEN", token.token)
                        setToken(token.token);
                    })
                    .catch((rej: any) => {
                        setToken(undefined);
                        onError && onError(rej);
                    })
            })
            .catch((rej: any) => {
                console.log("Error", rej);
                onError && onError(rej);
            });
        return () => {
            callSettings.current = null;
        }
    }, []);
 console.log("TOKEN", callToken)
    return (
        <View style={[{ height: '100%', width: '100%', position: 'relative' }, ongoingCallStyle]}>
            {
                callSettings.current && callToken &&
                <CometChatCalls.Component
                    callSettings={callSettings.current}
                    callToken={callToken}
                /> ||
                <View style={{ justifyContent: "center", alignItems: "center", height: "100%", backgroundColor: "transparent" }}>
                    <ActivityIndicator size={"large"} color={theme.palette.getPrimary()} />
                </View>
            }
        </View>
    )
}
cometchat-helpcenter-bot commented 1 month ago

Afroz Khan (CometChat Team) replied:

Hello,

We need some additional information from your end to investigate this issue. Please create a ticket through our support portal here: https://help.cometchat.com/hc/en-us/requests/new

Afroz Khan CometChat