Ionic / firebase stuck loading forever

Hi,

Sometimes, whether I use firebase authentication or firebase loading data with Ionic, it gets stuck on the $ionicloading.show.

For some weird reason, during that loading.show if I press the android back button on my device, it somehow kill the problem and the loading disappear with all my firebase data fetched. As if it was doing some sort of “refresh” without actually reloading the page.

When I debug on my device (coz it’s working fine on browser), I find:

WebSocket connection to 'wss://s-dal5-nss-23.firebaseio.com/.ws?v=5&ns=pops&s=k0Ocsru5S8UxExJiI1ocf1KaIca1wz7T' failed: WebSocket is closed before the connection is established. 

I’ve read quite a few topics about that websocket closing, and according to firebase we should disregard that error.
BUT that error is preventing me from actually loading anything…

If anyone has encountered that problem, any help would be much appreciated.

1 Like

Hey I have recently hit this problem with my android device too! It’s very weird.

Does it have something to do with the latest ionic core update? I never had this problem, only started about 2 weeks ago.

Sometimes it works, sometimes its stalls - if I hit the back button it keep loading the data. I also noticed that when I put the app into background it starts connecting and downloading again. Firebase seems to know when the app goes into background and foreground, not sure if Ionic is involved here, but if this stalling issue happens on all android devices, it could be a HUGE issue.

It seems to be working fine on IOS and the web browser.

Anyone have a fix?

1 Like

I am also currently encountering the same issue when loading data from Firebase, especially around authentication, in the Android version of my application.

One thing I did to see if I could narrow the list of potential culprits was create a blank ionic project, hook it up to my firebase, and add the login code from my original app. So far the new project hasn’t had any problems with web socket closures even though I copy pasted the login code from my original app and am connected to the same firebase. The same actions that always get me stuck in the original project are non issues even on my android device in this new project.

Which leads me to believe it some specific issue with my original ionic project and not Android or Firebase :slight_smile: (always the case…)

@mfeliciano.enrique , @pierro

Alright guys let’s tackle this issue - its a big headache.

It also seems centered on authentication for me.

Let’s write out our plugins were using for ionic and see if they coincide.

I’m personally thinking it has something to do with the latest deploy, push, analytics,core, or ionic.js code, since it seems to have started when I updated those files a few weeks ago.

I’m running the code on Android 4.4.4, Nexus 5

‘cordova plugins’:
cc.fovea.cordova.purchase 3.11.0 "Purchase"
com.cordova.plugins.sms 0.1.4 "Cordova SMS Plugin"
com.ionic.keyboard 1.0.4 "Keyboard"
com.johnwargo.carrier 0.0.3 "carrier"
com.phonegap.plugins.PushPlugin 2.5.0 "PushPlugin"
com.telerik.plugins.wkwebview 0.4.0 "WKWebView Polyfill"
cordova-plugin-admobpro 2.8.3 "AdMob Plugin Pro"
cordova-plugin-appavailability 0.4.2 "AppAvailability"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-contacts 1.1.1-dev "Contacts"
cordova-plugin-crosswalk-webview 1.2.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-extension 1.1.4 "Cordova Plugin Extension"
cordova-plugin-facebookads 4.2.3 "FacebookAds"
cordova-plugin-file 2.1.0 "File"
cordova-plugin-file-transfer 1.2.1 "File Transfer"
cordova-plugin-google-analytics 0.8.0 "Google Universal Analytics Plugin"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-media 1.0.1 "Media"
cordova-plugin-nativeaudio 3.0.3 "Cordova Native Audio"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-statusbar 1.0.1 "StatusBar"
cordova-plugin-webserver 1.0.3 "CordovaWebServer"
cordova-plugin-whitelist 1.0.0 "Whitelist"
ionic-plugin-deploy 0.3.0 "IonicDeploy"
net.yoik.cordova.plugins.screenorientation 1.3.4 "Screen Orientation"
nl.x-services.plugins.socialsharing 4.3.19 "SocialSharing"
org.apache.cordova.dialogs 0.3.0 "Notification"
org.apache.cordova.globalization 0.3.4 "Globalization"
org.apache.cordova.network-information 0.2.15 "Network Information"
org.pushandplay.cordova.apprate 1.1.7 “AppRate”

I’m using all 4 ionic extras: analytics, deploy, push, core.

Let me know how this meshes with your installs.

And here’s the line im using for my content-security-policy (for whitelist-plugin) :

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src &apos;self&apos; &apos;unsafe-inline&apos; *; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *">

Wow, just noticed there’s some escaped chars in there, it should maybe be: (I’ll see if this fixes it and get back to you!)

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">

Alright

I did try a few weeks ago to integrate services like ionic deploy, push, analytics, but ended up removing them from my project. One thing I thought it might be was the fact that had an old version of ionic in lib/ionic instead of the latest but I updated to 1.1.0 and still see this problem.

I am running Android 4.4.4 on a Droid Maxx

cordova plugins
com.ionic.keyboard 1.0.4 "Keyboard"
com.phonegap.plugins.facebookconnect 0.11.0 "Facebook Connect"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-file 2.1.0 "File"
cordova-plugin-file-transfer 1.2.1 "File Transfer"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
org.apache.cordova.statusbar 0.1.10 “StatusBar”

@mfeliciano.enrique

I wonder what version of android @pierro is running…

Its good to see your list is so simple, it rules out a lot of plugins.

Whats your content-security-policy in index.html?

@mfeliciano.enrique, @pierro

Ok maybe this will help:

Try adding this to your config.xml file:

<allow-intent href="*.firebaseio.com" />
  <allow-intent href="auth.firebase.com" />
  <access origin="*.firebaseio.com" />
  <access origin="auth.firebase.com" />

The allow-intent code came from here: https://www.firebase.com/docs/web/libraries/ionic/guide.html#section-cordova-inappbrowser

However, I found that it still did not work until I added the access-origin code too

Not sure if its a full fix tho… hmm

2 Likes

Hi all :smile:

My android version is >4.4

Actually, I no longer have that problem.

The problem came from my code, in my login controller where I use authentication, I had two “firebase ref”.

I noticed one of them wasn’t even used, maybe a leftover from previous attempt of facebook login.

Anyway, once I got rid of the extra " new Firebase " ref, I never encountered that problem again… Hopefully it can help.

Well, that’s good to know, because I do have a couple instances of multiple new Firebase…

Ok, so this seems to be the problem. Definitively - http://stackoverflow.com/questions/31219005/firebase-requests-stalling-at-negotiation-phase-how-to-debug

It’s fixed if you uncomment cordova.js in index.html.

Now I wonder what are the consequences of uncommenting cordova.js?

4 Likes

@jason_engage

That fixed it for me! Thanks so much you definitely helped me find the root cause of this problem faster than I would have otherwise. I will keep an eye out for any adverse effects.

Thanks ! I was stuck with the same problem, now everything work fine.
I think there no big conscequence about uncomment cordova, I see a line in the console about that :
Ionic Core: cordova.js has already been loaded

EDIT: Nope, the problem is still there :frowning:

I had more or less the same problem but in my case the issue was intermittent and not reproducible. See:

I also saw the warning about “cordova already loaded” (logged by the ionic.io libraries).

For now I just took out the ionic.io libraries (analytics etc, at the moment these are in “alpha” stage so probably it wouldn’t be wise to use them for production apps anyway). I’ll monitor closely if I see the issue again.

You help me a lot, thanks for posting the answer, I wonder if anyone from the Ionic team will post an official answer because right now I’m using ionic servers and I’ve uncommented cordova.js

Did you decide that this is the best solution to fixing the issue?

Do Not Remove Cordova, You may face some serious problem in future when you want to use some native library.

I made some tricks which solved this issue for me.

Create firebase instance just after app module like this -
var appMain = angular.module(‘starter’, [‘ngCordova’,‘ngStorage’,‘ionic’,‘starter.controllers’,‘starter.services’,‘firebase’]);
var firebaseInst = new Firebase(“https://xyz.firebaseio.com/”);

& this instance you can directly call in controller

var objMatches = $firebaseObject(firebaseInst.child(“methods”));

— Do Not Create Services for firebase instance.

2 Likes

Hey everyone!

I was facing a similar problem on my android phone. Ironically my app ran smoothly on my development laptop and most of the time it ran smoothly on my android phone, but once this problem occurred my android, it kept loading without doing anything anymore, it never ran on my android again. Only when I did ‘ionic run android’ and reinstalled the app did it work again.

I had a look at my app resources via remote debugging and I noticed the key value: “firebase:previous_websocket_failure” had “true” to its value. So I deleted this key-value pair and simply restarted my app, then my app finally began working again. I plan on getting around this solution by checking for this key-value pair and removing it programatically, and hopefully the next time a user opens the app it will work…if the user hasn’t uninstalled it by then.

I dont know what happens to my app that this bug seems to crop up, so I cant replicate the conditions for the bug and know whether my code works. Normally that particular key value pair would get deleted once loading starts, but on some occasions it doesnt and thats why my app fails.

I dont know if this post helps. Just check your resources via remote debugging. Maybe its is something there. Let me know what you guys think.

I’ve also noticed this websocket failure in the localstorage, but usually disappears automatically… Next time our app keeps stuck during loading (it happens sometimes) I’ll check if it’s still there and remove it…

Exactly my point. In my case when app got stuck loading that key-value pair never dissappered as it should have so I’ve put it on $watch to delete it immediately if it turns up. Lets see if I run into this problem again. For the time being the app seems to work fine. Fingers crossed.