React Native Android app that uses websockets is crashing as webview is not loaded

[bakkiraju]

Environment

Run react-native info in your terminal and paste its contents here.
React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 8.46 GB / 31.81 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4907809

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
React native app with WebSockets runs fine on Android Virtual Device, but fails with following error message stack trace on physical android device.Not sure why WebView is in the picture here as I dont explicitly use it
anywhere in the code

" This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.
E/WebViewFactory: Chromium WebView package does not exist"

"android.webkit.WebViewFactory$MissingWebViewPackageException: Failed to load WebView provider: No WebView installed"

Caused by: android.webkit.WebViewFactory$MissingWebViewPackageException: Failed to load WebView provider: No WebView installed
at android.webkit.WebViewFactory.getWebViewContextAndSetProvider(WebViewFactory.java:319)
at android.webkit.WebViewFactory.getProviderClass(WebViewFactory.java:383)
at android.webkit.WebViewFactory.getProvider(WebViewFactory.java:194)
at android.webkit.CookieManager.getInstance(CookieManager.java:39)
at com.facebook.react.modules.network.ForwardingCookieHandler.getCookieManager(ForwardingCookieHandler.java:161)
at com.facebook.react.modules.network.ForwardingCookieHandler.get(ForwardingCookieHandler.java:59)
at okhttp3.JavaNetCookieJar.loadForRequest(JavaNetCookieJar.java:59)
at com.facebook.react.modules.network.ReactCookieJarContainer.loadForRequest(ReactCookieJarContainer.java:42)
at okhttp3.internal.http.BridgeInterceptor.intercept(BridgeInterceptor.java:84)
at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:147)
at okhttp3.internal.http.RetryAndFollowUpInterceptor.intercept(RetryAndFollowUpInterceptor.java:126)
at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:147)
at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:121)
at okhttp3.RealCall.getResponseWithInterceptorChain(RealCall.java:200)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:147)
at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
at java.lang.Thread.run(Thread.java:764)

Reproducible Demo

Any React native project using standard out of box websockets.
React native app deployed to device using command
"react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

[radko93]

Can you create a repro for this? Without it we cannot help.

[bakkiraju]

Can you create a repro for this? Without it we cannot help.

a sample demo app at https://github.com/bakkiraju/sampleRNWSProj , it reproduces what I am seeing on my end.

Also in my project folder when I do

find . -name WebSocket*

I see

./node_modules/jsdom/lib/jsdom/living/generated/WebSocket.js
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl-browser.js
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/react-devtools-core/node_modules/ws/lib/WebSocket.js
./node_modules/react-devtools-core/node_modules/ws/lib/WebSocketServer.js
./node_modules/react-native/Libraries/WebSocket
./node_modules/react-native/Libraries/WebSocket/WebSocket.js
./node_modules/react-native/Libraries/WebSocket/WebSocketEvent.js
./node_modules/react-native/Libraries/WebSocket/WebSocketInterceptor.js
./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java
./node_modules/ws/lib/WebSocket.js
./node_modules/ws/lib/WebSocketServer.js

Is is possible that browser implementation of websockets is getting picked which causes the following stack trace on device

[bakkiraju]

Looks like the react native generated Android app not using OkHttp implementation, I wrote a native Java Android app using OkHttp and it worked on my device as expected. Any leads from community on how to proceed with debugging this problem is greatly appreciated. Thanks

[dryganets]

react-native uses okhttp WebSockets. The problem root cause is that your device is missing WebView for some reason.

react-native replaces okhttp cookies manager with the android's ForwardingCookieManager which relies on WebView. (Probably to share the cookies with WebView?)

We are seeing this crash in production too. There is only a small fraction of devices have no WebView.

[bakkiraju]

react-native uses okhttp WebSockets. The problem root cause is that your device is missing WebView for some reason.
Can I side load the missing webview in form of apk using adb or do something equivalent to get past this issue ?

[dryganets]

You need to install it from the AppStore.
I have no idea how did you manage to remove it though.
It is usually impossible to uninstall the WebView app.

[bakkiraju]

It is usually impossible to uninstall the WebView app.

I dont think I removed it, I got the device from other team,
Is there a way to look into list of apk's or equivalent process to make sure the webview is really absent from my android image ?

Something like

adb shell ps -A

should tell me if webview process is available ?

[dryganets]

adb shell pm list package | grep web

for me output is:
package:com.google.android.webview

[bakkiraju]

I see chromium webview as well, do you think that is causing the conflict ?

Any idea on how I get get it out of the way and try my react-native app with android.webview

$ adb shell pm list package | grep web
package:com.android.webview
package:org.chromium.webview_shell

[bakkiraju]

Managed to remove the webshell with following comand

adb shell cmd package uninstall -k --user 0 org.chromium.webview_shell

rebooted the device and

verified that I only have package:android.webview

$ adb shell pm list package | grep web
package:com.android.webview

Ran my react native app again,
I see the same crash I originally had (red screen in report above). So concluding that its not chromium.webview_shell .

Wondering why I keep getting "No WebView Installed" even though I see a webview in the package list, probably got to do with some timing issue where my program is aborting out before the webview could load and become available ?

[dryganets]

Not sure, you could try to make a simple app which reproduces the issue.

This call is causing the problem:

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/ForwardingCookieHandler.java

Lines 159 to 167 in ea53727

	private CookieManager getCookieManager() {
	if (mCookieManager == null) {
	possiblyWorkaroundSyncManager(mContext);
	mCookieManager = CookieManager.getInstance();
	if (USES_LEGACY_STORE) {
	mCookieManager.removeExpiredCookie();
	}
	}

If you are able to repro it on your device with react-native maybe you could make a standalone app doing this call. I'm not sure what is the root cause of this problem.
Maybe it is just a race condition caused by the bad timing, maybe it will be 100% repro on your device this is something you need to experiment with to come up with fix/workaround of the problem.

Options to play with it in react-native code base:

• Would it stop crashing if we won't do lazy loading?
• Would it stop crashing if we keep lazy loading but change the packages initialization order? Say load WebViewModule before we loading the NetworkModule. You could modify the load order in https://github.com/facebook/react-native/blob/b002df945b267c6e36aa1041397ffd1c73167037/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java
  and
  https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java

[cpojer]

This issue has been moved to react-native-webview/react-native-webview#432.