javascript - How can I avoid using nested try catch when working with onSnapshot?

Question

this the first time I had to encounter a situation like this where a try catch block wasn't catching errors throwed inside onSnapshot , so I had to use a nested tryCatch block inside it did what I was expecting but it kind looks dirty . I was wondering if this is avoidable ,my code :

const fetchTodaysOrders =async (arg,state)=>{
            try {
   
                const fetchOrdersReponse = await firestore()
                      .collection('orders')
                      .where('distrubutorId','==',currentDistrubutorId)
                      .where('status','==','PENDING')
    
                fetchOrdersReponse.onSnapshot(res=>{
                    const docs= res.docs
                    try {
                        if(docs && docs.length){
                             //some code ...
                         }else{
                            throw new Error('NO_DOCS')
                        }
                    } catch (error) {
                        console.log("----fetchTodaysSectors catch2------")
                        dispatch.scheduel.fetchTodaysSectorsFailed()
                    }
                })
            } catch (error) {
                //this wasn't hit when the error was encountered
                console.log("----fetchTodaysSectors catch1------")
                dispatch.scheduel.fetchTodaysSectorsFailed()
            }
}

question from:https://stackoverflow.com/questions/66068541/how-can-i-avoid-using-nested-try-catch-when-working-with-onsnapshot

Answer 1

You need to understand the Observer pattern properly. The function passed as parameter to onSnapshot does not get called immediately, but rather when the response comes back from firebase. Consequently the execution of the try block associated with 'catch1' completes before the call back function is executed.

There error is not thrown in the onSnapshot function, but rather in the callback function that gets called after results are returned. So handling it inside the callback function is in fact the right way to do it.

Also you are only using some parameters of the onSnapshot. Please consider going through reference and you might find better ways to deal with this. https://firebase.google.com/docs/reference/js/firebase.firestore.Query

Also if you want to deal with errors in a more elegant manner please consider using Rxjs in combination with firebase (https://www.learnrxjs.io/learn-rxjs/operators/error_handling/catch)