Firebase Firestore: Could not reach Firestore backend (Android only)

Question

I'm building a react-native app using Create React Native App. For the backend it uses Firebase Firestore. The app works fine on iOS but fails with the following error on Android (both with simulator and on a device) when trying to fetch data from the backend:

22:02:37: [2018-05-22T05:02:33.751Z]  @firebase/firestore:, Firestore (4.10.1): Could not reach Firestore backend.
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
- node_modules\@firebase\logger\dist\cjs\src\logger.js:97:25 in defaultLogHandler
- ... 18 more stack frames from framework internals

Any idea what can be the problem and how to debug this?

The error seems to be a generic, as there are other questions with the same error message. But in this case it's specific to Android only.

Full log and the stack trace:

21:50:51: Warning: Expo version in package.json does not match sdkVersion in manifest.
21:50:51:
21:50:51: If there is an issue running your project, please run `npm install` in C:\Users\grigor\Documents\Bitbucket\AwesomeProject and restart.
21:51:08: Finished building JavaScript bundle in 26098ms
21:51:14: Running app on XT1053 in development mode

21:51:34: [2018-05-25T04:51:26.597Z]  @firebase/firestore:, Firestore (4.10.1): Could not reach Firestore backend.
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
- node_modules\@firebase\logger\dist\cjs\src\logger.js:97:25 in defaultLogHandler
- ... 18 more stack frames from framework internals
21:51:37: Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 3299464ms)
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:254:8 in setTimeout
- node_modules\@firebase\auth\dist\auth.js:37:577 in Hc
* null:null in <unknown>
- node_modules\@firebase\auth\dist\auth.js:15:932 in y
- node_modules\@firebase\auth\dist\auth.js:37:606 in Ic
- node_modules\@firebase\auth\dist\auth.js:210:0 in kk
- node_modules\@firebase\auth\dist\auth.js:209:665 in start
- node_modules\@firebase\auth\dist\auth.js:215:38 in Dk
- node_modules\@firebase\auth\dist\auth.js:253:425 in ql
- node_modules\@firebase\auth\dist\auth.js:255:146 in <unknown>
- node_modules\@firebase\auth\dist\auth.js:19:220 in <unknown>
* null:null in Gb
* null:null in Cb
- node_modules\@firebase\auth\dist\auth.js:22:103 in Sb
- node_modules\@firebase\auth\dist\auth.js:15:643 in jb
- ... 10 more stack frames from framework internals

Answer 1

I don't have an exact solution for the problem, but I realised that the way in which I was interacting with firebase made my application more susceptible. Maybe you can spot some of my own design flaws in your project?

What I've found is that I was calling initializeApp outside of a try/catch, which meant that the entire JavaScript module would fail whenever the error is encountered. So, the first work around is to properly handle initialization safely.

Secondly, this error became prominent in the way in which I structured my my calls to firestore(). For example, my first call to firebase.firestore() was embedded within a method that returned a Promise, i.e.:

() => firebase.firestore().collection('someCollection').get().then(...).catch(e => ...);

Now, with this approach, if the interaction with firestore failed before a Promise could be returned, we don't actually catch the error! This is because it occurs too early in the chain for a Promise to be created. This meant that again, the application would appear to fail at apparently some much deeper level than something that could be caught inside the application. But that's wrong!

The correct implementation would be to wrap the interaction with firebase.firestore() within a Promise first:

return new Promise(resolve => firebase.firestore().collection(...)).then(q => ...).catch(e =>...);

Hope this helps in some way. I know it's a tricky problem!