What's causing White Screen of Death in Meteor Cordova build?

Question

I'm troubleshooting an Android app with a white screen of death when I build for Android in Meteor. It works when displaying from browser on development, on deployed server, and on mobile browser.

The application is built in MeteorJS using Angular. Versions are Meteor 1.6.1.1 and angular:angular@1.5.3_1.

The error messages in console are as follows:

=> Started proxy.                             
=> Started MongoDB.                           

WARNING: You are testing your app on a remote device. For the mobile app to be able to connect to the local server, make sure your device is on the same network, and that the network configuration allows
             clients to talk to each other (no client isolation).

=> Started your app.                          
=> App running at: http://localhost:3000/     
=> Started app on Android Device.             
I20180530-14:46:50.104(1)? 05-30 14:46:44.712 31175 31175 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.150(1)? 05-30 14:46:45.219 31320 31320 I CordovaLog: Changing log level to DEBUG(3)
I20180530-14:46:50.151(1)? 05-30 14:46:45.457 31320 31320 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.151(1)? 05-30 14:46:45.579 31320 31387 E chromium: [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.
I20180530-14:46:50.152(1)? 05-30 14:46:46.560 31320 31320 I MeteorWebApp: Serving asset bundle with version: 7990da69bb2fd9d114781c4ced3482f74c30885b
I20180530-14:46:50.152(1)? 05-30 14:46:46.785 31350 31401 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.153(1)? 05-30 14:46:47.285 31350 31401 E chromium: [ERROR:BudgetService.cpp(160)] Unable to connect to the Mojo BudgetService.
I20180530-14:46:50.153(1)? 05-30 14:46:47.781 31320 31320 I chromium: [INFO:CONSOLE(44922)] "WARNING: Tried to load AngularJS more than once.", source: http://localhost:12880/packages/modules.js?hash=b66baa905179fb6487e6ccaa81cbb12b2e53c95c (44922)

Packages:

meteor-base@1.3.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.4.2                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.4.0   # CSS minifier run for production mode
standard-minifier-js@2.3.1    # JS minifier run for production mode
es5-shim@4.7.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.10.6              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command

autopublish@1.0.7             # Publish all data to the clients (for prototyping)
insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
angular:angular@1.3.0
jquery
angular:angular-route
angular:angular-sanitize
angular:angular-animate
d3js:d3
urigo:static-templates
fourseven:scss
twbs:bootstrap
browser-policy

Cordova plugins:

cordova-plugin-meteor-webapp@1.4.1
cordova-plugin-splashscreen@4.1.0
cordova-plugin-statusbar@2.3.0
cordova-plugin-wkwebview-engine@https://github.com/apache/cordova-plugin-wkwebview-engine.git#815ed0741b9ae30b343d6429bd8ff2ad37ec5790
cordova-plugin-wkwebviewxhrfix@https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.git#593eb98a155bd1f970276222be8c6bfa757568f4

@Swoox suggested I run dev tools in chrome and it produced these errors:

WARNING: Tried to load AngularJS more than once.
app.js:510 imports7999 start
app.js:510 all imports complete
app.js:510 Meteor Startup!
app.js:510 STRIPPED-DOWN 07 - app create command sent
app.js:510 Process Line in Action animations enabled

It will probably give some error. You want to debug your phone. https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in follow these steps. Connect your phone with a cable to the pc. Make sure the window show up with the folder of the mobile. If not enable usb debugging. You probably not put the path as `./` in the `index.html` — Swoox, May 30 '18 at 14:09
@Swoox I edited the question to display the errors showing up in DevTools — Chris, May 30 '18 at 14:48

score 1 · Answer 1 · answered May 30 '18 at 20:08

It seems you are running Meteor on a local server. When you are running your app on a local server, your server and your client (your app on the phone) must be on the same WiFi network and the network configuration shouldn’t prevent the client from reaching the server.

If you need your mobile app to connect to a different server, you can specify an address using the --mobile-server option.

For production, you need to set the environment variables of ROOT_URLwhich will be the URL (or domain) of your app accessible via internet, and MONGO_URLwhich will be the URL of your MongoDB deployment.

Related examples;

meteor run android-device --> Both server and the client must be on the same WiFi network
meteor run android-device --mobile-server your_app.herokuapp.com --> --mobile-serverparam is used to define the server URL accessible on Internet
You can also define the related environment variables like ROOT_URL="https://your_app.herokuapp.com" and MONGO_URL="mongodb://user:password@myserver.com:10139"

You may refer to the official guide here, too.

score 1 · Answer 2 · answered Jun 03 '18 at 08:57

So you mean it works from a mobile browser on the same device as you run the app?

My best recommendation is that you use Remote Inspect (e.g. chrome://inspect; Console and Network primarily) to figure out what goes wrong.

Forgotten/misconfigured tag or CSP?

score 0 · Accepted Answer · answered Jun 03 '18 at 18:29

When I used Meteor ~2 years ago, I had a similar experience. The way I debugged it was by using the error event. It's not the best way to debug errors, but it is easy to use, so it might be worth a shoot before you dig deeper into using a proper debug tool that takes time to setup and learn how use.

What's causing White Screen of Death in Meteor Cordova build?

3 Answers3