Adding files to Firestore in React Native, after being offline for a few minutes, causing a crash. Connection WebChannel transport errored

[NOxDriver]

I'm writing a React Native app to allow users to upload photos and some text information to a firebase database and storage. The app will be used mostly offline in remote areas.

I'm building the app in Expo.

If I switch my phone to airplane mode and immediately go through the upload process, then switch back to online, the upload works fine. But, if I'm offline for a minute or so, the error "Firestore (9.6.10): Connection WebChannel transport errored: [object Object]" appears and then if I perform the upload process, the app crashes immediately after I press save.

How would I go about allowing the user to finish the upload process even after that error appears?

app.js:

 import firebase from 'firebase/compat/app'

  const firebaseConfig = {
    apiKey: "-",
    authDomain: ".com",
    projectId: "-",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };

  if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig)
    firebase.firestore().enablePersistence() 
  
  }

Upload process:

     import React, { useState, useEffect } from 'react'
      import { View, TextInput, Image, TouchableOpacity, Text } from 'react-native'
      
      import firebase from 'firebase/compat/app'
      import { snapshotEqual } from 'firebase/firestore'
      import 'firebase/storage';
      import { getStorage, uploadBytes, ref, getDownloadURL } from 'firebase/storage';
      
      
      require("firebase/firestore")
      require('firebase/storage')
      
      export default function Save(props, {navigation}) {

    const [caption, setCaption] = useState("")
    const [url, setURL] = useState();

    const uploadImage = async () => {

        const storage = getStorage();

        const uri = await props.route.params.image;
        const childPath = `post/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
        const reference = ref(storage, childPath);

        const response = await fetch(uri);

        const blob = await response.blob();

        const task = await uploadBytes(reference, blob);

        const downloadURL =  await getDownloadURL(reference);
        savePostData(downloadURL)
        return downloadURL;
    }

    const savePostData = (downloadURL) => {

        firebase.firestore()
            .collection('posts')
            .doc(firebase.auth().currentUser.uid)
            .collection("userPosts")
            .add({
                downloadURL,
                caption,
                creation:firebase.firestore.FieldValue.serverTimestamp()
            }).then((function (){
                props.navigation.popToTop()

            }))

    }

I'm running this on my iOS (15.3.1) and Android (android 10)

Android seems to be working, even after that error comes up. iOS doesn't work.

@react-native-firebase/app: 14.7.0
@react-native-firebase/storage": 14.7.0

[mikehardy]

Hi there! You haven't included any information on your versions or the device you reproduce this on - so I'm unsure https://stackoverflow.com/help/how-to-ask

You may be having an issue with this though #6158, meaning you might want to use a slightly older version of react-native-firebase until I unblock the update of firebase-android-sdk with #6122

[NOxDriver]

I've added those details, thanks!
Which version should I revert to?

[mikehardy]

I just looked ate #6158 more closely and unfortunately I'm not sure reverting will actually help, this appears to be an issue starting at the end of last year and I'm not sure what safe versions would be.

Going forward would be best but normally you would do that by overriding something in android/build.gradle like so: https://rnfirebase.io/#android to use 29.2.1, but how you do that in Expo? I'm unfortunately not the person to ask, I don't use expo so I can't really give advice on how to override android settings

It's important to note that this is also just a hunch, I'm not sure this will actually be the root cause of your problem.

[NOxDriver]

I downgraded @react-native-firebase/app: 14.7.0 to 14.1.0 and it actually seems to have fixed it mostly. Before, the crash on iOS would happen every time, now it only crashes once in awhile. Do you think the downgrade could have been the fix?
I just did 'yarn add @react-native-firebase/[email protected]'

[mikehardy]

unsure - a crash typically means "crash trace needed", then the next step is to search the error message here and in firebase-ios-sdk / firebase-android-sdk for related issues then proceed with the info uncovered or start tracing code during execution to verify programming assertions. Same steps every time. I think a downgrade affected it based on your results but if you are still crashing, it hardly seems like a fix