Angular ServiceWorker interferes with Firestore's network requests ("Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds" log warning).

[Brahmarishi]

[REQUIRED] Describe your environment

• Operating System version: MacOS 10.13.4
• Firebase SDK version: 5.0.4
• Firebase Product: Firestore

[REQUIRED] Describe the problem

Firestore fails on production mode.

[2018-06-04T06:11:47.859Z] @firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

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.

Steps to reproduce:

build project using ng build --prod and served in firebase hosting firebase deploy --only hosting

Relevant Code:

Firestore fails to start.

this.afs.collection('users').doc<User>(user.uid).valueChanges().subscribe((data) => {
    console.log(data)
};

undefined -> console.log(data)

The version used is firebase: "5.0.4" with angularfire2: "^5.0.0-rc.10"

[JancoBH]

I have the same problem, I have no idea how to solve this but it happens only when I use my personal laptop (to see the error I need to refresh the page and change the browser tab to any other, after 10 seconds or more, I back and I see the error) , when I try to do the same in the PC of my work I can't see the error again.

This is a big problem because I use Hotjar and I see many people getting the same error when the firestore data are not presented.

I'm Using Angular 6.0.3, angularfire2 5.0.0-rc.10 and firebase 5.0.4

[mikelehen]

@JancoBH That is not really the same problem, since the original issue was caused by build minification. It sounds like your problem might be related to your browser throttling the page when it's in a background tab, causing our Firestore connection to time out. If you want to pursue this further, it'd be helpful if you could open a brand new issue and include whatever details you have about customers hitting this (e.g. verify that the problem is only when in a background tab, etc.).

For what it's worth, Firestore will continue to connect to the backend, so as long as you're using an onSnapshot() listener, you will receive data once it successfully connects.

[sujit13666]

same problem here in react native when using firestore.

[jbsness]

same here using vue.js and vue-firestore

[mikelehen]

Thanks for the feedback. Unfortunately, reporting that you get this log message without any additional context is not actionable.

To be clear:

1. The log message is 100% normal in certain circumstances.
2. The issue reported by @Brahmarishi sounds like an environment issue and isn't indicative of a problem in Firebase or Firestore. I'm only leaving this issue open because if the problem is identified, it's possible we could implement some workaround or provide advice for other devs that run into this.

@sujit13666 React Native is a whole different beast. We've had a number of issues with React Native and have fixed some in Firestore and some in React Native. Please make sure you're using the absolute latest versions. You may also want to look at https://github.com/firebase/firebase-js-sdk/issues/638#issuecomment-394553299 which describes a recently-discovered issue with react-native-image-picker. If none of this solves your issue, please open a brand new issue with minimal repro steps so we can reproduce the problem and investigate.

@jbsness Can you clarify that you are seeing the exact same symptoms that building with ng build --prod causes you to get this error? If not, please open a brand new issue with minimal repro steps and as much detail about your environment as you can provide so that we can reproduce the issue.

Thanks!

[altaired]

Also getting the following error from multiple computers and network connections:

@firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. 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.

[mikelehen]

@perssonsimon1 Per my comment above, please confirm that you are only experiencing this log message with production/minified builds. If that's not the case, please open a new issue with a minimal repro and details on your environment so we can reproduce the issue and investigate. Thanks!

[altaired]

@mikelehen I am building it and deploying it for production, same way as @Brahmarishi are describing.

[mikelehen]

@perssonsimon1 Thanks. And it works fine when testing locally?

[mikelehen]

I created a minimal Angular / Firestore app following the instructions in https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md and I am unable to reproduce the issue. After running "ng build --prod" and serving the files from dist/ the app still works and can connect to Firestore.

Can somebody experiencing this issue provide a minimal repro please?

[altaired]

@mikelehen It is not working on both the local and the deployed prod build.

[mikelehen]

@perssonsimon1 Then that is a different issue. Please file a brand new issue with a minimal repro, and we can try to investigate.

[Brahmarishi]

The failing repo is uploaded to: https://github.com/Brahmarishi/demo URL for the built and hosted application: https://insicle-499bd.firebaseapp.com/

Just like @mikelehen said, Doesn't work in local and deployed prod build

[mikelehen]

Running 'ng serve' or 'ng build' from that repo fails for me with:

Error: ENOENT: no such file or directory, stat '/Users/mikelehen/tmp/minification-bug/src/manifest.json' at Object.fs.statSync (fs.js:965:11) at Observable.rxjs_1.Observable.obs [as _subscribe] (/Users/mikelehen/tmp/minification-bug/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/host.js:222:25) at Observable.subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/Observable.js:162:69) at MapOperator.call (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/operators/map.js:62:23) at Observable.subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/Observable.js:159:22) at CatchOperator.call (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/operators/catchError.js:28:23) at Observable.subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/Observable.js:159:22) at MapOperator.call (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/operators/map.js:62:23) at Observable.subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/Observable.js:159:22) at /Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/util/subscribeTo.js:22:31 at Object.subscribeToResult (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/util/subscribeToResult.js:7:45) at new ForkJoinSubscriber (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/observable/forkJoin.js:165:57) at Observable._subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/observable/forkJoin.js:145:16) at Observable.subscribe (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/Observable.js:162:69) at /Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/util/subscribeTo.js:22:31 at Object.subscribeToResult (/Users/mikelehen/tmp/minification-bug/node_modules/rxjs/internal/util/subscribeToResult.js:7:45)

[Brahmarishi]

I've missed the manifest.json file in the upload. I've uploaded manifest to the same repo now. Thanks .

[JancoBH]

I never noticed that this problem is happening with ng build --prod , @mikelehen I Forgot to say that I'm using ng build --prod too and now in the computer of my job is happening the error too.

[mikelehen]

@Brahmarishi I still can't build...

~/tmp/minified-build-repro (master) $ `npm bin`/ng build --prod

Date: 2018-06-07T16:13:20.197Z
Hash: bf1611dd22fdedbb495c
Time: 6354ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.2903ad11212d7d797800.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.ccaf5e809a95378fb7c4.js (main) 595 kB [initial] [rendered]
Error: Expected to find an ngsw-config.json configuration file in the /Users/mikelehen/tmp/minified-build-repro folder. Either provide one or disable Service Worker in your angular.json configuration file.
Error: Error: Expected to find an ngsw-config.json configuration file in the /Users/mikelehen/tmp/minified-build-repro folder. Either provide one or disable Service Worker in your angular.json configuration file.

FWIW I tried changing serviceWorker to false in angular.json and then it builds and when I open the page, Firestore seems to be working, though I do get an error about "TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script."

[Brahmarishi]

I've tried the repo in 2 other computers and it fails for me. I've uploaded ngsw-config.json. Failed with serviceworker set to false as well. I missed the part about creating and attaching firestore project. ill add it anyway

1. Create a project on firebase
2. npm i -g firebase-tools
3. firebase login
4. firebase init
5. Project name and default for everything else, public directory: dist/insicle
6. ng build --serve
7. firebase deploy --only hosting

app.component.ts logs for value from firestore collection(test).doc(test1)

[mkollers]

Same Problem here. Only on some devices of our customers, without any idea what causes the issue.

[mikelehen]

@mkollers Sorry, this issue is specifically tracking a problem with AngularJS prod builds not working. If you are seeing intermittent issues, you are hitting a different problem and you'll need to open a new github issue with as much detail as you can provide (ideally a way to reproduce the issue, else it won't be very actionable).

@Brahmarishi Thanks. I can now run the repro and reproduce. Digging in more I'm fairly certain the AngularJS service worker is interfering with our network connections. If I disable the service worker in angular.json or I replace the handleFetch(req, ctx) { ... } implementation in ngsw-worker.js with just "return null;" then the problem goes away.

Unfortunately I'm on vacation for the next week and probably won't be able to track this down any further. @jamesdaniels knows a bit more about AngularJS / AngularFire and may be able to help figure out what's going on. I'm not sure if this is something we can work around in Firestore or if we'll need to get some sort of fix / workaround from the AngularJS team.

For now if you can remove the service worker, that's probably the straightforward workaround.

[mkollers]

I also use Angular and AngularFire, so it sounds like the same or at least a similar problem. I would like to give you something that reproduces the bug, but I can't reproduce the problem myself. The problem occurs in two different products and three different persons/machines.

It occurs in Windows 7 with IE11, Windows 10 with Chrome and on the iPhone in Safari. At first I thought it was a network / firewall problem, but all three devices are in different networks and also have different IT service providers or are private persons. I have not (no longer) registered a Service Worker. Unfortunately I only have screenshots of the problem or have seen it live on site. I can only adjust it by setting a very high latency network configuration in Chrome.

What do I do in code? I register a new user and save additional information in the Firestore afterwards:

await this._auth.auth.createUserWithEmailAndPassword(mail, password);
const mail = this._auth.auth.currentUser.email;
await this._db.collection('users').doc(mail).set(value, { merge: true }));

Maybe it'll help you @mikelehen somehow, if not, just ignore it -)

[Brahmarishi]

The temporary fix worked. Disabling the service worker worked. Thanks . Hoping to get the bug corrected soon.

[ohanspace]

same problem with angularfire2 while using .enablePersistence() I am observing a collection of documents. the documents are fetching from the remote firestore successfully but after that, it always shows that "firebase(5.0.4) Could not reach Cloud Firestore backend... " error. and even if I change the data in the firestore console and refresh my app page it always showing the previously loaded data..never syncing the remote firestore data. OS: linux ubuntu 18.04 "angularfire2": "^5.0.0-rc.10", "firebase": "^5.0.4",

[jfan1256]

I am getting the same results as @ohanspace both just with a ng serve and with a production build...

[Pashkaua]

And i have the same problem (( But when i change project on firebase, it works ! So i create a new project on database add his cinfig to my angular project.

[loihd]

I got the same problem for both local and prod environments. Any update?

[loihd]

I figured out the cause. It turns out the Ad Blocker (AdGuard) blocked the connection with firebase. I have turned off the AdGuard and the problem is gone. This is the test project link: https://fb-host-test-7a3c1.firebaseapp.com

[tonydiep]

Turning off AdGuard solves it for me too. Thx loidhd

[JancoBH]

In my case I don't have AdGuard or any Ad Blocker and this error happens to me many times, the most of the time this happens when I use my personal pc that is slower than the PC in my work and in my house the internet is worse, but with Hotjat I saw many users where Firestore data never loads.

Using Google Chrome incognito mode with my personal pc I have no problems but in normal mode I get this error

[ohanspace]

I don't use any adGurd on my pc. and this problem also happens in the mobile app (Ionic Cordova app). have u found any solution?

[tonydiep]

FYI: My testing shows the issue is not with AdGuard itself but with my hardware and code taking too long

In my case I'm testing an Ionic app on 3 devices with AdGuard running.

SUCCESS ON FASTER HARDWARE

• The app writes and reads to Firestore correctly on the Galaxy S8 and Lenovo tablet.

FAILS ON SLOWER HARDWARE

• The app fails to connect to Firestore on the LG G4 with AdGuard running.
• I disabled AdGuard and the connection to Firestore works correctly

HYPOTHESIS: ISSUE IS SPEED

• I suspected the combination of my un-optimised app, slow phone, and AdGuard (which runs a VPN server and filters all network records) was causing a timeout since it works correctly on the S8 and Lenovo tablet with faster hardware.

CONCLUSION: ISSUE IS SPEED. CONNECTION IS TIMING OUT (AS STATED IN ERROR MESSAGE)

• I optimised my app, reinstalled AdGuard on the LG G4 and my app can now connect to Firestore even on the slower LG G4.

QUESTION

• Does anyone know how to set a longer than 10 second timeout as a workaround?

[MatanMaimon]

I had this problem too when I was trying to use AngularFirestoreModule instead of AngularFireDatabaseModule.

I don't sure this is what happend to you, but since I was able to finaly get my "collection" (just with list) from db I thought to share this here (maybe someone with my case will tackle this post from google search or something)..

Anyway, as I said, what I did to resolve my problem was to get list (and not collection) by using AngularFireDatabaseModule and not AngularFirestoreModule. Maybe this link can help too. Just be aware that in the link example they imported AngularFireDatabase which didn't work for me, then I changed it to AngularFireDatabaseModule.

Also don't forget to import the module inside your app.module.ts (besides only app.component.ts).

Hope it'll work for you as well!

[mikelehen]

@MatanMaimon Unless I'm mistaken, AngularFirestoreModule and AngularFireDatabaseModule are using entirely different products. The former is Cloud Firestore and the latter is Firebase Realtime Database. You can look at the differences but for most people, switching between them would not be a suitable solution to this issue.

[mabr0wn]

Hi all,

I have seem to resolve the @firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. for my project atleast, I had a take(1) operator in my NgRx effects after removing the error seems to go away in dev and prod, but just stating this solution worked for my project. I hope this helps.

[calldeludo]

hello guys, i am facing the same error, yesterday my app was working perfectly, but today i started to work and when i try to load some data, this error appears. what happened?

[mydoal]

I have a similar situation.

https://github.com/firebase/firebase-js-sdk/issues/1060

[mwawrusch]

Same here too. removing enablePersistance() makes the app work, but at the expense of worsened user experience.

[ageblade]

It also happens in my Polymer 2 application when running on IE11 only. Any updates?

[vcrepin]

Any development on this issue ? Still facing the problem and nothing suggested worked for me.

[rajesh99]

I am facing the same problem. It is happening on chrome and firefox.

@firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. 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.

[mikelehen]

@rajesh99 Does disabling the Angular ServiceWorker solve it for you?

[steelcorsy]

Kaspersky caused problem here

[janpansa]

I am getting the same issue with a specific database set. Right after I create a new user in firebase, I try to create a record in the firestore database and get this error :

@firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

However authentication works and all my other db set in my app works. Just in this instance it does not work ...

I dont have kaspersky I dont have a firewall I am not using the angular service worker

UPDATE:

I have updated @angularfire2 -> @angular/fire 5.1.0 I have update @firebase -> @firebase 5.5.6 It seems to have worked.

[sitaram-dev]

sometimes app or system uses proxy settings that scan every request hence make request execution late. to check if the request executing within 10 seconds in chrome go to Developer Tools->Network->All. then check the [time] field for every firebase request and then check [initiator] field to check who is initiating the request if initiator is not [firebase] then congratsss !!!! u got your culprit and just fix it

[sitaram-dev]

[sitaram-dev]

[Robofolk]

Not sure if this helps. But you can increase the time out as following:

const db = firebase.firestore();
db.settings({
  timestampsInSnapshots: true,
  offlineTimeout: 75  // default is 10 seconds.
});

[mikelehen]

@Robofolk That would only work if you're building the Firebase SDK from this branch. That branch exists for experimental reasons and we don't currently have plans to ship it.

[guy032]

Anyone who has a slow internet connection like 3G slow speed will get this message in the console and of course the app won't work. We started going for Brazil this week and we've seen that happens over there all the time on their desktops browsers. I can even see the error my self in dev tools when I choose 3g low. My only option is to use the branch mentioned above in order to deliver a working product to slow internet connections?

[cor1]

I have been seeing this issue very frequently starting a few days ago. The only change I did to my app was update from firebase 5.5.5 to 5.5.8. I did not use any service workers. I have no antivirus or ad blockers affecting it. (I dont even have this installed on one device) Several other people in the angularfirebase slack community are reporting the same thing and it all started at around the same time period (a few days ago) around 50% of the time my app works fine and loads instantly. the other 50% it just times out. Since its not just me and it started happening to all of us at around the same time on the slack, I dont think this is an individual code issue with our projects. Im also on a gigabit internet line and have no network slow downs. My next step is to roll back to firebase 5.5.5 when it worked