XHR request to Firebase Functions stays hanging on Samsung Internet Browser 14

Question

Our app uses the Firestore and Firebase Functions. To save an order, we call a https callable Firebase Function like this:

try {

  const setMealplanOrder = fn.httpsCallable("setMealplanOrder");
  await setMealplanOrder(newOrder);

  return true;

} catch (error) {
  console.log(" ~ file: saveOrder.tsx ~ line 158 ~ save ~ error", error)
  Sentry.captureMessage("Error saving order, possibly on Android?" + error);
}

It works and has worked on all devices, until a few days old Samsung update to Android 11 and Samsung internet 14. Now, the XHR request from await setMealplanOrder(newOrder) is just stuck. The console is empty, with no errors.

Any idea what could it be? Or how to debug this?

Additional notes:

• Interestingly, when I connect the phone to the app on a localhost, it works perfectly.
• When I try to fire the same request from a new clean app, it works. So the issue is probably caused in a combination with something else in the app.

Answer 1

Solved: Firebase version issue! The issue was in firebase-messaging-sw.js Service Worker, which we use for Firebase Cloud Messaging (push-notification). The version of the service worker was outdated.

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.

importScripts('https://www.gstatic.com/firebasejs/7.17.2/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.17.2/firebase-messaging.js')

...

After updating both npm i firebase@latest and changing the version in the importScripts to 8.4.3, it works as it should.