Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]

[Santoshah]

Operating System

Android 14

Browser Version

Android apk

Firebase SDK Version

10.7.2

Firebase SDK Product:

Firestore, Installations

Describe your project's tooling

I am using Ionic angular 17 with capactior to build android app using Android studio. It works everywhere browser, ios devices, etc but not on generated apk or android studio emulator pixel 6a VanillaIceCream.

Android 14.0
Android Emulator 34.2.14
android sdk platform-tools 35.0.1

Describe the problem

The code work perfectly fine for IOS devices and browser. But when generate apk or run inside emulator I keep getting issue saying

I have tried everypossible way I know but couldnt make this work. The application works fine but it doesn't connect with firestore to fetch data on Android only.

main.347578574ae0b918.js:1 [2024-05-21T09:52:29.312Z]  @firebase/firestore: Firestore (10.8.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

Below in my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { environment } from 'environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { QuillModule, provideQuillConfig } from 'ngx-quill';

import { provideFirestore } from '@angular/fire/firestore';
import { FirestoreSettings, connectFirestoreEmulator, enableIndexedDbPersistence, getFirestore, initializeFirestore } from 'firebase/firestore';
import { provideAuth } from '@angular/fire/auth';
import { initializeApp, getApp } from "firebase/app";
import {provideFirebaseApp} from "@angular/fire/app";
import { Capacitor } from "@capacitor/core";
import { getAuth, initializeAuth, indexedDBLocalPersistence } from "firebase/auth"
import { HttpClientModule } from '@angular/common/http';

const app = initializeApp({
        apiKey: ******,
        authDomain: "******firebaseapp.com",
        databaseURL: "https://******-******.firebaseio.com",
        projectId: "******",
        storageBucket: "******.appspot.com",
        messagingSenderId: "******",
        appId: "*:888:web:8888",
        measurementId: "*-*****"
});


const firestoreSettings: FirestoreSettings & { useFetchStreams: boolean } = {
  useFetchStreams: false, /* this might not be doing anything*/
  experimentalAutoDetectLongPolling: true /* This line fixed my issue*/
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,

    provideFirebaseApp(() => app),
    provideFirestore(() => {
      if (Capacitor.isNativePlatform()) {
        return  initializeFirestore(getApp(), firestoreSettings)
         } else {
         return getFirestore(app)
      }
    
    }),

    
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return  getAuth();
      }
    }),

    QuillModule.forRoot({
      modules: {
        syntax: false,
        toolbar: {
          container: [
            [{ align: [] }],
            ["bold", "italic", "underline", "strike"],
            ["link"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ color: [] }, { background: [] }],
          ],
        }
      },
    }),
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Steps and code to reproduce issue

Build an basic app using

ionic 7.5.0
Angular 17
Firebase 10.7.2

1. Making build. npm run build:prod
2. npx cap copy android
3. npx cap open android

The last command will open android studio. I hit the play icon to make app run on my pixel emulator. Where the app is working fine but the firestore not able to connect. This is where i get the issue

  @firebase/firestore: Firestore (10.8.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: 

Same code working fine with browsers and IOS app.

[wu-hui]

Thanks. I can try to reproduce this. One question: do you see this error all the time and the SDK simply does not connect to backend? Or does it recover from this after the initial log?

[Santoshah]

Correct. I simply couldn't fetch anything. The error message throws instantly when the page first loads. This happens only with android. Both emulator and real device with apk installed

Below screenshot is the exact message I get.

[Santoshah]

The issue was due to CapacitorHttp config in my capacitor.config.ts. I remove the below code from the file and its now fixed.

"CapacitorHttp": { "enabled": true },

Full code. capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  "plugins": {
    // "CapacitorHttp": {
    //   "enabled": true
    // },
    "SplashScreen": {
      launchShowDuration: 2000,
      launchAutoHide: true,
      launchFadeOutDuration: 2000,
      backgroundColor: "#1ab95c",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
    }
  },
  appId: 'com.skillsmith.internalapp',
  appName: 'skillsmith-ionic',
  webDir: 'www',
  server: {
    hostname: "localhost",
    androidScheme: 'https',    
    iosScheme : 'ionic'
  }
  
};

export default config;

This issue is with capacitorHttp. It is not allowing firebase to connect when the config is enabled.
some reference