search

walterholohan / react-native-crisp-chat-sdk

React-Native bridge for Crisp Chat iOS and Android SDK's
MIT License
70 stars 26 forks source link

java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. #3

Closed moxspoy closed 3 years ago

moxspoy commented 3 years ago

Hallo! im getting trouble when trying to reopen the chat components.

when i open the app, then i click button navigate to component that contains CrispChatUI, working fine. Then i close/back from that page, and i open again that page, suddenly i get red box in my android (in iOS is working/no problem like this).

Screen shoot

image

Here is my component code:

import {View} from 'react-native';
import React, {useEffect, useState} from "react";
import styles from './styles'

const CrispChatScene = () => {

    useEffect(() => {
        Crisp.setUserEmail("eqi@gmail.com");
        Crisp.setUserNickname("eqi");
    }, []);

    return (
        <View style={styles.container}>
            <CrispChatUI style={styles.container}/>
        </View>
    );
}

export default CrispChatScene;

when i trying to remove setUserEmail and setUserNickname, the error is gone, but the screen stuck in loading.

image

Stack trace

java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 2) {858d5cd} called on Looper (mqt_native_modules, tid 1257) {f9fe257}, FYI main Looper is Looper (main, tid 2) {858d5cd})
        at android.webkit.WebView.checkThread(WebView.java:2700)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22)
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3)
        at im.crisp.sdk.Crisp$User.setEmail(SourceFile:1)
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserEmail(CrispChatSdkModule.java:21)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)
        at android.os.Looper.loop(Looper.java:193)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:764)
     Caused by: java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 2) {858d5cd} called on Looper (mqt_native_modules, tid 1257) {f9fe257}, FYI main Looper is Looper (main, tid 2) {858d5cd})
        at android.webkit.WebView.checkThread(WebView.java:2695)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112) 
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17) 
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22) 
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3) 
        at im.crisp.sdk.Crisp$User.setEmail(SourceFile:1) 
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserEmail(CrispChatSdkModule.java:21) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371) 
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150) 
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
        at android.os.Handler.handleCallback(Handler.java:873) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) 
        at android.os.Looper.loop(Looper.java:193) 
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) 
        at java.lang.Thread.run(Thread.java:764) 
2020-08-01 19:11:51.735 27515-27700/id.flip.staging.debug W/WebView: java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 2) {858d5cd} called on Looper (mqt_native_modules, tid 1257) {f9fe257}, FYI main Looper is Looper (main, tid 2) {858d5cd})
        at android.webkit.WebView.checkThread(WebView.java:2695)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22)
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3)
        at im.crisp.sdk.Crisp$User.setNickname(SourceFile:1)
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserNickname(CrispChatSdkModule.java:26)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)
        at android.os.Looper.loop(Looper.java:193)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:764)
2020-08-01 19:11:51.736 27515-27700/id.flip.staging.debug D/StrictMode: StrictMode policy violation: android.os.strictmode.WebViewMethodCalledOnWrongThreadViolation
        at android.webkit.WebView.checkThread(WebView.java:2695)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22)
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3)
        at im.crisp.sdk.Crisp$User.setNickname(SourceFile:1)
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserNickname(CrispChatSdkModule.java:26)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)
        at android.os.Looper.loop(Looper.java:193)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:764)
2020-08-01 19:11:51.741 27515-27700/id.flip.staging.debug E/unknown:ReactNative: Exception in native call
    java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 2) {858d5cd} called on Looper (mqt_native_modules, tid 1257) {f9fe257}, FYI main Looper is Looper (main, tid 2) {858d5cd})
        at android.webkit.WebView.checkThread(WebView.java:2700)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17)
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22)
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3)
        at im.crisp.sdk.Crisp$User.setNickname(SourceFile:1)
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserNickname(CrispChatSdkModule.java:26)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)
        at android.os.Looper.loop(Looper.java:193)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:764)
     Caused by: java.lang.Throwable: A WebView method was called on thread 'mqt_native_modules'. All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 2) {858d5cd} called on Looper (mqt_native_modules, tid 1257) {f9fe257}, FYI main Looper is Looper (main, tid 2) {858d5cd})
        at android.webkit.WebView.checkThread(WebView.java:2695)
        at android.webkit.WebView.evaluateJavascript(WebView.java:1112) 
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:17) 
        at im.crisp.sdk.ui.CrispFragment.a(SourceFile:22) 
        at im.crisp.sdk.ui.CrispFragment.execute(SourceFile:3) 
        at im.crisp.sdk.Crisp$User.setNickname(SourceFile:1) 
        at com.reactnativecrispchatsdk.CrispChatSdkModule.setUserNickname(CrispChatSdkModule.java:26) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371) 
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150) 
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
        at android.os.Handler.handleCallback(Handler.java:873) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) 
        at android.os.Looper.loop(Looper.java:193) 
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) 
        at java.lang.Thread.run(Thread.java:764) 

Expected result

i could open the app anytime (navigate from other component). please help me.

Environment

React native 0.61.5 using latest react-native-crisp-chat-sdk

walterholohan commented 3 years ago

Hey @moxspoy, this is a known issue. You can find more details on the issue here - https://github.com/crisp-im/crisp-sdk-android/issues/26.

I haven't got round to fixing it yet as I am waiting for the new native Android SDK to be released by the crisp team. This should be soon. Once its released this library will need a refactor in order to use the new SDK.

Please feel free to create a PR to fix this library using the approach outlined in https://github.com/crisp-im/crisp-sdk-android/issues/26.

walterholohan commented 3 years ago

@moxspoy I merged your forked repo however I am getting the following error when trying to build the project: image

Where you able to fix this?

moxspoy commented 3 years ago

@walterholohan actually the forked repo is not updated, because i prefer to change code in my node_modules directly (for simplicity).

what i have done to make it work (fix error inflating) was only remove the tag name in element (check my updated repo after push), because i guess that native SDK did not correctly delete the fragment after destroyed.

moxspoy commented 3 years ago

your errors comes because the class is not activity (but it is in CrispChatView that extend LinearLayout). we should call getFragmentManager from Activity.

walterholohan commented 3 years ago

I merged your changes. The app does not crash now because of duplicate fragments, however, if I close the Crisp window and reopen it again then it gets stuck on the loading screen. Do you get the same behaviour?

image

moxspoy commented 3 years ago

@walterholohan same with me. In my case, the app also didn't respond when we click back button.. this problem probably comes due to incorrect implementation of crisp webview in their SDK

walterholohan commented 3 years ago

That's a shame, Hopefully they release a new version of the Android SDK soon.

In the meantime, I have upgraded this library to use the latest version of crisp-ios-sdk. Can I get you to give this PR a review - https://github.com/walterholohan/react-native-crisp-chat-sdk/pull/6

TayyabaAslam3317 commented 3 years ago

Any update on this?

adrielschmitz commented 3 years ago

Sup? Any update on this?

walterholohan commented 3 years ago

I've just released a new version of this library that updates both iOS and Android SDK's. I am now using the beta version of Crisp's new android SDK so this will fix the above issue you are seeing. Let me know how you get on.

walterholohan commented 3 years ago

Closing issue as this is fixed in the latest version